JavaScript的UI設計模式次乓，主流上可以分為MVC，MVP和MVVM孽水，本文主要剖析這三種模式的異同票腰。
首先要了解縮寫字母都具體代表什么：
- MVC : Model - View - Controller
- MVP : Model - View - Presenter
- MVVM: Model - View - View Model
1. 共同點
三種模式都含有Model層和View層，其職責基本相似女气。
Model
其包含了描述業(yè)務邏輯和數據的對象杏慰，同時，它定義了一些針對數據的業(yè)務規(guī)則（數據如何被改變炼鞠，如何被操作等等）缘滥。
View
其描繪的是UI組件，比如CSS簇搅，HTML等等完域。它僅僅負責展示從控制器得到的數據，也就是Model到UI的變換過程瘩将。
2. 不同點
下面針對三個模式的控制器（或類控制器）的角度，來分析不同之處。
（注：示例圖片來自網絡）
1). MCV
Contorller
它直接面對User姿现，接受用戶操作肠仪。然后把用戶提供的數據轉為具體的Model，Model再把最終的結果展示在View層备典。一旦UI上觸發(fā)事件操作异旧，Controller再次接受輸入，如此循環(huán)......
Controller是View和Model之間的協調者提佣。
在MVC模式中吮蛹，除了Controller可以訪問Model，View也允許直接訪問Model（Model不依賴View拌屏，但是View依賴Model）潮针。因此，View中可能含有一些業(yè)務邏輯倚喂，導致View的可重用性降低每篷。
2). MVP
Presenter
它負責處理View上各類UI事件。如圖所示端圈，View直接面對User焦读，通過View，Presenter接受輸入原數據舱权，然后交給Model處理矗晃，再把最終結果展示在View上。
Presenter與View通過定義好的接口交互宴倍，是一種低耦合模式张症。
MVP與MVC最大的不同，在于Model和View完全隔離開啊楚，兩者必須通過Presenter進行通信吠冤。因此，主要業(yè)務處理都放在了Presenter層恭理，View層變得比較薄弱拯辙。
MVP模式下，表現層和數據層分開颜价，方便單元測試涯保。
3).MVVP
View Model
它暴露了一系列的方法，命令周伦，或者屬性夕春，用于幫助維護View狀態(tài)，操縱Model數據并最終作用在View上专挪。
支持View和ViewModel的雙向數據綁定及志。
MVVM是MVP的演化版本片排，在概念上真正將頁面和數據邏輯分開。
它最大的特點就是雙向綁定(data-binding)：View改變速侈，ViewModel自動更新率寡；ViewModel更新，Model同步改變倚搬。反之亦然冶共。
一般，ViewModel中的屬性都實現了一些監(jiān)聽器/觀察器每界，用于View或者Model的同步刷新捅僵。
大多數情況，MVVM模式需要依賴具體的平臺或者技術實現眨层，比如Vue.js庙楚。
小結
MVP和MVVM都實現了View和Model的完全隔離，這樣方便前端采用“前后端分離”方式開發(fā)（UI層開發(fā)和Model層數據開發(fā)可同步進行谐岁，并支持Model層單元測試）醋奠。這方面，MVC做不到伊佃。
MVVM可以說是MVP的增強版窜司。
