沒有找到很好的MVVM模式介紹文章,簡單找了一篇,分享一下。MVVM實作了UI\UE設計師(Expression Blend 4設計界面)和軟體工程師的合理分工,在SilverLight、WPF、Windows Phone開發中得到很好的應用,當然作為設計模式的結合體,提供的是軟體設計的一種思路,業務場景符合其設計思路,都可以很好的利用。
原文如下:
摘要:為解決适用于RIA應用系統開發的設計模式的問題,提出引出MVVM模式。該模式由視圖、視圖模型、模型三部分組成,通過實作INotifyPropertyChanged接口,解決模型到視圖模型的資料傳導問題,使模型獨立于視圖模型,通過實作ICommand接口,解決視圖中的事件綁定問題,結合資料綁定,使視圖模型獨立于視圖。通過實作 Mediator模式(中介者模式)完成模型與模型之間的互動,并在一定程度上減少模型與模型之間的耦合度。
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技術中的資料綁定的技術和特點,提高軟體的複用性。
Silverligh是由微軟推出的跨浏覽器、跨平台的Web前段應用開發解決方案,是微軟RIA政策的主要應用開發平台之一,以浏覽器的外挂元件方式,提供Web應用程式中多媒體與高度互動性前端應用程式的解決方案,同時也是微軟UX(使用者體驗)政策中的一環,也是微軟視圖将美術設計和程式開發人員的工作明确切分與協調合作的發展應用程式的嘗試之一。
MVVM模式是Model-View-ViewMode模式的簡稱。由視圖(View)、視圖模型(ViewModel)、模型(Model)三部分組成,結構如下圖。通過這三部分實作UI邏輯、呈現邏輯和狀态控制、資料與業務邏輯的分離。

使用MVVM模式有幾大好處:
1. 低耦合。View可以獨立于Model變化和修改,一個ViewModel可以綁定到不同的View上,當View變化的時候Model可以不變,當Model變化的時候View也可以不變。
2. 可重用性。可以把一些視圖的邏輯放在ViewModel裡面,讓很多View重用這段視圖邏輯。
3. 獨立開發。開發人員可以專注與業務邏輯和資料的開發(ViewModel)。設計人員可以專注于界面(View)的設計。
4. 可測試性。可以針對ViewModel來對界面(View)進行測試
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模式設計的類結構圖。
一、 概述
廣州市城鄉規劃空間資源平台是一個面向城市規劃的GIS系統。通過對該系統的建設以滿足規劃編制、規劃管理、規劃實施動态監控三方面的需求實作GIS與OA、GIS與CAD的圖文一體化。提高城市規劃科學性和管理水準,實作統一規劃、資源整合、資訊共享、開放服務等目标。
二、技術特點
項目采用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界面:
接着開始進行View到ViewModel的綁定過程,在相關View中選擇DataContext,選擇Data Binding…:
圖11 給View綁定DataContext
在彈出的面闆中選擇Data Field分頁,選擇Data sources的Fields,找到名為MapViewModel的項,點選OK按鈕,完成View對ViewModel的綁定。
除了綁定ViewModel之外,還需要對相關的事件進行綁定,在目前View界面中提供了“增加資料”的功能按鈕,選擇功能按鈕,在右側的屬性面闆中找到Miscellaneous分頁,選擇Command屬性,右鍵打開設定面闆,選擇Data Binding…
圖13 綁定Command(一)
在彈出的面闆中選擇要進行綁定的Command點選OK按鈕進行綁定,如圖所示
在View綁定ViewModel的過程中是完全可以由界面設計師來進行操作,而不進行任何編碼的。至此,完成MVVM設計模式的一個過程。
效果圖
三、具體實作
如下視圖均使用MapViewModel作為視圖模型來操作資料模型完成相關操作。
1)圖層管理面闆:使用者通過此面闆進行圖層服務的檢視和加載操作。對于已經加載的服務以紅色字型顯示。使用者可以通過設定資料添加位置來決定服務添加在哪一層。
2)圖層控制台:使用者通過此面闆進行圖層的顯示控制。提供熱點圖層、和圖層搜尋功能簡化使用者查找圖層的操作。
圖17 圖層控制台
3)條件組合查詢:使用者通過在面闆中選擇特定的圖層服務,選擇所需字段建構查詢條件完成查詢操作,進而擷取相應的資料結果。對顯示的結果,使用者可以點選結果項,地圖将自動定位至選中項。
MVVM模式很好的将UI邏輯分離開來,使得在開發過程中設計師和代碼編寫員中可以很好地完成自己的職責。進而保證了程式的低耦合,可重用性,獨立開發和可測試性。
另幾篇相關部落格:
本文轉自SanMaoSpace部落格園部落格,原文連結:http://www.cnblogs.com/SanMaoSpace/p/3215490.html,如需轉載請自行聯系原作者