MVVM可視化編程綜述

劉晶美 聶廣俊

摘要：隨著計算機技術的高速發展以及信息化業務的需求越來越復雜，可視化數據的量和復雜度呈現爆炸式的增長，信息化公司以及用戶對可視化的要求也越來越高，前端語言的模塊化、組件化、高性能化變的尤為重要，為了達到這種高標準的要求，亟需一種新的可視化開發思路、思想，本文在此探究MVVM模式下可視化編程思路。

關鍵詞：信息化;可視化;MVVM

中圖分類號：TP311.56文獻標識碼：A文章編號：1672-9129（2020）14-0044-02

1概述

上世紀90年代，蒂姆·伯納斯·李（Tim Berners-Lee）在歐洲粒子物理實驗室里開發出了世界上第一個網頁瀏覽器，從此互聯網時代來臨，可視化技術也隨之不斷發展。在長達近40年的互聯網時代，數據可視化從簡單的文字、圖片，發展到現在豐富多樣的信息時代。

在信息多元化的時代，原有的可視化開發模式已經不能滿足現在的數據量、數據格式以及多元展示的需求，需要另一種開發模式來解決這個問題，MVVM模式就應運而生。

2MVVM歷史

MVVM并不是一種全新的開發模式，而是在MVC模式上做了改進。MVVM最早由微軟提出來，它借鑒了桌面應用程序的MVC思想，在前端頁面中，把Model用純JavaScript對象表示，View負責顯示，兩者做到了最大限度的分離。

說起MVC，就必須拿斯坦福大學公開課上的這幅圖來說明，見圖1。

M是指model，是應用程序中處理數據邏輯的一部分，通常用來模型對象對數據庫的存存取等操作;

V是指view，是視圖部分，通常指對用戶展示的一部分;

C是指controller，是控制層通常用來處理業務邏輯，主要負責從視圖讀取數據，并向模型發送數據。

這種模式將可視化進行分層解耦，三個層各司其職，更利于對可視化研發工作進行分工。但是開發者在開發過程中大量調用相同的DOM，且需要主動更新到view或將變化的數據同步到model中，處理繁瑣，且大量的DOM操作使頁面渲染性能降低，影響用戶體驗。

MVVM旨在利用WPF中的數據綁定函數，通過從視圖層中幾乎刪掉所有GUI代碼（代碼隱藏），更好地促進視圖層開發與模式其余部分的分離。不需要用戶體驗（UX）開發人員編寫GUI代碼，他們可以使用框架標記語言（如XAML），并創建到應用程序開發人員編寫和維護的視圖模型的數據綁定。角色的分離使得交互設計師可以專注于用戶體驗需求，而不是對業務邏輯進行編程。這樣，應用程序的層次可以在多個工作流中進行開發以提高生產力。即使一個開發人員在整個代碼庫上工作，視圖與模型的適當分離也會更加高效，因為基于最終用戶反饋，用戶界面通常在開發周期中經常發生變化，而且處于開發周期后期。

2.1 Mvvm的演變。隨著用戶交互的軟件設計應運而生了很多出名的設計模式。你在屏幕前看到的就是View，它顯示出來的數據就是Model（模型），Presenter（展示器）將兩者連接起來。View依賴于Presenter實現對Model的數據的填充、對用戶輸入做出反應、提供輸入驗證（可能通過委托發送給模型）以及其他類似的任務。

回到2004年，Martin Fowler發表了一篇關于名為PM（Presentation Model）模式的文章。PM模式將View從行為和狀態中分離開，類似于MVP模式。PM模式中有趣的地方是創建了一個名為Presentation Model的抽象的View。View也就變成了Presentation Model的渲染。在Fowler的解釋中，他說明了Presentation Model需要頻繁的更新View， 這樣能夠保證兩者之間的同步性。同步的邏輯代碼編寫在于Presentation Model類中。

