摘要：如函數通過名，找到對應的數組，并觸發所有數組內回調函數。核心代碼如下效果圖源碼前端實現小節整篇文章基本是圍繞著如下點，的觀察者模式的實現展開，期間的銷毀則取消與之有關聯對象的關系，如銷毀時，注銷掉與之關聯的的回調函數。

隨著前端應用日趨復雜,如今如angular，vue的mvvm框架,基于virtual dom的react等前端庫基本成為了各個公司的首選。而以當初最流行的頭號大哥backbone為代表的mvc庫基本退出了歷史舞臺。

在現如今人人都說mvvm/react多好,backbone多差的時代。筆者看別人文章，看的時候總是感覺好像有點道理，看完之后如耳邊風一般左耳朵進，右耳朵出。

so，痛定思痛之后，筆者定了個小目標，實現了份簡易版的backbone庫。以設計,實現的角度來對比其它類型庫的差異。

ok，廢話不多說,上正菜。

MVC即將前端應用抽象為Model,View,Control三大模塊。View為用戶視圖,通過瀏覽器事件接受用戶輸入。Model為數據模型,他可以隨時和后端同步數據。Control則是具體實現View派發的事件，計算并改變Model的數據。

UI可以被抽象為模版+數據，隨著用戶不斷的觸發瀏覽器提供的各種事件，交互不斷的進行，Control接受了View指令改變著Model的數據,而View則隨著Model的改變做出響應，最終展現在用戶面前。

本篇文章的思路來自于backbone,并屏棄了耦合的后端操作。早期MVC并沒有對Control做嚴格的劃分，也許是數據的改變計算并不那么復雜,所以Control功能在View的事件內完成了,也就是說View模塊里面耦合了Control的功能。

但近幾年flux的action,store的出現，View調用action，具體數據變化計算則在store內部實現,也算是把Control功能從View內部抽象出來了吧。

為對象提供對事件的處理和回調,內部實現了觀察者(訂閱者)模式,如view訂閱了model的變化，model變化之后則通知view。

on函數通過event名,在object上綁定callback函數，將回調函數存儲在數組里。

off函數移除在object上綁定的callback函數

通過event名移除指定callback。如object.off("change", onChange)

通過event名移除所有callback。如object.off("change")

移除所有指定callback。如object.off(null, onChange);

移除所有指定context的callback。如object.off(null, null, context);

清空object所有的callback。如object.off()

trigger函數通過event名，找到object對應的數組，并觸發所有數組內回調函數。

其所有方法應該支持類似on(name,callback),on("name1 name2 name3",callback), on({name1:callback1,name2:callback2})

這時候則可以抽象內部公用方法。通過遞歸的方式,on({name1:callback1,name2:callback2})類型的和on("name1 name2 name3",callback)類型，最終轉化為最基本的on(name,callback)類型。核心代碼如下：

this.eventsApi = function (iteratee, name, callback, context) {
    let event;
    if (name && typeof name === "object") {
      Object.keys(name).forEach(key=> {
        event = this.eventsApi(key, name[key], context);
      })
    } else if (SEPARATE.test(name)) {
      var keys = name.split(SEPARATE);
      keys.forEach(key=> {
        event = iteratee.call(this,key, name[key], context);
      });
    } else {
      event = iteratee.call(this,name, callback, context);
    }
    return event;
};

無狀態,實例化的時候可以對應多個model實例，并以觀察者的身份觀察這些model的變化，通過這些model數據，加上指定的模版渲染dom,展示UI。

銷毀的時候注銷掉所有model的觀察，取消與相關model之間的關聯。

實例化的時候通過事件委托注冊瀏覽器事件

_ensureElement,確保View有一層dom包裹,如果this.el這個dom不存在，則通過id,className,tagName創建一個dom并賦值于this.el。

listenTo，將model與view實例關聯起來，并收集關聯model,存儲于listenTo數組內，內部實現則是調用model的on函數

