30行代碼實現Javascript中的MVC

FloridaUYZ 8年前發布 | 16K 次閱讀 MVC模式 JavaScript開發 JavaScript

來自： http://www.html5dw.com/post?id=1337

從09年左右開始，MVC逐漸在前端領域大放異彩，并終于在剛剛過去的2015年隨著React Native的推出而迎來大爆發：AngularJS、EmberJS、Backbone、ReactJS、RiotJS、VueJS…… 一連串的名字走馬觀花式的出現和更迭，它們中一些已經漸漸淡出了大家的視野，一些還在迅速茁壯成長，一些則已經在特定的生態環境中獨當一面舍我其誰。但不論如何，MVC已經并將持續深刻地影響前端工程師們的思維方式和工作方法。

很多講解MVC的例子都從一個具體的框架的某個概念入手，比如Backbone的collection或AngularJS中model，這當然不失為一個好辦法。但框架之所以是框架，而不是類庫（jQuery）或者工具集（Underscore），就是因為它們的背后有著眾多優秀的設計理念和最佳實踐，這些設計精髓相輔相成，環環相扣，缺一不可，要想在短時間內透過復雜的框架而看到某一種設計模式的本質并非是一件容易的事。

這便是這篇隨筆的由來——為了幫助大家理解概念而生的原型代碼，應該越簡單越好，簡單到剛剛足以大家理解這個概念就夠了。

1. MVC的基礎是觀察者模式，這是實現model和view同步的關鍵

為了簡單起見，每個model實例中只包含一個primitive value值。

function Model(value) {
   this ._value =  typeof value ===  'undefined' ?  '' : value;
   this ._listeners = [];

}

Model.prototype.set =  function (value) {

   var self =  this ;
   self._value = value;
   // model中的值改變時，應通知注冊過的回調函數
   // 按照Javascript事件處理的一般機制，我們異步地調用回調函數
   // 如果覺得setTimeout影響性能，也可以采用requestAnimationFrame
   setTimeout( function () {
     self._listeners.forEach( function (listener) {
       listener.call(self, value);
     });
   });

};

Model.prototype.watch =  function (listener) {

   // 注冊監聽的回調函數
   this ._listeners.push(listener);

}; </div>

// html代碼：
<div id= "div1" ></div>

// 邏輯代碼：

( function () {

   var model =  new Model();
   var div1 = document.getElementById( 'div1' );
   model.watch( function (value) {
     div1.innerHTML = value;
   });
   model.set( 'hello, this is a div' );

})(); </div>

借助觀察者模式，我們已經實現了在調用model的set方法改變其值的時候，模板也同步更新，但這樣的實現卻很別扭，因為我們需要手動監聽model值的改變（通過watch方法）并傳入一個回調函數，有沒有辦法讓view（一個或多個dom node）和model更簡單的綁定呢？

2. 實現bind方法，綁定model和view

Model.prototype.bind =  function (node) {
   // 將watch的邏輯和通用的回調函數放到這里
   this .watch( function (value) {
     node.innerHTML = value;
   });

}; </div>

// html代碼：
<div id= "div1" ></div>
<div id= "div2" ></div>

// 邏輯代碼：

( function () {

   var model =  new Model();
   model.bind(document.getElementById( 'div1' ));
   model.bind(document.getElementById( 'div2' ));
   model.set( 'this is a div' );

})(); </div>

通過一個簡單的封裝，view和model之間的綁定已經初見雛形，即使需要在一個model上綁定多個view，實現起來也很輕松。注意bind是Function類prototype上的一個原生方法，不過它和MVC的關系并不緊密，筆者又實在太喜歡bind這個單詞，一語中的，言簡意賅，所以索性在這里把原生方法覆蓋了，大家可以忽略。言歸正傳，雖然綁定的復雜度降低了，這一步依然要依賴我們手動完成，有沒有可能把綁定的邏輯從業務代碼中徹底解耦呢？

3. 實現controller，將綁定從邏輯代碼中解耦

細心的朋友可能已經注意到，雖然講的是MVC，但是上文中卻只出現了Model類，View類不出現可以理解，畢竟HTML就是現成的View（事實上本文中從始至終也只是利用HTML作為View，javascript代碼中并沒有出現過View類），那Controller類為何也隱身了呢？別急，其實所謂的"邏輯代碼"就是一個框架邏輯（姑且將本文的原型玩具稱之為框架）和業務邏輯耦合度很高的代碼段，現在我們就來將它分解一下。如果要將綁定的邏輯交給框架完成，那么就需要告訴框架如何來完成綁定。由于JS中較難完成annotation（注解），我們可以在view中做這層標記——使用html的標簽屬性就是一個簡單有效的辦法。

function Controller(callback) {
   var models = {};
   // 找到所有有bind屬性的元素
   var views = document.querySelectorAll( '[bind]' );
   // 將views處理為普通數組
   views = Array.prototype.slice.call(views, 0);
   views.forEach( function (view) {
     var modelName = view.getAttribute( 'bind' );
     // 取出或新建該元素所綁定的model
     models[modelName] = models[modelName] ||  new Model();
     // 完成該元素和指定model的綁定
     models[modelName].bind(view);
   });
   // 調用controller的具體邏輯，將models傳入，方便業務處理
   callback.call( this , models);

} </div>