在2005年，John Gossman（現在是微軟公司的一名WPF和Silverlight架構師）將MVVM模式公布在他的博客中。MVVM等價于Fowler提出的Presentation Model，兩個模式的特性都是有一個包含View狀態和行為的抽象。Fowler介紹Presentation Model作為一個創建UI平臺獨立的抽象的View，然而Gossman介紹MVVM作為一個簡化用戶操作界面的核心功能的標準化方式。從這方面考慮，MVVM是一個為WPF和Silverlight平臺特殊定制的更常規的PM模式。

與MVP中的Presenter不同，VM不需要實現對View的引用。View將屬性綁定到VM中，反向的，VM暴露的屬性包含在Model對象和View中特殊的狀態。View和VM之間的綁定的構建非常簡單只需將VM對象被作為View的上下文（DataContext）來設置。如果VM中的屬性值發生改變，新的值會通過綁定自動傳送到View。當用戶點擊View中的按鈕，VM中的命令將執行相應的請求。無論是VM還是View，他們執行Model數據的所有變更。

View類不知道Model類的存在，同時VM和Model對View也一無所知。事實上，Model顯然知道VM和View的存在。這是一個非常低耦合的設計，接下來你會看到這其中的好處。

2.2 Mvvm的優點。MVVM模式主要目的是分離視圖（View）和模型（Model），有幾大優點：

（1）低耦合。視圖（View）可以獨立于Model變化和修改，一個VM可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。

（2）可重用性。你可以把一些視圖邏輯放在一個VM里面，讓很多view重用這段視圖邏輯。

（3）獨立開發。開發人員可以專注于業務邏輯和數據的開發（VM），設計人員可以專注于頁面設計，使用Expression Blend可以很容易設計界面并生成xaml代碼。

（4）可測試。界面素來是比較難于測試的，測試可以針對VM來寫。

2.3 MVVM要掌握以下板塊，并將其整合，如圖2所示：

（1）模板編譯（Compile）

（2）數據劫持（Observer）

（3）發布的訂閱（Dep）

（4）觀察者（Watcher）

3Model、View、ViewModel在可視化編程中的分工

3.1 Model（視圖）：視圖負責界面以及顯示。它通過DataContext（數據上下文）和VM進行數據綁定，不直接與Model進行交互。

視圖的責任就是定義用戶在屏幕上能看到的所有結構和外觀。理想的視圖背后的代碼只包含調用 InitializeComponent 方法的構造函數。視圖一般扮演以下關鍵角色：

（1）視圖屬于可視化元素，例如彈框，頁面，用戶控件以及數據模版等;

（2）視圖定義了包含在視圖里的控件和可視化層以及樣式;

（3）視圖通過DataContext屬性應用視圖模型進行了控件的綁定并使數據的屬性和命令被視圖模型暴露出來;

（4）視圖能夠定制化視圖和視圖模型之間的數據綁定行為;

（5）視圖能夠定義以及處理 UI 可視化行為，例如動畫;

（6）視圖背后的代碼用 XAML 實現了很難表達的可視化行為。

在視圖與視圖模型間可通過綁定Behavior/Comand來進行對VM的方法的調用，Command是View到VM的單向通行，綁定的實現也是運用了實現Silverlight提供的IComand接口，讓View觸發事件，VM來處理事件，進行解決事件綁定功能。

3.2 View（視圖模型）。視圖模型在 MVVM模式中為視圖封裝了展示的邏輯，它并不是直接引用視圖或者任何其他關于視圖特定的實現或者類型，而是實現了屬性以及命令使得視圖進行數據綁定，并通過改變事件來提醒視圖狀態已經發生改變了。

很典型的，視圖模型會定義能被展現在 UI上并被用戶調用的命令或者行為。一個通用的例子就是當視圖模型需要提交命令時會允許用戶提交數據到網絡服務或者數據庫。視圖可以選擇用一個按鈕來展示所以用戶能夠點擊該按鈕提交數據。典型地，當命令編程不可用的，它相關的UI 展示也變得不可用。視圖模型通常扮演下面這些關鍵角色：

（1）模型視圖是非可視化類，它封裝了展現邏輯;

（2）視圖模型是可以獨立于視圖與模型調試的;

