MVVM可視化編程綜述

劉晶美 聶廣俊

摘要：隨著計(jì)算機(jī)技術(shù)的高速發(fā)展以及信息化業(yè)務(wù)的需求越來(lái)越復(fù)雜，可視化數(shù)據(jù)的量和復(fù)雜度呈現(xiàn)爆炸式的增長(zhǎng)，信息化公司以及用戶對(duì)可視化的要求也越來(lái)越高，前端語(yǔ)言的模塊化、組件化、高性能化變的尤為重要，為了達(dá)到這種高標(biāo)準(zhǔn)的要求，亟需一種新的可視化開(kāi)發(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)室里開(kāi)發(fā)出了世界上第一個(gè)網(wǎng)頁(yè)瀏覽器，從此互聯(lián)網(wǎng)時(shí)代來(lái)臨，可視化技術(shù)也隨之不斷發(fā)展。在長(zhǎng)達(dá)近40年的互聯(lián)網(wǎng)時(shí)代，數(shù)據(jù)可視化從簡(jiǎn)單的文字、圖片，發(fā)展到現(xiàn)在豐富多樣的信息時(shí)代。

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

2MVVM歷史

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

說(shuō)起MVC，就必須拿斯坦福大學(xué)公開(kāi)課上的這幅圖來(lái)說(shuō)明，見(jiàn)圖1。

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

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

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

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

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

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

回到2004年，Martin Fowler發(fā)表了一篇關(guān)于名為PM（Presentation Model）模式的文章。PM模式將View從行為和狀態(tài)中分離開(kāi)，類似于MVP模式。PM模式中有趣的地方是創(chuàng)建了一個(gè)名為Presentation Model的抽象的View。View也就變成了Presentation Model的渲染。在Fowler的解釋中，他說(shuō)明了Presentation Model需要頻繁的更新View， 這樣能夠保證兩者之間的同步性。同步的邏輯代碼編寫(xiě)在于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è)簡(jiǎn)化用戶操作界面的核心功能的標(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)建非常簡(jiǎn)單只需將VM對(duì)象被作為View的上下文（DataContext）來(lái)設(shè)置。如果VM中的屬性值發(fā)生改變，新的值會(huì)通過(guò)綁定自動(dòng)傳送到View。當(dāng)用戶點(diǎn)擊View中的按鈕，VM中的命令將執(zhí)行相應(yīng)的請(qǐng)求。無(wú)論是VM還是View，他們執(zhí)行Model數(shù)據(jù)的所有變更。

View類不知道Model類的存在，同時(shí)VM和Model對(duì)View也一無(wú)所知。事實(shí)上，Model顯然知道VM和View的存在。這是一個(gè)非常低耦合的設(shè)計(jì)，接下來(lái)你會(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ú)立開(kāi)發(fā)。開(kāi)發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開(kāi)發(fā)（VM），設(shè)計(jì)人員可以專注于頁(yè)面設(shè)計(jì)，使用Expression Blend可以很容易設(shè)計(jì)界面并生成xaml代碼。

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

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

（1）模板編譯（Compile）

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

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

（4）觀察者（Watcher）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（5）視圖模型通過(guò)改變提醒事件通知視圖狀態(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)的程序邏輯一樣，用來(lái)保證所有的保證數(shù)據(jù)能夠持久的、有效的被業(yè)務(wù)規(guī)則應(yīng)用。實(shí)現(xiàn)最大化的代碼重用，模型不能夠包含特定的情況，特定的用戶任務(wù)以及特定的程序邏輯。

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

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

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

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

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

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

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

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

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

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

4總結(jié)

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