1. 程式人生 > >MVC, MVP, MVVM比較以及區別(下)

MVC, MVP, MVVM比較以及區別(下)

 上一篇得到大家的關注,非常感謝。一些朋友評論中,希望快點出下一篇。由於自己對於這些模式的理解也是有限,所以這一篇來得遲了一些。對於這些模式的比較,是結合自己的理解,一些地方不一定準確,但是隻有亮出自己的觀點,才能拋磚引玉不是? 歡迎各位拍磚。:)

閱讀目錄:

四. MVP模式

     4.1 MVP的思想

     4.2 UI介面介面化

     4.3 Presenter —— Model和View之間的橋樑

     4.4 MVP的程式碼結構和時序圖

     4.5 MVP模式總結

五. MVVM模式

     5.1 MVVM模式的設計思想

     5.2 MVVM模式結構圖

六. MVC, MVP和MVVM模式使用場景總結

四, MVP模式

MVP模式也是一種經典的介面模式。MVP中的M代表Model, V是View, P是Presenter。
下面例子中的完整程式碼,可以在這裡下載:  WinformMVP原始碼
大家還可以比較園中Artech的這篇文章 談談關於MVP模式中V-P互動問題

4.1 MVP的思想

MVP模式在我看來,是一個真正意義上的隔離View的細節和複雜性的模式。為什麼這麼說:
因為在其它模式中V都代表的是UI介面, 是一個html頁面,XAML檔案或者winform介面。但是在MVP模式中的V代表的是一個介面,一個將UI介面提煉而抽象出來的介面。介面意味著任何實現了該介面的介面,都能夠複用已有的Presenter和Model程式碼。

4.2 UI介面介面化

要很好的理解MVP, 就要有把UI介面介面化的能力。看下面的介面中,將紅色標記的User Control抽象一下,就能得到下面的介面

image

public interface IUserAdd 
{ 
       event EventHandler UserAddEvent;
       string UserName { get; set; }
       string UserAge { get; set; }
}

介面中的2個輸入框被抽象成了UserName和UserAge兩個屬性。Save按鈕的點選事件,被抽象成了事件UserAddEvent。winform中實現該介面的程式碼如下:

public partial class UserAdd : UserControl, IUserAdd 
{ 
       public event EventHandler UserAddEvent; 
       public string UserName 
       { 
           set { this.txbName.Text = value; } 
           get { return this.txbName.Text; } 
       }

       public string UserAge 
       { 
           set { this.txbAge.Text = value; } 
           get { return this.txbAge.Text; } 
       }

       public UserAdd() 
       { 
           InitializeComponent(); 
       }

       private void btnAdd_Click(object sender, EventArgs e) 
       { 
          if (UserAddEvent != null) UserAddEvent(this, e); 
       } 
   }

下面拿UserAge屬性來解釋一下,UI介面介面化的魔力。當後端程式碼要獲取介面上的年齡值,就只需要get屬性, 要更新介面顯示的時候,就只需要set屬性。
這個時候,後端程式碼對於介面的操作,被抽象成了對於UserAge屬性的操作了,也就是和具體的介面顯示無關了。

4.3 Presenter —— Model和View之間的橋樑

上文提到的後端程式碼中,包含了P和M. M和MVC中一樣,指的是邏輯程式碼。P則是Model和View之間的橋樑,負責將對應的Model和View組合到一起。

針對上面的IUserAdd, 對應的Presenter程式碼是:

public class UserAddPresenter:IPresenter 
{ 
       private readonly IUser _model; 
       private readonly IUserAdd _view; 
       private readonly ApplicationFacade _facade = ApplicationFacade.Instance; //這裡的facade是Presenter之間通訊用的,詳細可以看完整程式碼

      //Presenter建構函式中,將view和model作為引數傳入

       public UserAddPresenter(IUser model, IUserAdd view) 
       { 
           _model = model; 
           _view = view; 
           WireUpViewEvents(); 
       }

       private void WireUpViewEvents() 
       { 
           _view.UserAddEvent += _view_UserAdd; 
       }

      //當view的UserAdd事件觸發,取得UI中的資料,呼叫model邏輯處理,新增新使用者。
     //同時傳送User_ADDED訊息到系統中(系統中其它UI部分接收訊息,比如這裡的DataGrid,它接收到User_ADDED之後,會重新整理)
       private void _view_UserAdd(object sender, EventArgs e) 
       { 
           var user = new User 
                      { 
                          Name = _view.UserName, 
                          Age = Convert.ToInt32(_view.UserAge) 
                      };
           _model.AddItem(user); 
           _facade.SendNotification(ApplicationFacade.USER_ADDED); 
       }
}

4.4 MVP的程式碼結構和時序圖

這裡的MVP中的程式碼結構圖和時序圖,能夠更好的幫助理解MVP模式

MVP-Structure

Picture2 

4.5 MVP模式總結