stopListening，view銷毀前調用,通過listenTo數組找到關聯model,并取消view與這些model之間的觀察者關系。

$,將dom的查找定位在 this.$el下

delegateEvents,事件委托,以{"click #toggle-all": "choose"}為例，為在this.el子節點的id等于toggle-all的dom注冊click事件choose函數。核心代碼如下：

delegateEvents: function (events) {

   var $el = this.$el;
   Object.keys(events).forEach(item=> {
     var arr = item.split(" ");
     if (arr.length === 2) {
       var event = arr[0];
       var dom = arr[1];
       $el.on(event + ".delegateEvents" + this.$id, dom, this[events[item]].bind(this));
     }
   })
 },

undelegateEvents,注銷掉通過delegateEvents注冊的dom事件

Model在backbone里被抽象為object類型的Model和array類型的Collection

承載著應用的狀態，可以隨時和后端保持同步。

內部實現了對數據變化的監聽,一旦發生變化則通知觀察者View發生變化。

監聽數據的變化,對model的修改，刪除之后調用對應的trigger函數,通知訂閱了model變化的view。

set函數,改變model數據，并觸發change事件

set: function (obj) {
    this._changing = true;
    this.changed = obj;
    this._previousAttributes = Object.assign({}, this.attributes);
    this.attributes = Object.assign({}, this.attributes, obj);
    const keys = [];
    Object.keys(obj).forEach(key=> {
      keys.push(key);
      this.trigger("change:" + key, this);
    }, this);

    if (keys.length > 0) {
      this.trigger("change", this);
    }
    this._changing = false;
 },

destroy函數觸發destroy事件

destroy: function () {
   this.stopListening();
   this.trigger("destroy", this);
},

提供數組類型models的push,unshift,pop,shift,remove,reset等功能。push,unshift實際調用add函數，pop,shift實際調用remove函數。

add函數支持任意索引插入指定數組，觸發add事件。核心的代碼如下：

    export const splice = (array, insert, at)=> {
      at = Math.max(0, Math.min(array.length, at));
      let len = insert.length;
      let tail = [];
      for (let i = at; i < array.length; i++) {
        tail.push(array[i]);
      }
      for (let i = 0; i < tail.length; i++) {
        array[i + at + len] = tail[i];
      }
      for (let i = 0; i < len; i++) {
        array[i + at] = insert[i];
      }
      return array;
    };

remove函數支持刪除指定model，觸發update事件。

_addReference，調用add方法新增model時，通過觀察者模式增加該model與collection之間的關聯,model的變化通知collection。核心代碼如下：

    _addReference: function (model) {
      model.on("all",this._onModelEvent,this);
     }

_removeReference，調用remove，reset移除model時，取消該model與collection關聯。核心代碼如下：

    _removeReference: function(model) {
       if (this === model.collection) delete model.collection;
       model.off("all", this._onModelEvent, this);
    }

生產環境下需要在保留原生View,Model類的功能情況下做一些業務拓展，這時候需要用到類的繼承。

雖然es6支持extend繼承，但這邊我還是手寫了一份。思路則是返回一個構造函數，該函數的原型為新的實例對象props，而props的原型對象則是父函數的原型(有點拗口，自己看代碼理解)。
核心代碼如下：

export const extend = function (props) {
  var parent = this;
  var child = function () {
    parent.apply(this, arguments);
  };
  child.prototype = Object.assign(Object.create(parent.prototype), props, { constructor: child });
  return child;
};

web前端mvc實現

整篇文章基本是圍繞著如下2點

view-model，collection-model的觀察者模式的實現展開，期間view,model的銷毀則取消與之有關聯對象的關系，如view銷毀時，注銷掉與之關聯的model的回調函數。

監聽數據變化，并通知觀察者作出響應，如model變化后觸發trigger("change")

好了，文章草草寫到這了，多謝各位看官，以上也是純個人觀點，有問題歡迎各位web前端mvc設計指教。