// html:
<div id= "div1" bind= "model1" ></div>
<div id= "div2" bind= "model1" ></div>

// 邏輯代碼：

new Controller( function (models) {

   var model1 = models.model1;
   model1.set( 'this is a div' );

}); </div>

就這么簡單嗎？就這么簡單：在Controller中完成業務邏輯并對Model進行修改，Model的變化觸發View的自動更新，怎么樣，算得上一個有模有樣的MVC吧？當然，這樣的"框架"還不足以用于生產環境，不過如果它能或多或少地幫助到大家對于MVC的理解的話，博主就非常滿足了。

整理后去掉注釋的"框架"代碼：

function Model(value) {
   this ._value =  typeof value ===  'undefined' ?  '' : value;
   this ._listeners = [];

}

Model.prototype.set =  function (value) {

   var self =  this ;
   self._value = value;
   setTimeout( function () {
     self._listeners.forEach( function (listener) {
       listener.call(self, value);
     });
   });

};

Model.prototype.watch =  function (listener) {

   this ._listeners.push(listener);

};

Model.prototype.bind =  function (node) {

   this .watch( function (value) {
     node.innerHTML = value;
   });

};

function Controller(callback) {

   var models = {};
   var views = Array.prototype.slice.call(document.querySelectorAll( '[bind]' ), 0);
   views.forEach( function (view) {
     var modelName = view.getAttribute( 'bind' );
     (models[modelName] = models[modelName] ||  new Model()).bind(view);
   });
   callback.call( this , models);

} </div>

4. 一個簡單的例子

下面請大家看一個簡單例子，如何實現電子表

// html:
<span bind= "hour" ></span> : <span bind= "minute" ></span> : <span bind= "second" ></span>

// controller:

new Controller( function (models) {

   function setTime() {
     var date =  new Date();
     models.hour.set(date.getHours());
     models.minute.set(date.getMinutes());
     models.second.set(date.getSeconds());
   }
   setTime();
   setInterval(setTime, 1000);

}); </div>

可以看出，controller中只負責更新model的邏輯，和view完全解耦；而view和model的綁定是通過view中的屬性和框架中controller的初始化代碼完成的，也沒有出現在業務邏輯中；至于view的更新，也是通過框架中的觀察者模式實現的。

后記：

筆者在學習flux和redux的過程中，雖然掌握了工具的使用方法，但只是知其然而不知其所以然，對ReactJS官方文檔中一直強調的 "Flux eschews MVC in favor of a unidirectional data flow" 不甚理解，始終覺得單向數據流和MVC并不沖突，不明白為什么在ReactJS的文檔中這二者會被對立起來，有他無我，有我無他（eschew，避開）。終于下定決心，回到MVC的定義上重新研究，雖然平日工作里大大咧咧復制粘貼，但是咱們偶爾也得任性一把，咬文嚼字一番，對吧？這樣的方式也的確幫助了我對于這句話的理解，這里可以把自己的思考分享給大家：之所以覺得MVC和flux中的單向數據流相似，可能是因為沒有區分清楚MVC和觀察者模式的關系造成的——MVC是基于觀察者模式的，flux也是，因此這種相似性的由來是觀察者模式，而不是MVC和flux本身。這樣的理解也在四人組的設計模式原著中得到了印證：" The first and perhaps best-known example of the Observer pattern appears in Smalltalk Model/View/Controller (MVC), the user interface framework in the Smalltalk environment [KP88]. MVC's Model class plays the role of Subject, while View is the base class for observers. "。

如果讀者有興趣在這樣一個原型玩具的基礎上繼續拓展，可以參考下面的一些方向：

1. 實現對input類標簽的雙向綁定

2. 實現對controller所控制的scope的精準控制，這里一個controller就控制了整個dom樹

3. 實現view層有關dom node隱藏/顯示、創建/銷毀的邏輯

4. 集成virtual dom，增加dom diff的功能，提高渲染效率

5. 提供依賴注入功能，實現控制反轉

6. 對innerHTML的賦值內容進行安全檢查，防止惡意注入

7. 實現model collection的邏輯，這里每個model只有一個值

8. 利用es5中的setter改變set方法的實現，使得對model的修改更加簡單

9. 在view層中增加對屬性和css的控制

10.支持類似AngularJS中雙大括號的語法，只綁定部分html

……

一個完善的框架要經過無數的提煉和修改，這里只是最初最初的第一步，不過別忘了，我們的征程是星辰大海，哈哈

作者：ralph_zhu

時間：2016-02-15 14:30

原文： http://www.cnblogs.com/front-end-ralph/p/5190442.html

本篇文章由 HTML5夢工場 小編從其他媒體精選前端相關文章轉載，僅供網友學習和交流，如果小編的工作有侵犯到您的權益，請及時聯系小編QQ：123464386，將會在第一時間進行處理！投稿與合作，請發至郵箱：tommy@html5dw.com

</div>

 本文由用戶 FloridaUYZ 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

相關經驗

相關資訊

相關文檔