劉晶美 聶廣俊

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

關(guān)鍵詞：信息化;可視化;MVVM

中圖分類號(hào)：TP311.56文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1672-9129（2020）14-0044-02

1概述

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

在信息多元化的時(shí)代，原有的可視化開發(fā)模式已經(jīng)不能滿足現(xiàn)在的數(shù)據(jù)量、數(shù)據(jù)格式以及多元展示的需求，需要另一種開發(fā)模式來解決這個(gè)問題，MVVM模式就應(yīng)運(yùn)而生。

2MVVM歷史

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

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

M是指model，是應(yīng)用程序中處理數(shù)據(jù)邏輯的一部分，通常用來模型對(duì)象對(duì)數(shù)據(jù)庫的存存取等操作;

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

C是指controller，是控制層通常用來處理業(yè)務(wù)邏輯，主要負(fù)責(zé)從視圖讀取數(shù)據(jù)，并向模型發(fā)送數(shù)據(jù)。

這種模式將可視化進(jìn)行分層解耦，三個(gè)層各司其職，更利于對(duì)可視化研發(fā)工作進(jìn)行分工。但是開發(fā)者在開發(fā)過程中大量調(diào)用相同的DOM，且需要主動(dòng)更新到view或?qū)⒆兓臄?shù)據(jù)同步到model中，處理繁瑣，且大量的DOM操作使頁面渲染性能降低，影響用戶體驗(yàn)。

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

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

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

在2005年，John Gossman（現(xiàn)在是微軟公司的一名WPF和Silverlight架構(gòu)師）將MVVM模式公布在他的博客中。MVVM等價(jià)于Fowler提出的Presentation Model，兩個(gè)模式的特性都是有一個(gè)包含View狀態(tài)和行為的抽象。Fowler介紹Presentation Model作為一個(gè)創(chuàng)建UI平臺(tái)獨(dú)立的抽象的View，然而Gossman介紹MVVM作為一個(gè)簡化用戶操作界面的核心功能的標(biāo)準(zhǔn)化方式。從這方面考慮，MVVM是一個(gè)為WPF和Silverlight平臺(tái)特殊定制的更常規(guī)的PM模式。

與MVP中的Presenter不同，VM不需要實(shí)現(xiàn)對(duì)View的引用。View將屬性綁定到VM中，反向的，VM暴露的屬性包含在Model對(duì)象和View中特殊的狀態(tài)。View和VM之間的綁定的構(gòu)建非常簡單只需將VM對(duì)象被作為View的上下文（DataContext）來設(shè)置。如果VM中的屬性值發(fā)生改變，新的值會(huì)通過綁定自動(dòng)傳送到View。當(dāng)用戶點(diǎn)擊View中的按鈕，VM中的命令將執(zhí)行相應(yīng)的請(qǐng)求。無論是VM還是View，他們執(zhí)行Model數(shù)據(jù)的所有變更。

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

2.2 Mvvm的優(yōu)點(diǎn)。MVVM模式主要目的是分離視圖（View）和模型（Model），有幾大優(yōu)點(diǎn)：

（1）低耦合。視圖（View）可以獨(dú)立于Model變化和修改，一個(gè)VM可以綁定到不同的"View"上，當(dāng)View變化的時(shí)候Model可以不變，當(dāng)Model變化的時(shí)候View也可以不變。

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

（3）獨(dú)立開發(fā)。開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（VM），設(shè)計(jì)人員可以專注于頁面設(shè)計(jì)，使用Expression Blend可以很容易設(shè)計(jì)界面并生成xaml代碼。

（4）可測(cè)試。界面素來是比較難于測(cè)試的，測(cè)試可以針對(duì)VM來寫。

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

（1）模板編譯（Compile）

（2）數(shù)據(jù)劫持（Observer）

（3）發(fā)布的訂閱（Dep）

（4）觀察者（Watcher）

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

3.1 Model（視圖）：視圖負(fù)責(zé)界面以及顯示。它通過DataContext（數(shù)據(jù)上下文）和VM進(jìn)行數(shù)據(jù)綁定，不直接與Model進(jìn)行交互。

