[轉載]MVVM模式原理分析及實踐

　　沒有找到很好的MVVM模式介紹文章，簡單找了一篇，分享一下。MVVM實現了UI\UE設計師(Expression Blend 4設計界面)和軟件工程師的合理分工，在SilverLight、WPF、Windows Phone開發中獲得很好的應用，固然做爲設計模式的結合體，提供的是軟件設計的一種思路，業務場景符合其設計思路，均可以很好的利用。
原文以下：

　摘要:爲解決適用於RIA應用系統開發的設計模式的問題，提出引出MVVM模式。該模式由視圖、視圖模型、模型三部分組成，經過實現INotifyPropertyChanged接口，解決模型到視圖模型的數據傳導問題，使模型獨立於視圖模型，經過實現ICommand接口，解決視圖中的事件綁定問題，結合數據綁定，使視圖模型獨立於視圖。經過實現 Mediator模式(中介者模式)完成模型與模型之間的交互，並在必定程度上減小模型與模型之間的耦合度。　　

1引言

　　RIA(Rich Internet Application)技術是近年來發展較快的實現Web2.0應用開發的技術，與傳統的Web應用相比，RIA技術更加追求更豐富的用戶體驗。適應這種變化，RIA應用系統開發過程的分工要求更加細緻，一部分人負責界面設計，一部分人負責業務邏輯設計。這種分工寫做給軟件設計模式帶來新的要求，一方面要保持系統易於理解和維護、良好的擴展性和低耦合度，另一方面要追求業務邏輯、呈現邏輯和UI邏輯的分離，使得界面設計和程序控制開發能夠同步進行。目前在RIA應用系統中開發使用比較多的有MVC(Model-View-Controller)、MVP(Model-View-Presenter)等設計模式，可是這些模式並不能徹底將UI設計分離。爲此將呈現邏輯從視圖中獨立出來，同時將界面數據從模型中獨立出來，組成視圖模型(ViewModel)模塊，造成了MVVM(Model-View-ViewModel)模型，咱們能夠認爲MVVM是MVC的變種。MVVM模式不但可以實現UI設計的分離，並且能充分發揮RIA技術中的數據綁定的技術和特色，提升軟件的複用性。

　　

2.Silverlight簡介

　　Silverligh是由微軟推出的跨瀏覽器、跨平臺的Web前段應用開發解決方案，是微軟RIA策略的主要應用開發平臺之一，以瀏覽器的外掛組件方式，提供Web應用程序中多媒體與高度交互性前端應用程序的解決方案，同時也是微軟UX(用戶體驗)策略中的一環，也是微軟視圖將美術設計和程序開發人員的工做明確切分與協調合做的發展應用程序的嘗試之一。

　　

3.MVVM簡介

　　MVVM模式是Model-View-ViewMode模式的簡稱。由視圖(View)、視圖模型(ViewModel)、模型(Model)三部分組成，結構以下圖。經過這三部分實現UI邏輯、呈現邏輯和狀態控制、數據與業務邏輯的分離。

　　

圖1 MVVM模式架構圖

 

　　使用MVVM模式有幾大好處：

　　1. 低耦合。View能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的View上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。

　　2. 可重用性。能夠把一些視圖的邏輯放在ViewModel裏面，讓不少View重用這段視圖邏輯。

　　3. 獨立開發。開發人員能夠專一與業務邏輯和數據的開發(ViewModel)。設計人員能夠專一於界面(View)的設計。

　　4. 可測試性。能夠針對ViewModel來對界面(View)進行測試

　　

4. 模型、視圖、視圖模型的分工

　　1. 視圖(View)

　　視圖負責界面和顯示。它經過DataContext(數據上下文)和ViewModel進行數據綁定，不直接與Model交互。 能夠綁定Behavior/Comand來調用ViewModel的方法，Command是View到ViewModel的單向通行，經過實現Silverlight提供的IComand接口來實現綁定，讓View觸發事件，ViewModel來處理事件，以解決事件綁定功能。

　　2. 視圖模型(ViewModel)