在MVP裡,Presenter完全把Model和View進行了分離,主要的程式邏輯在Presenter裡實現。而且,Presenter與具體的 View是沒有直接關聯的,而是通過定義好的介面進行互動,從而使得在變更View時候可以保持Presenter的不變,即重用! 不僅如此,我們還可以編寫測試用的View,模擬使用者的各種操作,從而實現對Presenter的測試 —— 而不需要使用自動化的測試工具。 我們甚至可以在Model和View都沒有完成時候,就可以通過編寫Mock Object(即實現了Model和View的介面,但沒有具體的內容的)來測試Presenter的邏輯。

MVP的優勢

1、模型與檢視完全分離,我們可以修改檢視而不影響模型
2、可以更高效地使用模型,因為所有的互動都發生在一個地方——Presenter內部
3、我們可以將一個Presener用於多個檢視,而不需要改變Presenter的邏輯。這個特性非常的有用,因為檢視的變化總是比模型的變化頻繁。
4、如果我們把邏輯放在Presenter中,那麼我們就可以脫離使用者介面來測試這些邏輯(單元測試)

五, MVVM模式

5.1 MVVM模式的設計思想

MVVM模式中,一個ViewModel和一個View匹配,它沒有MVP中的IView介面,而是完全的和View繫結,所有View中的修改變化,都會自動更新到ViewModel中,同時ViewModel的任何變化也會自動同步到View上顯示。

這種自動同步之所以能夠的原因是ViewModel中的屬性都實現了observable這樣的介面,也就是說當使用屬性的set的方法,都會同時觸發屬性修改的事件,使繫結的UI自動重新整理。(在WPF中,這個observable介面是 INotifyPropertyChanged; 在knockoutjs中,是通過函式ko.observable() 和ko.observrableCollection()來實現的)

所以MVVM比MVP更升級一步,在MVP中,V是介面IView, 解決對於介面UI的耦合; 而MVVM乾脆直接使用ViewModel和UI無縫結合, ViewModel直接就能代表UI. 但是MVVM做到這點是要依賴具體的平臺和技術實現的,比如WPF和knockoutjs, 這也就是為什麼ViewModel不需要實現介面的原因,因為對於具體平臺和技術的依賴,本質上使用MVVM模式就是不能替換UI的使用平臺的.

5.2 MVVM模式結構圖

這裡是MVVM模式的結構圖,能夠幫助更加容易的理解MVVM模式:

blog-mvvm

六, MVC, MVP和MVVM模式使用場景總結

由於在winform中無法像WPF一樣,支援資料和介面的雙向繫結以及事件的監控,所以,在winform中MVP是最佳選擇。
WPF和html介面中使用Knockout,實現了observable, 所以使用MVVM.(應該說WPF就是為使用MVVM設計的)
在web應用中,由於http是基於請求和響應方式協同工作的, 無法一直保持連線狀態,所以無法達到MVP中Presenter之間的訊息傳遞和MVVM中的ViewModel和介面之間的繫結, 所以MVC是最佳的選擇。

相關推薦

MVC, MVP, MVVM比較以及區別()

 上一篇得到大家的關注,非常感謝。一些朋友評論中,希望快點出下一篇。由於自己對於這些模式的理解也是有限,所以這一篇來得遲了一些。對於這些模式的比較,是結合自己的理解,一些地方不一定準確,但是隻有亮出自己的觀點,才能拋磚引玉不是? 歡迎各位拍磚。:) 閱讀目錄: 四. MVP模式      4

MVC, MVP, MVVM比較以及區別

MVC, MVP和MVVM都是用來解決介面呈現和邏輯程式碼分離而出現的模式。以前只是對它們有部分的瞭解,沒有深入的研究過,對於一些裡面的概念和區別也是一知半解。現在一邊查資料,並結合自己的理解,來談一下對於這三種模式思想的理解,以及它們的區別。 一,MVC, MVP

MVC, MVP, MVVM比較以及區別(上)

MVC, MVP和MVVM都是用來解決介面呈現和邏輯程式碼分離而出現的模式。以前只是對它們有部分的瞭解,沒有深入的研究過,對於一些裡面的概念和區別也是一知半解。現在一邊查資料,並結合自己的理解,來談一下對於這三種模式思想的理解,以及它們的區別。歡迎各位高手拍磚。 閱讀目錄: 一. MVC, M

前端開發中,MVC/MVP/MVVM區別

MVC/MVP/MVVM 都是常見的軟體架構設計模式。說到區別,主要在於 C(Controller)、P(Presenter)、VM(View-Model)。相同點則是 MV(Model-View)。 Model Model 層用於封裝和應用程式的業務邏輯相關的資料以及對

Android 系統(77)---MVC,MVP,MVVM區別

MVC,MVP,MVVM的區別一、MVC 軟體可以分為三部分1.Model:模型層,負責處理資料的載入或者儲存 2. View:檢視層,負責介面資料的展示,與使用者進行互動 3.Controller:控制器層,負責邏輯業務的處理各部分之間的通訊方式如下:View傳送指令到Co

Android App的設計架構:MVC,MVP,MVVM與架構經驗談

用戶 自己的 req html pla 觀察 持久化 重構 his 來源: Android App的設計架構:MVC,MVP,MVVM與架構經驗談 和MVC框架模式一樣,Model模型處理數據代碼不變在Android的App開發中,很多人經常會頭疼於App的架構如何設計:

