MVC MVVM 和 MVP 這幾種模式在現(xiàn)在的主流框架中被廣泛應(yīng)用，那他們有什么區(qū)別呢？
?

# MVC

? MVC，即Model View Controller，是比較直觀的架構(gòu)模式，分有以下幾個(gè)步驟：

【MVC的工作流程】
? 用戶觸發(fā)事件 -> View（負(fù)責(zé)接收用戶的輸入操作） -> Controller（處理用戶事件邏輯） -> Model（持久化存儲(chǔ)數(shù)據(jù)收到更新請(qǐng)示） -> View（更新數(shù)據(jù)反饋給用戶）

【典型框架】Backbone，Spring

【補(bǔ)充】React并不是一個(gè)MVC框架，而是一個(gè)用于構(gòu)建組件化UI的庫，是一個(gè)前端界面開發(fā)工具。所以頂多算是MVC中的V（view）

? 圖例展示如下：

? 值得注意的是，這些 通信都是單向的。用戶也可以通過改變url來觸發(fā) hashChange事件，這里不多說。

【MVC特點(diǎn)】Controller很薄，基本上只起到路由作用，作為用戶邏輯信息傳遞使用。而因?yàn)閂iew需要接收Model層傳來 View 層非常厚，含有大量業(yè)務(wù)邏輯。
? 在MVC里，View是可以直接訪問Model的！從而，View里會(huì)包含Model信息，不可避免的還要包含一些業(yè)務(wù)邏輯。在MVC里，更關(guān)注的是Model的不變，而同時(shí)有多個(gè)對(duì)Model的不同顯示，即View。所以，在MVC中，Model不依賴于View，但是View依賴于Model，這也是造成數(shù)據(jù)單向的原因。另外，因?yàn)橛行I(yè)務(wù)邏輯在View中實(shí)現(xiàn)，導(dǎo)致了更改View也比較困難。

? 雖然View 訪問Model并沒有錯(cuò)，但是我們依舊不建議在View中依賴Model，而是盡可能的將業(yè)務(wù)邏輯都放到Controller中。
?

# MVP

? MVP，即Model View Presenter，將MVC中的 Controller 更改為 Presenter (提供者)，目的是為了切斷 Model 和 View 之間的關(guān)系，由 Presenter 充當(dāng)橋梁，實(shí)現(xiàn) View 和 Model 的完全通信。這樣，就可以把業(yè)務(wù)邏輯挪到 Presenter上, 減輕View承載的任務(wù)，提高視圖響應(yīng)速度

【典型框架】Riot

? 圖例展示如下

【MVP特點(diǎn)】Presenter完全的把View和Model進(jìn)行分離，主要的業(yè)務(wù)邏輯都在Presenter里實(shí)現(xiàn)。而且具體的View與Presenter并沒有直接關(guān)聯(lián)，而是通過定義好的一些接口進(jìn)行交互，從而是的在變更或更新View的時(shí)候Presenter能夠保持不變，達(dá)到了重用業(yè)務(wù)邏輯的目的。
? 在MVP中，View是很薄的一層，它只需要把信息顯示清除就可以了，后期維護(hù)中，可以根據(jù)需要隨便的修改View而不需要考慮Presenter的感受。如果頁面信息（UI）較為復(fù)雜，而且相關(guān)顯示信息和Model有關(guān)，則可以在View 和Presenter之間放置一個(gè) Adapter ，在Riot中就提供了update()方法，以便提供開發(fā)人員在需要時(shí)更新頁面數(shù)據(jù)。
? 在MVP模式里，View只應(yīng)該有簡單的Set/Get 方法，用于用戶輸入和設(shè)置頁面顯示內(nèi)容，除此之外就不該有更多內(nèi)容，絕不允許直接訪問Model。

? 另外，我們還能夠編寫提供給測(cè)試用的View，來模擬用戶的各種操作，從而實(shí)現(xiàn)對(duì)Presenter的測(cè)試，而不需要使用自動(dòng)化測(cè)試工具。

【MVP優(yōu)勢(shì)】
1、 模型與視圖完全分離，我們可以修改視圖而不影響模型
2、可以更高效地使用模型，因?yàn)樗械慕换ザ及l(fā)生在一個(gè)地方——Presenter內(nèi)部
3、我們可以將一個(gè)Presenter用于多個(gè)視圖，而不需要改變Presenter的邏輯。這個(gè)特性非常的有用，因?yàn)橐晥D的變化總是比模型的變化頻繁。
4、如果我們把邏輯放在Presenter中，那么我們就可以脫離用戶接口來測(cè)試這些邏輯（單元測(cè)試）

【MVP缺點(diǎn)】由于對(duì)視圖的渲染放在了Presenter中，所以視圖和Presenter的交互會(huì)過于頻繁；如果Presenter過多地渲染了視圖，往往會(huì)使得它與特定的視圖的聯(lián)系過于緊密。一旦視圖需要變更，那么Presenter也需要變更了。
?

# MVVM

? MVVM，即 Model View ViewModel，他本質(zhì)上是MVC的改進(jìn)版。相比于MVP，其實(shí)只是把Presenter改成為ViewModel，基本上說后兩者大同小異，唯一的區(qū)別是，它采用雙向綁定（data-binding）：View的變動(dòng)，自動(dòng)反映在 ViewModel，反之亦然。

【典型框架】Angular，Vue，Ember

? 圖例展示如下:

? 將數(shù)據(jù)綁定與Presenter Model 相結(jié)合是非常好的一種策略，這使得開發(fā)人員能將View和邏輯分離出來，而且這種技術(shù)也非常簡單實(shí)用。它與MVP非常的相似，除了你需要為View量身定制一個(gè)Model，也就是ViewModel。它包含了所有由UI特定的接口和屬性，并由一個(gè) ViewModel 的視圖的綁定屬性，并可獲得二者之間的松散耦合，所以需要在ViewModel 直接更新視圖中編寫相應(yīng)代碼。

【MVVM優(yōu)點(diǎn)】
? MVVM模式和MVC模式一樣，主要目的是分離 視圖（View）和模型（Model），有幾大優(yōu)點(diǎn)

1. 低耦合。視圖（View）可以獨(dú)立于Model變化和修改，一個(gè)ViewModel可以綁定到不同的View上，當(dāng)View變化的時(shí)候Model可以不變，當(dāng)Model變化的時(shí)候View也可以不變。
2. 可重用性。你可以把一些視圖邏輯放在一個(gè)ViewModel里面，讓很多view重用這段視圖邏輯。
3. 獨(dú)立開發(fā)。開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel），設(shè)計(jì)人員可以專注于頁面設(shè)計(jì)，使用Expression Blend可以很容易設(shè)計(jì)界面并生成xml代碼。
4. 可測(cè)試。界面素來是比較難于測(cè)試的，而現(xiàn)在測(cè)試可以針對(duì)ViewModel來寫。
   ?

# mvc,mvp,mvvm三者演化

# 后語

? 或許你常聽到有人說，你怎么還在用MVC這種垃圾模式，我早就在用MVVM了。其實(shí)，任何的框架，都是為了項(xiàng)目而服務(wù)的，沒有絕對(duì)的好壞之分，只有更合適的選擇。一個(gè)框架的選擇，要綜合考慮項(xiàng)目階段，團(tuán)隊(duì)規(guī)模及整體能力等條件，切莫為了設(shè)計(jì)而設(shè)計(jì)，為了框架而框架。