【設計模式】MVC，MVP 和 MVVM 的區別

複雜的軟件必須有清晰合理的架構，不然沒法開發和維護。

MVC（Model-View-Controller）是最多見的軟件架構之一，業界有着普遍應用。它自己很容易理解，可是要講清楚，它與衍生的 MVP 和 MVVM 架構的區別就不容易了。

昨天晚上，我讀了《Scaling Isomorphic Javascript Code》，忽然意識到，它們的區別很是簡單。我用幾段話，就能夠說清。

1、MVC

MVC模式的意思是，軟件能夠分紅三個部分。

 

• 視圖（View）：用戶界面。
• 控制器（Controller）：業務邏輯
• 模型（Model）：數據保存

各部分之間的通訊方式以下。

 

1. View 傳送指令到 Controller
2. Controller 完成業務邏輯後，要求 Model 改變狀態
3. Model 將新的數據發送到 View，用戶獲得反饋

全部通訊都是單向的。

2、互動模式

接受用戶指令時，MVC 能夠分紅兩種方式。一種是經過 View 接受指令，傳遞給 Controller。

 

另外一種是直接經過controller接受指令。

 

3、實例：Backbone

實際項目每每採用更靈活的方式，以 Backbone.js 爲例。

 

1. 用戶能夠向 View 發送指令（DOM 事件），再由 View 直接要求 Model 改變狀態。

2. 用戶也能夠直接向 Controller 發送指令（改變 URL 觸發 hashChange 事件），再由 Controller 發送給 View。

3. Controller 很是薄，只起到路由的做用，而 View 很是厚，業務邏輯都部署在 View。因此，Backbone 索性取消了 Controller，只保留一個 Router（路由器） 。

4、MVP

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

 

1. 各部分之間的通訊，都是雙向的。

2. View 與 Model 不發生聯繫，都經過 Presenter 傳遞。

3. View 很是薄，不部署任何業務邏輯，稱爲"被動視圖"（Passive View），即沒有任何主動性，而 Presenter很是厚，全部邏輯都部署在那裏。

5、MVVM

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

 

惟一的區別是，它採用雙向綁定（data-binding）：View的變更，自動反映在 ViewModel，反之亦然。Angular 和 Ember 都採用這種模式。

（完）

引用阮一峯的網絡日誌 http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html