視圖的責(zé)任就是定義用戶在屏幕上能看到的所有結(jié)構(gòu)和外觀。理想的視圖背后的代碼只包含調(diào)用 InitializeComponent 方法的構(gòu)造函數(shù)。視圖一般扮演以下關(guān)鍵角色：

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

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

（3）視圖通過DataContext屬性應(yīng)用視圖模型進(jìn)行了控件的綁定并使數(shù)據(jù)的屬性和命令被視圖模型暴露出來;

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

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

（6）視圖背后的代碼用 XAML 實(shí)現(xiàn)了很難表達(dá)的可視化行為。

在視圖與視圖模型間可通過綁定Behavior/Comand來進(jìn)行對(duì)VM的方法的調(diào)用，Command是View到VM的單向通行，綁定的實(shí)現(xiàn)也是運(yùn)用了實(shí)現(xiàn)Silverlight提供的IComand接口，讓View觸發(fā)事件，VM來處理事件，進(jìn)行解決事件綁定功能。

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

很典型的，視圖模型會(huì)定義能被展現(xiàn)在 UI上并被用戶調(diào)用的命令或者行為。一個(gè)通用的例子就是當(dāng)視圖模型需要提交命令時(shí)會(huì)允許用戶提交數(shù)據(jù)到網(wǎng)絡(luò)服務(wù)或者數(shù)據(jù)庫。視圖可以選擇用一個(gè)按鈕來展示所以用戶能夠點(diǎn)擊該按鈕提交數(shù)據(jù)。典型地，當(dāng)命令編程不可用的，它相關(guān)的UI 展示也變得不可用。視圖模型通常扮演下面這些關(guān)鍵角色：

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

（2）視圖模型是可以獨(dú)立于視圖與模型調(diào)試的;

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

（4）視圖模型實(shí)現(xiàn)了視圖用來數(shù)據(jù)綁定的屬性與命令;

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

（6）視圖模型協(xié)調(diào)視圖與模型的交互;

（7）視圖模型可以定義視圖展現(xiàn)給用戶的邏輯狀態(tài);

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

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

模型為程序展現(xiàn)了客戶端域模型，也可能包含支持?jǐn)?shù)據(jù)訪問與緩存的代碼，即使只有一個(gè)分離的數(shù)據(jù)庫或服務(wù)被使用。

模型通常扮演以下的關(guān)鍵角色：

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

（2）模型類不能直接應(yīng)用視圖或視圖模型類;

（3）模型類不依賴于它們是如何實(shí)現(xiàn)的;

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

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

（6）模型類是很典型地通過 IDataErrorInfo/INotifyDataErrorInfo.提供數(shù)據(jù)驗(yàn)證與錯(cuò)誤報(bào)告;

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

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

4總結(jié)

經(jīng)過整體的分析測(cè)試，基于MVVM的復(fù)雜數(shù)據(jù)可視化開發(fā)，會(huì)使數(shù)據(jù)更加的直觀，MVVM框架的應(yīng)用也會(huì)使系統(tǒng)設(shè)計(jì)流程更加規(guī)范，通過Model、View、View Model 之間的交互實(shí)現(xiàn)了界面設(shè)計(jì)與后臺(tái)邏輯代碼的分離，封裝了對(duì)象與數(shù)據(jù)庫之間的交互，建立了一個(gè)利于維護(hù)，便于測(cè)試，有良好擴(kuò)展性的應(yīng)用系統(tǒng)。

參考文獻(xiàn)：

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

[2]王嬋娟. 淺談WPF架構(gòu)及其應(yīng)用[J]. 科技信息， 2011（21）：114-115，128.

[3]黃建崗. 淺談WPF設(shè)計(jì)模式[J]. 中小企業(yè)管理與科技，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，F(xiàn)reeman 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框架技術(shù)探索[J]. 吉林建筑工程學(xué)院學(xué)報(bào)，2009，26（4）：82-84.

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