（3）視圖模型很典型地是不直接引用視圖的;

（4）視圖模型實現了視圖用來數據綁定的屬性與命令;

（5）視圖模型通過改變提醒事件通知視圖狀態的改變：INotifyPropertyChanged 與 INotifyCollectionChanged;

（6）視圖模型協調視圖與模型的交互;

（7）視圖模型可以定義視圖展現給用戶的邏輯狀態;

（8）視圖模型是View和Model的橋梁，是對Model的抽象，比如：Model中數據格式是“年月日”，可以在VM中轉換Model的數據為“日月年”供View顯示。

3.3 ViewModel（模型）。model 在 MVVM 模式中同樣也封裝了業務邏輯以及數據，業務邏輯定義了所有類似檢索和程序數據管理相關的程序邏輯一樣，用來保證所有的保證數據能夠持久的、有效的被業務規則應用。實現最大化的代碼重用，模型不能夠包含特定的情況，特定的用戶任務以及特定的程序邏輯。

模型為程序展現了客戶端域模型，也可能包含支持數據訪問與緩存的代碼，即使只有一個分離的數據庫或服務被使用。

模型通常扮演以下的關鍵角色：

（1）模型類是不可視類，它封裝了程序數據;

（2）模型類不能直接應用視圖或視圖模型類;

（3）模型類不依賴于它們是如何實現的;

（4）模型類是通過 INotifyPropertyChanged/INotifyCollectionChanged 接口提供屬性與集合更改事件的.

（5）模型類很典型地繼承自 ObservableCollection 類;

（6）模型類是很典型地通過 IDataErrorInfo/INotifyDataErrorInfo.提供數據驗證與錯誤報告;

（7）模型類典型地與封裝了數據訪問的服務一起使用。

Model具有對數據直接訪問的權利，例如對數據庫的訪問，Model不依賴于View和VM，也就是說，模型不關心會被如何顯示或是如何被操作，模型也不能包含任何用戶使用的與界面相關的邏輯。Model在實際開發中根據實際情況可以進行細分。

4總結

經過整體的分析測試，基于MVVM的復雜數據可視化開發，會使數據更加的直觀，MVVM框架的應用也會使系統設計流程更加規范，通過Model、View、View Model 之間的交互實現了界面設計與后臺邏輯代碼的分離，封裝了對象與數據庫之間的交互，建立了一個利于維護，便于測試，有良好擴展性的應用系統。

參考文獻：

[1]易劍波.基于MVVM模式的WEB前端框架的研究[J].信息與電腦（理論版） 2016（19）： 76-77+84.

[2]王嬋娟. 淺談WPF架構及其應用[J]. 科技信息， 2011（21）：114-115，128.

[3]黃建崗. 淺談WPF設計模式[J]. 中小企業管理與科技，2009（28）：286

[4]Doray A， The MVC Design PatternBeginning Apache Struts[J]. 2006：37-51.

[5]MVPEncyclopedic Dictionary of Polymers[J]. 2007：639

[6]Freeman A，Sanderson S，Freeman A， et al. Your First MVC ApplicationPro ASP.NET MVC 3 Framework[J]. 2011：31-61.

[7]Anderson C. The Model-View-ViewModel（MVVM） Design PatternPro Business Applications with Silverlight 4[J].2010：373-402.

[8]WPF/MVVM Quick Start Tutorial -CodeProject[EB/OL].[2012/4/27].

[9]http：//www.codeproiect.com/Artics/165368/WPF-MVVM-Quick-Start-Tutorial.

[10]Jarnjak F.Flexible GUI in Robotics Applications Using Windows Presentation Foundation Framework and Model View ViewModel Pattern：International Conference on New Trends in Information Science and Service Science （NISS 2010）， Gyeongju，South Korea，2010[C].

[11]劉連喜，徐惠民. MFC框架技術探索[J]. 吉林建筑工程學院學報，2009，26（4）：82-84.

[12]李應保. WPF專業編程指南[M]. 北京：北京電子工業出版社， 2010.