MVC MVP MVVM

Tangpj 發布于2019-08-21 12:02 / 3452人閱讀

摘要：，的事件回調函數中調用的操作方法。以為例調用關系模式實際就是將中的改名為，調用過程基本一致，最大的改良是間的雙向綁定。和間，有一個對象，可以操作修改，使用。

參考：
MVC，MVP 和 MVVM 的圖示 - 阮一峰
http://www.ruanyifeng.com/blo...
Web開發的MVVM模式
http://www.cnblogs.com/dxy198...
界面之下：還原真實的MV*模式
https://segmentfault.com/a/11...
Angular沉思錄（一）數據綁定
https://github.com/xufei/blog...
深入理解JavaScript系列（32）：設計模式之觀察者模式
http://www.cnblogs.com/TomXu/...

MVC/MVP/MVVM 在很多博問中都有整理，這里我根據閱讀博文和自己的理解，梳理一下 web 前端 html、css、javascript 中的他們。

1 MVC 1.1 MVC 調用關系

用戶行為輸入，View 傳遞給 Controller（在JS中通過事件監聽實現）；Controller 進行應用邏輯處理，調用 Model 暴露的接口方法操作 Model；View 與 Model 間為觀察者模式，Model 更新完數據后通知 View 更新。

JS中的觀察者模式 - 湯姆大叔博文，本文闡述了如何在JS中實現觀察者模式：觀察者模式中 Model 通知 View 更新，實際上是 Model 對訂閱了自己的 View 提供操作方法的調用。

1.2 經典MVC的JS編碼理解

View，View 包含2部分：1）實現界面展示的 html+css；2）對外暴露的操作 View 的方法。
View -> Controller，用戶行為從視圖傳遞至控制器，有兩種方法：1）通過 html 標簽的事件屬性如 onclick；2）JS中的addEventListener（非IE）/ attachEvent（IE）方法。（如JQuery的bind和angular的ng-click等都是對原生方法的封裝，等效于上述方法）
Controller，當視圖發生用戶行為輸入時候，會進入控制器中的事件回調函數，在回調函數中，一般會對界面數據進行預處理（如：輸入校驗）、應用邏輯處理（如：界面顯示Loading），然后調用對應的 Model 方法進行模型更新操作。
Controller -> Model，Controller 的事件回調函數中調用 Model 的操作方法。
Model，Model 可理解為一個對象，對象的屬性就是抽象的數據模型，對象的方法就是對 Controller 暴露的操作方法。
Model -> View，Model 更新 View 使用觀察者模式，從JS實現上來說 Model 有個數組隊列中保存著訂閱（subscribe）了自己 View 的更新方法，Model 更新完畢后，遍歷并調用數組中的 View 更新方法即為發布（publish）。

OK，這就是 HTML+CSS+JS 實現 經典MVC 的一個流程，下面我們說說它的優缺點。

1.3 MVC 優缺點

優點：
1）職責分離思想，MVC三者各司其職，模塊化；
2）觀察者模式，實現單個Model可更新多視圖更新。

職責分離的優點不用多說，代碼清晰易維護；觀察者模式實現單個數據模型，可同時更新多個視圖，擴展性良好。

缺點：
1）View依賴Model，不可避免引入業務邏輯，不易復用。

舉個栗子，model 和 view 如下：

????model 僅有 good/middle/bad 3種數據，view 基于此數據，需擴展顏色、圖例描述等系列業務邏輯，經典MVC中，view 對外暴露渲染餅圖的方法，顏色這些業務的東東就被包含進去了，這就是我們說的不可避免引入業務邏輯。假設現在有新的 model2 含3種商品數量（顏色用黃、綠、藍），要復用餅圖 view，我們很容易想到，在 view 與 model 間加一層模型轉換就能很實現復用，但是經典MVC中，model 與 view 之間是觀察者模式，那么模型轉換只能放到 view 中（model 一般不變），view 得擴展個新方法來滿足 model2。
????這個簡單例子也許不能很充分說明 View 依賴 Model 造成的問題，但可設想如果 View 的業務邏輯和應用功能十分復雜，那么要適配不同的Model必然造成 View 的臃腫，一定程度后便難以復用。

2 MVP

我理解，現在大家常提及的 MVC 實際就是 MVP，它刷新界面一般遵循 V -> P -> M -> P -> V 的步驟。（MVP 模式將 Controller 改名為 Presenter，可等同視之）

2.1 MVP調用關系

