一、MVC、MVP、MVVC

　　複雜的軟體必須有清晰合理的架構，否則無法開發和維護。為了將業務和檢視的實現程式碼分離，目前比較流行三種前端架構：

　　MVC = Model-View-Controller

　　MVP = Model-View-Presenter

　　MVVM = Model-View-ViewModel

　　Model 為模型層，主要管理業務模型的資料和行為；

　　View 為展示層，其職責就是管理使用者介面。

　　三個架構模式目的都是為了解耦 Model 和 View，主要不同點就在於三者實現解耦的方案不同。

二、MVC

　　MVC = Model-View-Controller，

• 檢視（View）：使用者介面。
• 控制器（Controller）：業務邏輯
• 模型（Model）：資料儲存

　　各部分之間的通訊方式如下

　　View會接收使用者的互動請求並展示資料資訊給使用者。在 MVC 裡，View 被設計為可巢狀的，使用了組合(Composite)模式來實現。比如，列表檢視(ListView)或表格檢視(TableView)由每個 Item 組成，每個 Item 又可以由圖片、文字、按鈕等組成。View 是傾向於可複用的，因此，在實際應用中，傾向於將 View 開發成相對通用的元件。

　　Controller 層主要擔任 Model 與 View 之間的橋樑，用於控制程式的流程。Controller 負責確保 View 可以訪問到需要顯示的 Model 物件資料，並充當 View 瞭解 Model 更改的渠道。View 接收到使用者的互動請求之後，會將請求轉發給 Controller，Controller 解析使用者的請求之後，資料就會交給對應的 Model。

　　Model在前端框架中就是資料的儲存。在傳統後端開發中習慣把業務層歸入Model，而對前端框架來說，通常不這樣劃分。

三、MVP

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

MVP有以下三個特點：

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

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

3. View 非常薄，不部署任何業務邏輯，稱為"被動檢視"（Passive View），即沒有任何主動性，而 Presenter非常厚，所有邏輯都部署在那裡。

四、MVVM

　　MVVM 模式將 Presenter 改名為 ViewModel，MVP 很相似，最大的不同在於 View 和 ViewModel 之間主要是通過資料繫結的方案來實現互動的。

　　MVVM採用雙向繫結（data-binding）：View的變動，自動反映在 ViewModel，反之亦然。AngularJS和 Vue都採用這種模式，而React採用了單向資料流，屬於MVP架構。　　

　　要實現資料繫結，通常都採用釋出者-訂閱者模式進行實現，但這部分工作如果由開發人員自己來寫程式碼實現，其實還是挺複雜的，因此，各大平臺都提供了各自的內部實現。比如 Vue 和 AngularJS 自身都實現了資料繫結，Android 目前最主流的方案就是採用 Jetpack，iOS 最常用的方案則是結合 ReactiveCocoa（RAC）實現。

　　MVP 和 MVVM 都是為了解決介面和資料的分離問題，兩者只是採用了不同的實現方案。MVP 之間的互動主要是通過介面實現的，其主要弊端就是需要編寫大量介面。而 MVVM 則是通過資料繫結的方式實現互動，雖然其實現需要依賴具體的一些框架工具，但明顯大大減少了開發者需要編寫的程式碼量。