談談MVC模式 及 MVP 和 MVVM 的圖示

1.如何設計一個程序的結構，這是一門專門的學問，叫做"架構模式"（architectural pattern），屬於編程的方法論。

MVC模式就是架構模式的一種，它對我的啓發特別大。我覺得它不僅適用於開發軟件，也適用於其他廣泛的設計和組織工作。

下面是我對MVC模式的一些個人理解，不一定正確，主要用來整理思路。

2.MVC是三個單詞的首字母縮寫，它們是Model（模型）、View（視圖）和Controller（控制）。

這個模式認爲，程序不論簡單或複雜，從結構上看，都可以分成三層。

1）最上面的一層，是直接面向最終用戶的"視圖層"（View）。它是提供給用戶的操作界面，是程序的外殼。

2）最底下的一層，是核心的"數據層"（Model），也就是程序需要操作的數據或信息。

3）中間的一層，就是"控制層"（Controller），它負責根據用戶從"視圖層"輸入的指令，選取"數據層"中的數據，然後對其進行相應的操作，產生最終結果。

這三層是緊密聯繫在一起的，但又是互相獨立的，每一層內部的變化不影響其他層。每一層都對外提供接口（Interface），供上面一層調用。這樣一來，軟件就可以實現模塊化，修改外觀或者變更數據都不用修改其他層，大大方便了維護和升級。

3、我用Windows的計算器小程序爲例，解釋一下MVC模式，雖然它不一定使用這個模式編寫。

在這個計算器程序中，外部的那些按鈕和最上面的顯示條，就是"視圖層"，那些需要運算的數字就是"數據層"，執行加減乘除的那些內部運算步驟就是"控制層"。每一層執行不同的功能，整個程序的結構非常清楚。

如果我們擴大一點想象，就會發現，很多程序本質上都是這種模式：對外提供一組觸發器（本例中是按鈕），然後執行一些內部操作，最後返回結果。因此，MVC模式的應用是非常廣泛的。

4、在我看來，不僅編寫程序可以用MVC模式，家用電器也可以用。

以家用微波爐爲例，可以將它也理解成三層結構。最簡單的情況下，微波爐的操作用兩個轉盤實現，一個控制溫度，另一個控制時間。這兩個轉盤就是"視圖層"（view），而其內部的微波產生裝置則是"數據層"（Model），這裏的"數據"需要理解成"核心功能"。至於將用戶通過轉盤輸入的信息，轉換成對微波產生器的操作，則用"控制層"來實現。

如果每一層都是獨立的，那麼微波爐外部更換一個新潮的外殼，或者內部更換更大功率的微波產生器，完全可以在不更改其他層的情況下實現。這就是MVC模式的優勢。

5、再進一步，如果將MVC模式解釋成"外觀"、"機制"和"功能/數據"這三層結構，那麼很多人類組織也可以通過MVC模式架構。

比如一家商場，完全可以分成三部分。一部分是倉庫，負責提供商品，這是"功能層"（或者"數據層"）；另一部分是零售鋪面，負責銷售商品，這是它的"外觀層"；兩者之間就是"機制層"，包括櫃檯和倉庫之間一切互動的機制。

這樣區分以後，這個商場的結構就變得非常清楚，可以針對不同的層進行優化，提高效率。

6、公司、政黨、政府、醫院、學校等等，這些組織不管是盈利性還是非盈利性的，都可以從MVC模式的角度，進行架構，由一個個執行特定功能、可重複使用的模塊組成。

我在想，如果人類社會都是模塊化結構，那會是怎樣的情景？

接下來看看MVC模式 及 MVP 和 MVVM 的區別！

一、MVC
MVC模式的意思是，軟件可以分成三個部分。

視圖（View）：用戶界面。

控制器（Controller）：業務邏輯

模型（Model）：數據保存

各部分之間的通信方式如下。

View 傳送指令到 Controller

Controller 完成業務邏輯後，要求 Model 改變狀態

Model 將新的數據發送到 View，用戶得到反饋

所有通信都是單向的。

二、互動模式
接受用戶指令時，MVC 可以分成兩種方式。一種是通過 View 接受指令，傳遞給 Controller。

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


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

1. 用戶可以向 View 發送指令（DOM 事件），再由 View 直接要求 Model 改變狀態。
2. 用戶也可以直接向 Controller 發送指令（改變 URL 觸發 hashChange 事件），再由 Controller 發送給 View。
3. Controller 非常薄，只起到路由的作用，而 View 非常厚，業務邏輯都部署在 View。所以，Backbone 索性取消了 Controller，只保留一個 Router（路由器） 。

四、MVP
MVP 模式將 Controller 改名爲 Presenter，同時改變了通信方向。

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

五、MVVM

MVVM 模式將 Presenter 改名爲 ViewModel，基本上與 MVP 模式完全一致。

_____________________________________________________________________________________________________

_____________________________________________________________________________________________________

本文轉載自 阮一峯 網站

轉載地址一 ：MVC，MVP 和 MVVM 的圖示  http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

轉載地址二：談談MVC模式 http://www.ruanyifeng.com/blog/2007/11/mvc.html