用戶行為輸入，View 傳遞給 Presenter（在JS中通過事件監聽實現）；Presenter 進行應用邏輯處理，調用 Model 暴露的接口方法操作 Model；Model 更新完數據后傳遞給 Presenter（異步 Model 操作可使用 promise，讓Presenter在回調函數中獲得最新數據），Presenter 處理最新數據，調用 View 暴露的接口方法更新 View。

2.2 MVP的JS編碼理解

MVP 徹底分離了 View 與 Model，使用 HTML+CSS+JS 編碼，移除 MVC 觀察者模式，其余都很容易理解，在此不再贅述。

2.3 MVP 優缺點

優點：
1）解決View與Model耦合問題，使View變薄，更易復用。

請對應參考上面 MVC 中的缺點1的例子。使用 MVP 后，Presenter 作為 View 和 Model 的中間層，那么 View 和 Model 僅需對外暴露標準接口，模型轉換的那些事兒，全部可以交給Presenter，View 層變薄，更容易復用。

缺點：
1）Presenter 承擔了V->M和M->V的應用和業務邏輯，容易變得臃腫，可維護性降低。

3 MVVM（以Angular1.x為例） 3.1 MVVM 調用關系

MVVM 模式實際就是將 MVP 中的 Presenter 改名為 ViewModel，調用過程基本一致，最大的改良是 ViewModel 間的雙向綁定。

3.2 雙向綁定帶來了什么

這里以實際項目中用過的 Angular1.x 為例，下圖僅為示意便于理解。

View 和 ViewModel 間，有一個對象 $scope，ViewModel 可以操作修改 $scope.data，View html 使用 $scope.data。當 ViewModel 設置 $scope.data=123 時，Angular框架會自動刷新 View 的顯示 123，同理當界面有 input 這樣的入口時，修改 data 時，Angular框架也會自動刷新到 $scope.data 中。
【優點】View 和 ViewModel 間的數據同步功能，部分被 Angular 框架承擔，部分解決了 MVP 中 Presenter 臃腫的問題，當然編碼也會很方便。

GPU云服務器云服務器 MVP MVVM 與mvp 阿里云mvp

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87366.html

MVC，MVP 和 MVVM 模式如何選擇？

摘要：如何同步的變更。在沒有環境下對進行單元測試的時候，業務邏輯的正確性是無法驗證的更新的時候，無法對的更新操作進行斷言。對是通過接口進行，在對進行不依賴環境的單元測試的時候。這里根據上面的例子給出了的單元測試樣例。前言做客戶端開發、前端開發對MVC、MVP、MVVM這些名詞不了解也應該大致聽過，都是為了解決圖形界面應用程序復雜性管理問題而產生的應用架構模式。網上很多文章關于這方面的討...

Worktile 2019-08-16 12:30 評論0 收藏0
MVC、MVP 和 MVVM 對比筆記

摘要：模型與視圖解耦，編寫單元測試更方便。切實的將模型綁定到了視圖，這一責任在中被控制器提前持有了。視圖和視圖模型使用數據綁定和事件進行通信。觸發器數據觸發器允許我們進一步在視圖狀態變化后改變我們的對象屬性。 MVC、MVP 和 MVVM 三個非常重要的架構模式 MVC (Model(模型)-View(視圖)-Controller(控制器)) MVP (Model(模型)-View(視圖)...

paney129 2019-08-23 16:28 評論0 收藏0
MVC,MVP,MVVM淺析

摘要：的模式之間不同主要是與的數據傳遞的流程不同。所以無論是復雜化簡單化還是修改流程，基本都是因為技術棧變化了對應做的調整。實例實際項目往往采用更靈活的方式，以為例。用戶可以向發送指令事件，再由直接要求改變狀態。與不發生聯系，都通過傳遞。概述 M -V- X 本質都是一樣的重點還是在于M-V 的橋梁要靠 X來牽線。 X的模式之間不同主要是 M與V 的數據傳遞的流程不同。數據傳遞的流程不...

Vultr 2019-08-22 10:36 評論0 收藏0
MVC MVP MVVM

摘要：，的事件回調函數中調用的操作方法。以為例調用關系模式實際就是將中的改名為，調用過程基本一致，最大的改良是間的雙向綁定。和間，有一個對象，可以操作修改，使用。參考：MVC，MVP 和 MVVM 的圖示 - 阮一峰http://www.ruanyifeng.com/blo...Web開發的MVVM模式http://www.cnblogs.com/dxy198...界面之下：還原真實的MV...

wushuiyong 2019-08-02 15:58 評論0 收藏0