MVC-MVP-MVVM框架模式分析

MVC（Model-View-Controller）

MVC 架構模式圖（經典版）

注：實際上，Model和View永遠不能相互通訊，只能經過Controller傳遞；上圖只是MVC模式的經典圖。

MVC通常流程：
用戶操做->View（負責接收用戶的輸入操做）->Controller（業務邏輯處理）->Model（數據持久化）->View（將結果反饋給View），單向通訊。

各模塊功能：
視圖（View）：用戶界面。（傳送指令到 Controller）
控制器（Controller）：業務邏輯 （完成業務邏輯後，要求 Model 改變狀態）

• 做用：負責將 View 中用戶的動做傳達給 Model，將 Model 的數據經過 View 展示出來
• 負責：顯示界面、響應用戶的操做、網絡請求以及與 Model 交互

模型（Model）：數據保存、數據持久化。（將新的數據發送到 View，用戶獲得反饋）

缺點：
1.Controller邏輯複雜，難以維護。
2.Controller 和 View 緊耦合，沒法測試。

MVP（Model-View-Presenter）

特色：

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

MVVM（Model-View-ViewModel）

各模塊功能：
Model【模型】：指的是後端傳遞的數據。
View【視圖】：指的是所看到的頁面。
ViewModel【視圖模型】：mvvm模式的核心，它是鏈接view和model的橋樑。
ViewModel 負責:
1.校驗用戶輸入
2.網絡請求
3.展現層的邏輯，好比格式化字符串
4.其餘不能放入 Model，與 View 無關的邏輯
做用：
一、將【模型】轉化成【視圖】，即將後端傳遞的數據轉化成所看到的頁面。實現的方式是：數據綁定。
二、將【視圖】轉化成【模型】，即將所看到的頁面轉化成後端的數據。實現的方式是：DOM 事件監聽。
這兩個轉化的實現過程，咱們稱之爲數據的雙向綁定

詳細流程圖：

注：
1.視圖和模型是不能直接通訊的。
2.與MVC相比，把原來View和Controller層的業務邏輯和頁面邏輯等剝離出來放到ViewModel層。

在vue前端框架中，MVVM的應用： ViewModel一般要實現一個observer觀察者，當數據發生變化，ViewModel可以監聽到數據的這種變化，而後通知到對應的視圖作自動更新；而當用戶操做視圖，ViewModel也能監聽到視圖的變化，而後通知數據作改動，這實際上就實現了數據的雙向綁定。而且MVVM中的View 和 ViewModel能夠互相通訊