MV*(MVC、MVP、MVVM)

參考：http://blog.csdn.net/kevin_1025745654/article/details/45815109

MV*

 

已知：M（數據與數據邏輯，例如ajax、本地存儲模塊）
後端的MVC：M提供數據API；V 即模板，可以直接從M獲取數據，C 即控制顯示哪個模板


前端的MV*
MVC : V（視圖邏輯，backbone裏的V即View模塊），C（控制視圖的顯示，backbone裏的C即Router模塊）


MVP : P（Presenter主持人，或者Passive View被動視圖。負責響應V，調用M，更新V）。也可以把backbone的View理解爲P。
MVP與MVC的差別：MVC裏的V直接調用M的接口，MVP中則不能，得通過中間人P。


MVVM : V（模板），VM（視圖模型，即數據與視圖綁定，數據邏輯與視圖邏輯綁定。普通的M的對外提供接口，VM則自動綁定視圖。angularJS裏VM即controller組件，裏面的邏輯即數據邏輯，裏面的scope即數據）
MVVM與MVP的差別：P要顯式操作V，而VM與V雙向綁定。
優勢：代碼結構更好（易維護，易打包），雙向綁定和組件化（易開發，易協同）

MV*的區別在於V與M之間的流程，MVC中V直接調用M。MVP中V調用P，P再調用M。MVVM中V綁定VM，VM調用M。

單頁應用

單頁應用的路由模塊的實現原理：
1、地址欄有錨值(有 # 號)，刷新時瀏覽器發的請求不帶 # 號及後面部分
2、通過location.hash 可以讀寫錨值（帶#號）
3、改變錨值時會增加一條歷史記錄，但不會重載頁面
4、window.onhashchange 監聽錨值變化事件

5、另有history.pushState(狀態對象, 新標題, 新url)方法和 window.onpopstate 事件。state與hash是兩碼事，pushState或回退的時候會觸發onpopstate並傳入狀態對象

backbone自帶路由模塊，不能嵌套

angularjs 路由模塊：https://github.com/angular-ui/ui-router ，可嵌套

reactjs路由模塊：https://github.com/reactjs/react-router，可嵌套

組成部分：MV*、模塊加載工具、路由、打包工具、UI組件

 

前端架構

 

1、無模塊加載系統：html 引入一個js，js爲一個自調用函數（閉包）
2、有模塊加載系統：html 引入模塊加載庫 和 入口模塊，入口模塊中再去加載其他模塊。這些模塊可以是backbone的View、Angular的controller、React的component，也可以是完全自定義的閉包揭示模塊、構造器模塊
3、單頁應用：在2的基礎上監聽 state 或 hash，重新渲染頁面。

 

數據綁定

本質上是三種方式 1、（angularjs 1.x）監控數據變化，操作DOM；2、（react）整體更新虛擬DOM，diff，操作DOM；3、（vue）監控數據變化，局部更新虛擬DOM，diff，操作DOM

監控數據變化之髒檢查

     angularJS 1.x採用，在controller或$apply中改變scope的屬性，會自動調用$dist，進行髒檢查。發生變化的屬性，調用其$watcher。view中寫ng-，會自動爲其創建$watcher。

監控數據變化之對象監控
Object.observe：Chrome、ES7；Object.observe(model,function(changes){ // changes裏包含變化信息})，支持的瀏覽器少

監控數據變化之屬性訪問器

1、Object.defineProperty：Vue採用，原生支持
Object.defineProperty(obj,‘name’,//三個參數分別爲：對象、屬性名、屬性描述對象
{ 
    configurable: false,  //屬性是否可配置
    enumerable: true,    //屬性是否可枚舉
    writable: true,      //屬性是否可重寫，不能與set/get同存
    value: null,         //屬性的默認值，不能與set/get同存
    set: undefined,     // 重寫器，這裏可以寫入數據綁定邏輯
    get: undefined      // 讀取器
})
Object.getOwnPropertyDescriptor(obj, 'name');// 獲取屬性描述對象

2、非原生：backbone的model，屬性只能通過get 和 set訪問，通過listen給他們掛鉤子。backbone只給了監控數據變化的方法，不會自動操作DOM，隱藏沒有數據綁定

監控數據變化之代理

用Proxy實現：Vue 3

 

MVVM對比

   1、如何檢查model變化：髒檢查（angularjs） 、 訪問器（vue、backbone）、整體重新渲染，無需檢查（react）
   2、如何更新視圖：串行直接操作DOM（angularjs）、通過虛擬DOM
   3、數據綁定：單項（react）還是雙向（angularJS、Vue）
   4、代碼分離：JS、HTML是否分離，JSX需要經過編譯，不好調試和定位錯誤
   5、體積、社區、文檔等
   6、組件