劉晶美 聶廣俊
摘要:隨著計(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.