淺析設計模式之mvc、mvp、mvvm

mvc、mvvm、mvp是常見的設計模式，也是常見的設計思想，現對它們進行簡要的概括總結

三種模式的介紹

1.MVC：經典設計模式

• View 傳送指令到 Controller（控制器）
• Controller 完成業務邏輯後，要求 Model 改變狀態
• Model 將新的數據發送到 View，用戶獲得反饋，全部通訊都是單向的

2.MVP:MVP 模式將 Controller 更名爲 Presenter，同時改變了通訊方向。

• 各部分之間的通訊，都是雙向的。
• View 與 Model 不發生聯繫，都經過 Presenter 傳遞。
• View 很是薄，不部署任何業務邏輯，稱爲"被動視圖"（Passive View），即沒有任何主動性，而 Presenter很是厚，全部邏輯都部署在那裏。

3.MVVM

MVVM 模式將 Presenter 更名爲 ViewModel，基本上與 MVP 模式徹底一致。

惟一的區別是，它採用雙向綁定（data-binding）：View的變更，自動反映在 ViewModel，反之亦然。
這裏面使用的設計模式有：觀察者模式（發佈訂閱模式）、代理模式、工廠模式、單例模式。

在 MVVM 中，UI 是經過數據驅動的，數據一旦改變就會相應的刷新對應的 UI，UI 若是改變，也會改變對應的數據。這種方式就能夠在業務處理中只關心數據的流轉，而無需直接和頁面打交道。ViewModel 只關心數據和業務的處理，不關心 View 如何處理數據，在這種狀況下，View 和 Model 均可以獨立出來，任何一方改變了也不必定須要改變另外一方，而且能夠將一些可複用的邏輯放在一個 ViewModel 中，讓多個 View 複用這個 ViewModel。

三種模式的區別

MVC 是世界上最低級、最原始的 UI 模式；MVC 就是在 V 上綁定 M，而後 C 負責處理界面整個提交請求，而且一遍遍地刷新整個 V。這種機制。因此 MVC 的標誌是「初級、單向綁定、一遍遍刷新UI」。

MVP 則是深刻到程序的「骨髓」，UI設計模板與 MVP 事件定義綁定，讓程序員能夠捕獲這麼一個組件的豐富的事件，而後在事件處理過程當中又去從控件樹上去直接訪問其它全部控件，直接修改其屬性。開發的精力很大程度上用在學習各類控件的內部機制上，學習曲線陡峭。因此MVP的標誌是「複雜、事件驅動、精細到每個控件層次」。

MVVM 則是在 MVP 上的改進，它隔離了控件操做層，UI 模板上各類控件直接跟 VM 層的屬性綁定，使得 VM 屬性改變時自動更新 UI 控件，反之 UI 控件的值改變時又自動更新 VM 屬性。這樣編程的方式就不是去一大堆控件事件處理，而是寫少許的 VM 屬性更改行爲代碼。開發精力絕大部分都放在業務與UI的綁定上，而並不須要研究控件內部機制。

總結

MVC 只是把控件跟 M 綁定，一遍遍刷新 UI。而 MVP 則是把控件跟事件單向綁定，它的假設是程序員最愛寫低級的代碼來操做控件。而 MVVM 則是把控件跟 VM 雙向綁定，它的假設是交互界面設計時最愛寫高層次一些的聲明來操做用戶業務行爲上的變化。

三種設計模式的應用

React使用的是MVC模式。全部MVC框架都是單向數據流的。

特點：

使用 Virtual DOM

提供了響應式 (Reactive) 和組件化 (Composable) 的視圖組件。

將注意力集中保持在覈心庫，而將其餘功能如路由和全局狀態管理交給相關的庫。

注：react 其實是一個「僞MVC」，它實際上是 MVP 的，可是它深知 MVP 模式的弊病，它明明是基於組件而且綁定了組件的 change 事件的，可是它有使用虛擬DOM的方式來一遍遍刷新UI控件（而且爲了解決性能問題，有各類負責和詭異的避免全局刷新UI樹的反模式操做）。因此雖然 React 自稱爲 MVC模式，可是實際上它是 MVP 的變種。

 

JQuery 是很是經典的 MVP 編程模式

 

Knockout、AngularJS、Vue 等能夠看做是 MVVM 模式

Angular使用的MVVM模式。當觸發UI事件，ajax請求或者 timeout 延遲，會觸發髒檢查。這時會調用 $digest 循環遍歷全部的listener裏的數據，判斷當前值是否和先前的值有區別，若是檢測到變化的話，會調用$watch 函數，最後把全部的變化所有更新，調用apply()方法把新的數據渲染到頁面上。
優勢：一次檢測會收集全部的數據變化，而後統一更新 UI，大大減小了操做 DOM 的次數。
缺點：只要有ui或ajax或settimeout操做時就會進行檢查，且當watcher之間相互影響的時候，更會觸發屢次$digest循環，這樣watcher一多，就會很影響性能。

注：AngularJS 其實在 MVVM 上作的不是很好，傾向於 MVP。只有 Knockout 是實現了經典的 MVVM 設計模式，並且有幾個性能相關的特性（例如自動延遲 UI 刷新、自動抽稀無用的 UI 刷新操做）能夠將性能提升（相對於其它許多 web 前端框架）至少幾十倍。

Vue必定意義上算是React和Angular的集大成者。它吸收了MVVM的數據管理思想，同時應用了React的virtual Dom算法。它使用了雙向數據綁定來知足開發的便捷，可是它不一樣組件之間又使用單向數據流，來保證數據的可控性。它使用了不少Angular的指令語法，可是它革新了Angular的髒數據檢查機制，使用數據劫持的方法來觸法數據檢查機制。它借鑑了React的組件化思想，大大增長了前端工程的結構規範化。

注：Vue 內部使用了 Object.defineProperty() 來實現雙向綁定，經過這個函數能夠監聽到 set 和 get 的事件。