摘要：如函數(shù)通過名，找到對(duì)應(yīng)的數(shù)組，并觸發(fā)所有數(shù)組內(nèi)回調(diào)函數(shù)。核心代碼如下效果圖源碼前端實(shí)現(xiàn)小節(jié)整篇文章基本是圍繞著如下點(diǎn)，的觀察者模式的實(shí)現(xiàn)展開，期間的銷毀則取消與之有關(guān)聯(lián)對(duì)象的關(guān)系，如銷毀時(shí)，注銷掉與之關(guān)聯(lián)的的回調(diào)函數(shù)。

隨著前端應(yīng)用日趨復(fù)雜,如今如angular，vue的mvvm框架,基于virtual dom的react等前端庫基本成為了各個(gè)公司的首選。而以當(dāng)初最流行的頭號(hào)大哥backbone為代表的mvc庫基本退出了歷史舞臺(tái)。

在現(xiàn)如今人人都說mvvm/react多好,backbone多差的時(shí)代。筆者看別人文章，看的時(shí)候總是感覺好像有點(diǎn)道理，看完之后如耳邊風(fēng)一般左耳朵進(jìn)，右耳朵出。

so，痛定思痛之后，筆者定了個(gè)小目標(biāo)，實(shí)現(xiàn)了份簡(jiǎn)易版的backbone庫。以設(shè)計(jì),實(shí)現(xiàn)的角度來對(duì)比其它類型庫的差異。

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

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

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

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

但近幾年flux的action,store的出現(xiàn)，View調(diào)用action，具體數(shù)據(jù)變化計(jì)算則在store內(nèi)部實(shí)現(xiàn),也算是把Control功能從View內(nèi)部抽象出來了吧。

為對(duì)象提供對(duì)事件的處理和回調(diào),內(nèi)部實(shí)現(xiàn)了觀察者(訂閱者)模式,如view訂閱了model的變化，model變化之后則通知view。

on函數(shù)通過event名,在object上綁定callback函數(shù)，將回調(diào)函數(shù)存儲(chǔ)在數(shù)組里。

off函數(shù)移除在object上綁定的callback函數(shù)

通過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函數(shù)通過event名，找到object對(duì)應(yīng)的數(shù)組，并觸發(fā)所有數(shù)組內(nèi)回調(diào)函數(shù)。

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

這時(shí)候則可以抽象內(nèi)部公用方法。通過遞歸的方式,on({name1:callback1,name2:callback2})類型的和on("name1 name2 name3",callback)類型，最終轉(zhuǎn)化為最基本的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;
};

無狀態(tài),實(shí)例化的時(shí)候可以對(duì)應(yīng)多個(gè)model實(shí)例，并以觀察者的身份觀察這些model的變化，通過這些model數(shù)據(jù)，加上指定的模版渲染dom,展示UI。

銷毀的時(shí)候注銷掉所有model的觀察，取消與相關(guān)model之間的關(guān)聯(lián)。

實(shí)例化的時(shí)候通過事件委托注冊(cè)瀏覽器事件

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

listenTo，將model與view實(shí)例關(guān)聯(lián)起來，并收集關(guān)聯(lián)model,存儲(chǔ)于listenTo數(shù)組內(nèi)，內(nèi)部實(shí)現(xiàn)則是調(diào)用model的on函數(shù)

stopListening，view銷毀前調(diào)用,通過listenTo數(shù)組找到關(guān)聯(lián)model,并取消view與這些model之間的觀察者關(guān)系。

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

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

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注冊(cè)的dom事件

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

承載著應(yīng)用的狀態(tài)，可以隨時(shí)和后端保持同步。

內(nèi)部實(shí)現(xiàn)了對(duì)數(shù)據(jù)變化的監(jiān)聽,一旦發(fā)生變化則通知觀察者View發(fā)生變化。

監(jiān)聽數(shù)據(jù)的變化,對(duì)model的修改，刪除之后調(diào)用對(duì)應(yīng)的trigger函數(shù),通知訂閱了model變化的view。

set函數(shù),改變model數(shù)據(jù)，并觸發(fā)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函數(shù)觸發(fā)destroy事件

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

提供數(shù)組類型models的push,unshift,pop,shift,remove,reset等功能。push,unshift實(shí)際調(diào)用add函數(shù)，pop,shift實(shí)際調(diào)用remove函數(shù)。

add函數(shù)支持任意索引插入指定數(shù)組，觸發(fā)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函數(shù)支持刪除指定model，觸發(fā)update事件。

_addReference，調(diào)用add方法新增model時(shí)，通過觀察者模式增加該model與collection之間的關(guān)聯(lián),model的變化通知collection。核心代碼如下：

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

_removeReference，調(diào)用remove，reset移除model時(shí)，取消該model與collection關(guān)聯(lián)。核心代碼如下：

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

生產(chǎn)環(huán)境下需要在保留原生View,Model類的功能情況下做一些業(yè)務(wù)拓展，這時(shí)候需要用到類的繼承。

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

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實(shí)現(xiàn)

整篇文章基本是圍繞著如下2點(diǎn)

view-model，collection-model的觀察者模式的實(shí)現(xiàn)展開，期間view,model的銷毀則取消與之有關(guān)聯(lián)對(duì)象的關(guān)系，如view銷毀時(shí)，注銷掉與之關(guān)聯(lián)的model的回調(diào)函數(shù)。

監(jiān)聽數(shù)據(jù)變化，并通知觀察者作出響應(yīng)，如model變化后觸發(fā)trigger("change")

好了，文章草草寫到這了，多謝各位看官，以上也是純個(gè)人觀點(diǎn)，有問題歡迎各位web前端mvc設(shè)計(jì)指教。