60行之內寫mvc

標題黨。幾天前看到一個30行寫mvc的文章，東施效顰，也動手寫了個60行的，功能上略微擴充一些，記錄下來，後面有時間能夠繼續優化。

mvc實際上是一個觀察者模式。view來監聽model，因此當model的數據有變化的時候，view能夠自動更新視圖。

 

既然view來監聽model，那麼是否是能夠擴展一下，若是頁面上多個模塊同時使用一個數據源，也就是同時使用一個model的時候，是否能夠讓這些模塊的

view都來監聽這一個model，這樣當model的數據發生變化時，監聽該model的views們 視圖同時也都發生了變化呢，確定是能夠的。

 

根據這個思路，花了差很少兩個晚上的時間，寫完了一個基本的雛形。

先看model。

function Model (value) {
      this.value = value || '';
      // idList保存的是 監聽該model的view的id, 該idList示例：[{viewid1: {event1: function(){.....}}},{viewid2: {}}]
      this.idList = [];
  };

  // 當model的數據變化的時候，監聽model的view發生對應的變化
  Model.prototype.changeValue = function (value) {
      var that = this;
      that.value = value;
      var idList = that.idList;

      for (var k in idList) {
        if (idList[k]) {
          for (var j in idList[k]) {
            idList[k][j].call(this, value);
          }
        }
      }
  };

下面是view

function View (id, eventList) {
      this.id = id;
      this.eventList = eventList || {};
  }
  // view基於model的事件，當model的數據變化時，view會經過這些事件
  // 進行視圖的改變
  View.prototype.setEventList = function (eventList, model) {
      var that = this;
      that.eventList = eventList;
      that.subscribeModel(model);
  };
  // view訂閱model 這樣能夠保證多個view公用一個model
  View.prototype.subscribeModel = function (model) {
    var that = this;
    var id = that.id;
    model.idList[id] = that.eventList;
  };

view裏面並無什麼過於複雜的原理。

最後是controller，其實這個controller 可擴展性是很強的，由於只是簡單的練習，controller裏我並無加太多的東西。

function Controller (model, view) {
    this.model = model;
    this.view = view;
  }

  Controller.prototype.trigger = function () {
    this.view.subscribeModel(this.model);
  };

寫了點html實驗一下 OK的

// 如下是測試的代碼
var view = new View ('block', {
    'changeContent': function (data) {
        document.getElementById('block').innerHTML = data;
    }
  });

  var model = new Model();


  var controller = new Controller(model, view);
  controller.trigger();

  model.changeValue('data111');

這裏是有個問題的，就是當model裏有默認的數據時，是沒有去渲染view的，後續能夠再修改。

經過這個簡單的例子，主要是更加清楚model和view的關係。目前機遇mv的架構有不少，但基本原理都是同樣的。