淺析前端開發中的 MVC/MVP/MVVM 模式

所有 團隊 sub 策略 代碼 告訴 簡單 ava 關心 MVC,MVP和MVVM都是常見的軟件架構設計模式(Architectural Pattern),它通過分離關註點來改進代碼的組織方式。不同於設計模式(Design Pattern),只是為了解決一類問題而總結出的抽

MVC,MVP,MVVM

route src HA 路由 路由器 控制器 view 數據保存 9.png MVC MVC模式的意思是,軟件可以分成三個部分 視圖(View):用戶界面。 控制器(Controller):業務邏輯 模型(Model):數據保存 實際項目往往采用更靈活的方式,以 Back

MVC/MVP/MVVM

現在 也有 lis 驗證 設定 思考 不同 最大的 也好 架構模式的文章很多,好理解的沒有幾個。大部分文章出現的主要問題有: 沒有設定好作用域:前端MVC是改造過的MVC,和後臺MVC有明顯的區別,不能一概而論 沒有實際的例子:實際的例子對應日常的工作,沒有就很難產

MVC-MVP-MVVM框架模式分析

無法 連接 不能 相互 轉化 觀察者 作用 展示 .com MVC(Model-View-Controller) MVC 架構模式圖(經典版) 註:實際上,Model和View永遠不能相互通信,只能通過Controller傳遞;上圖只是MVC模式的經典圖。 MVC一般流程

MVC MVP MVVM初級版

學習Vue.js的時候,官網提到了MVVM順便總結一下。慢慢熟悉。 因為是初級版,還沒有時間做出太詳細的總結,先在這裡Mark一下,把網路上能搜尋到的概念和資源先拷貝過來。後續再看情況寫中級版和高階版。 MVC MVC是軟體工程中的一種軟體架構模式,把軟體系統分為三個基本部分:模型(

談談MVC-MVP-MVVM的漸進使用和誤解

講這三種設計模式之前,咱先列舉一個使用場景,現在有如下需求: 開發需求:頁面有個列表用於顯示新聞,新聞可以收藏,點贊 首先說說MVC : L:負責承載新聞資料模型物件:標題,內容,等等 五:負責新聞展示的觀 C:負責新聞資料的業務邏輯和展示邏輯 不需要多說稍微有點經驗的人都知道

你真的理解了MVC, MVP, MVVM嗎?

點選上方“程式設計師小灰”,選擇“置頂公眾號”有趣有內涵的文章第一時間送達!本文轉載自公眾號 

android 架構模式MVC,MVP,MVVM

  從只會實現功能的“碼農”到軟體工程師、設計師的過渡。   MVP/MVVM架構的優點和缺點?它的使用場景是什麼?   MVC是一種框架模式而非設計模式,GOF把MVC看作是3種設計模式:觀察者模式、策略模式與組合模式的合體,而核心是觀察者模式。簡而言之,框架是大智慧,用

iOS架構模式-揭祕MVC,MVP,MVVM和VIPER

iOS架構模式揭祕MVC,MVP,MVVM和VIPER英文原文:https://medium.com/ios-os-x-development/ios-architecture-patterns-ecba4c38de52#.w3sovqjl3作者:Bohdan Orlov翻譯

android MVC && MVP && MVVM分析和對比

  面試的時候被問到這個問題,用過,也瞭解過,但是還是不夠深入,總結一下。   MVC,MVP和MVVM是軟體比較常用的三種軟體架構,這三種架構的目的都是分離關注,避免將過多的邏輯全部堆積在一個類中,以android為例,在activity中既有UI的相關處理

雜談: MVC/MVP/MVVM

前言 本文為回答一位朋友關於MVC/MVP/MVVM架構方面的疑問所寫, 旨在介紹iOS下MVC/MVP/MVVM三種架構的設計思路以及各自的優缺點. 全文約五千字, 預計花費閱讀時間20 – 30分鐘. MVC MVC的相關概念 MVC最早存在於桌面程式中的, M是指業務資

iOS架構模式MVC+MVP+mvvm架構

隨著iOS職位的火熱,越來越多的人都想成為一名優秀的iOS開發工程師,那麼在競爭激烈的時代,應該如何成為一名iOS開發工程師呢?現在讓大家瞭解一下iOS架構模式作為一個開發者,有一個學習的氛圍跟一個交流圈子特別重要這是一個我的iOS交流群:687528266,不管你是小白還是

揭開MVC,MVP,MVVM,VIPER這幾種模式的神祕面紗

iOS Architecture Patterns Demystifying MVC, MVP, MVVM and VIPER Feeling weird while doing MVC in iOS? Have doubts about switchi

MVC/MVP/MVVM 前端框架模式

簡單來講就是:檢視(View):使用者介面控制器(Controller):業務邏輯模型(Model):資料儲存使用者操作介面,View接受指令,View 傳送指令到 Controller,也就是從View層到Control層的箭頭所示Controller 完成業務邏輯後,要求 Model 改變狀態,也就是從C