　　視圖模型主要包括界面邏輯和模型數據封裝，Behavior/Command事件響應處理，綁定屬性定義和集合等。它是View和Model的橋樑，是對Model的抽象，好比：Model中數據格式是「年月日」，能夠在ViewModel中轉換Model的數據爲「日月年」供View顯示。

　　實現視圖模型須要實現Silverlight提供的接口INotifyPropertyChanged， INotifyPropertyChanged接口用於實現屬性和集合的變動通知(Change Notifications)。使得在用戶在視圖上所作的操做均可以實時通知到視圖模型，從而讓視圖模型對象有的模型進行正確的業務操做。

　　View的代碼隱藏(Code-Behind)部分可能包含界面邏輯或者應用邏輯的代碼，這些代碼會很難進行單元測試，應根據具體狀況儘可能避免。

　　

　　圖2 View、ViewModel和Model的交互圖

　　

 

　　Mediator模式

　　對不一樣View、ViewModel之間的參數傳遞，通常經過事件實現數據傳遞，也能夠定義全局靜態變量來進行數據共享，在MVVM裏，咱們可使用Mediator模式(中介者模式)進行跟優雅的處理。能夠簡單得理解爲不一樣的ViewModel或者View須要進行了操做以後，須要其餘ViewModel或者View進行相應的其餘操做或者數據更新，而中介類能夠準確得將更新準確得通知到正確的ViewModel，同時中介者並不關心ViewModel或者View的任何操做或者數據更新。

　　

　　圖3 ViewModel經過Mediator模式與其餘ViewModel的交互圖

　　

 

　　3. 模型(Model)

　　Model與MVC模式同樣，Model用於封裝與應用程序的業務邏輯相關的數據以及對數據的處理方法。它具備對數據直接訪問的權利，例如對數據庫的訪問，Model不依賴於View和ViewModel，也就是說，模型不關心會被如何顯示或是如何被操做，模型也不能包含任何用戶使用的與界面相關的邏輯。Model在實際開發中根據實際狀況能夠進行細分。好比在廣州市城鄉規劃資源平臺就將Model將Service和Reposiroty結合爲WCF服務由ViewModel進行調用。

　　

　　圖4 Model的細分層次關係

　　

 

　　爲了更好的說明MVVM模式，圖5是廣州市城鄉規劃資源平臺實現MVVM模式設計的類結構圖。

　　

圖5 MVVM模式類結構圖

4.Silverlight和MVVM模式的綜合應用實踐

廣州市城鄉規劃空間資源平臺

　　1、 概述

　　廣州市城鄉規劃空間資源平臺是一個面向城市規劃的GIS系統。經過對該系統的建設以知足規劃編制、規劃管理、規劃實施動態監控三方面的需求實現GIS與OA、GIS與CAD的圖文一體化。提升城市規劃科學性和管理水平，實現統一規劃、資源整合、信息共享、開放服務等目標。

　　2、技術特色

　　項目採用WebService技術搭建跨平臺的、可互操做的分佈式應用程序平臺，採用Silverlight技術，使用了MVVM模式，結合GIS Server服務和Web Service服務等進行開發。

　　系統中對於地圖顯示並非每個服務都須要加載，服務的地址，加載狀況，默認設置這些能夠做爲一個地圖服務數據模型(MapServiceInfo)。

　　下圖爲平臺對地圖服務數據模型的部分定義

　　

　　圖6 地圖數據模型部分定義

　　

 

　　爲了實現對該Model的控制，創建視圖模型MapViewModel，在其中實現對數據模型的加載默認圖層、增長服務圖層，打開\關閉圖層等操做的控制，服務的獲取等操做。用戶對視圖的任何操做都會對視圖模型進行一次變動通知，從而使視圖模型能夠實時對模型進行相應操做。

　　實現視圖模型MapViewModel須要實現Silverlight提供的接口INotifyPropertyChanged， INotifyPropertyChanged接口用於實現屬性和集合的變動通知(Change Notifications)。使得在用戶在視圖上所作的操做均可以實時通知到視圖模型，從而讓視圖模型對象有的模型進行正確的業務操做。

　　下圖爲廣州市城鄉規劃資源平臺中對INotifyPropertyChanged接口的實現方式：

　　

