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模式的綜合應用實踐

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

　　一、 概述

　　廣州市城鄉規劃空間資源平臺是一個面向城市規劃的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介面：

圖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 廣州市城鄉規劃空間資源平臺

　　如下檢視均使用MapViewModel作為檢視模型來操作資料模型完成相關操作。

　　1)圖層管理面板：使用者通過此面板進行圖層服務的檢視和載入操作。對於已經載入的服務以紅色字型顯示。使用者可以通過設定資料新增位置來決定服務新增在哪一層。

圖16 圖層管理面板

　　2)圖層控制面板:使用者通過此面板進行圖層的顯示控制。提供熱點圖層、和圖層搜尋功能簡化使用者查詢圖層的操作。

　　圖17 圖層控制面板

　　3)條件組合查詢：使用者通過在面板中選擇特定的圖層服務，選擇所需欄位構建查詢條件完成查詢操作，從而獲取相應的資料結果。對顯示的結果，使用者可以點選結果項，地圖將自動定位至選中項。

圖18 條件組合查詢操作

圖19 條件組合結果操作

結語

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

　　參考文獻

　　[1] David Hill. The ViewModel Pattern. 2009, (01) .

　　[2]劉波;基於RIA的AJAX和Silverlight研究與應用[D];西北大學;2008年

　　[3]趙冠偉;夏斌;聶雲峰;;富網際網路應用程式研究初探[J];微型機與應用;2005年12期

　　[4]李衛強;王小玲;;面向方面程式設計(AOP)技術及其在N.et平臺下的實現[J];電腦與資訊科技;2006年03期

　　作者簡介：

　　李繼鴻 男 本科 程式設計師 廣州市城市規劃自動化中心開發部

轉自：http://www.cpiso.cn/jsyj/ghxx/2012/5/18/373.shtml