　　圖7 MapViewModel對接口INotifyPropertyChanged的實現

　　

 

　　創建完視圖模型以後，在各個視圖中經過DataContext(數據上下文)與視圖模型進行綁定，經過相應的Command對視圖模型進行操做。Command是View到ViewModel的單向通行，經過實現Silverlight提供的IComand接口來實現綁定，讓View觸發事件，ViewModel來處理事件，以解決事件綁定功能。IComand接口結構以下所示：

　　

　　圖8 ICommand接口描述

 

　　因爲Silverlight對ICommand的功能支持並很少，爲此須要對ICommand接口進行實現來提供View和ViewModel之間的事件綁定。下圖爲廣州市城鄉規劃資源平臺中對ICommand接口的實現方式：

　　

　　圖9 對ICommand接口的實現

　　

 

　　而後經過在MapViewModel中添加相關ICommand接口的屬性，以供View進行綁定使用。以下圖：

　　

　　圖10 在ViewModel中添加相關ICommand屬性

　　

 

　　具體的類結構圖如圖7所示。

　　接着完成View對MapViewModel的綁定操做，這裏咱們能夠經過Microsoft Expression Blend這個工具來完成。以圖層管理面板爲例，下圖是經過Blend工具設計好的View界面：

　　

　　

圖11 經過Blend設計好View

 

　　接着開始進行View到ViewModel的綁定過程，在相關View中選擇DataContext，選擇Data Binding…：

　　

　　圖11 給View綁定DataContext

　　

 

　　在彈出的面板中選擇Data Field分頁，選擇Data sources的Fields，找到名爲MapViewModel的項，點擊OK按鈕，完成View對ViewModel的綁定。

　　

圖12 選擇要綁定的ViewModel

 

　　除了綁定ViewModel以外，還須要對相關的事件進行綁定，在當前View界面中提供了「增長數據」的功能按鈕，選擇功能按鈕，在右側的屬性面板中找到Miscellaneous分頁，選擇Command屬性，右鍵打開設置面板，選擇Data Binding…

　　

　　圖13 綁定Command(一)

　　

 

　　在彈出的面板中選擇要進行綁定的Command點擊OK按鈕進行綁定，如圖所示

　　

圖14 選擇要綁定的Command(二)

 

　　在View綁定ViewModel的過程當中是徹底能夠由界面設計師來進行操做，而不進行任何編碼的。至此，完成MVVM設計模式的一個過程。

　　效果圖

　　

圖15 廣州市城鄉規劃空間資源平臺

3、具體實現

　　以下視圖均使用MapViewModel做爲視圖模型來操做數據模型完成相關操做。

　　1)圖層管理面板：用戶經過此面板進行圖層服務的查看和加載操做。對於已經加載的服務以紅色字體顯示。用戶能夠經過設置數據添加位置來決定服務添加在哪一層。

　　

圖16 圖層管理面板

 

　　2)圖層控制面板:用戶經過此面板進行圖層的顯示控制。提供熱點圖層、和圖層搜索功能簡化用戶查找圖層的操做。

　　

　　圖17 圖層控制面板

　　3)條件組合查詢：用戶經過在面板中選擇特定的圖層服務，選擇所需字段構建查詢條件完成查詢操做，從而獲取相應的數據結果。對顯示的結果，用戶能夠點擊結果項，地圖將自動定位至選中項。

 

　　

圖18 條件組合查詢操做

 

　　

圖19 條件組合結果操做

 

　　

結語

　　MVVM模式很好的將UI邏輯分離開來，使得在開發過程當中設計師和代碼編寫員中能夠很好地完成本身的職責。從而保證了程序的低耦合，可重用性，獨立開發和可測試性。

原文連接：http://www.cpiso.cn/jsyj/ghxx/2012/5/18/373.shtml

另幾篇相關博客：
《WPF中的MVVM模式》
《MVVM架構的簡單解析》
《 .NET MVVM設計模式簡介》
《 [轉載]MVP(SC),MVP(PV),PM,MVVM 和 MVC 表現模式架構對比》