MVVM框架在Web前端的應(yīng)用研究

孫連山++李云倩

摘要：隨著Web應(yīng)用的日趨復(fù)雜，前端技術(shù)的不斷推陳出新，MVVM框架模式也得以在Web前端發(fā)揮作用。該文將對(duì)MVVM框架進(jìn)行介紹，結(jié)合目前備受矚目的前端AngularJS框架，闡述MVVM在Web前端的應(yīng)用，并將其與前端傳統(tǒng)開(kāi)發(fā)思維對(duì)比，分析MVVM在Web前端開(kāi)發(fā)中具有的優(yōu)勢(shì)。

關(guān)鍵詞：MVVM；Web前端框架；AngularJS

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）06-0045-02

面向?qū)ο笤O(shè)計(jì)（OOD）的核心設(shè)計(jì)原則是使程序模塊達(dá)到“高內(nèi)聚，低耦合” ，而MVC、MVP、MVVM等都是圍繞這一核心原則相繼產(chǎn)生的框架模式。隨著Web 應(yīng)用的日趨復(fù)雜、前端規(guī)模不斷擴(kuò)大，Web前端也開(kāi)啟了MVC、MVVM風(fēng)潮，越來(lái)越工程化。

1 MVVM框架模式思想

MVVM框架模式是Model-View-ViewModel模式的簡(jiǎn)稱(chēng)，于 2005 年由微軟的 WPF 和 Silverlight 的架構(gòu)師 John Gossman 提出。MVVM既吸收了MVC模式的精華，又利用了數(shù)據(jù)綁定（Data Binding）技術(shù)和WPF中命令Command技術(shù)對(duì)MVP模式進(jìn)行了改進(jìn)。其設(shè)計(jì)思想是 “數(shù)據(jù)驅(qū)動(dòng)界面”，與傳統(tǒng)的“事件驅(qū)動(dòng)界面”相比較，以數(shù)據(jù)為核心，使視圖處于從屬地位。數(shù)據(jù)綁定[1]使表層視圖會(huì)隨底層數(shù)據(jù)地改變而改變，若用戶(hù)修改了視圖元素值，相當(dāng)于透過(guò)視圖元素直接修改了底層數(shù)據(jù)。Command技術(shù)可接受View中用戶(hù)的輸入并做相應(yīng)處理，它解耦了視圖和視圖模型。

MVVM框架模式結(jié)構(gòu)如圖1所示，由模型（Model）、視圖（View）、視圖模型（ViewModel）三部分組成[2]。MVVM為View層單獨(dú)定制了一個(gè)Model，既ViewModel。View中的視圖邏輯通過(guò)雙向數(shù)據(jù)綁定和命令綁定到ViewModel的屬性上，通過(guò)ViewModel得到Model中的數(shù)據(jù)，雙向數(shù)據(jù)綁定實(shí)現(xiàn)了視圖和數(shù)據(jù)模型的自動(dòng)同步機(jī)制。

MVVM中每個(gè)模塊在系統(tǒng)中的職責(zé)不同。視圖：用于界面呈現(xiàn)，它不直接與Model進(jìn)行交互，而是通過(guò)ViewModel與Model通信，并可獨(dú)立于Model的變化和修改，這也是MVVM低耦合思想的體現(xiàn)。視圖模型：是對(duì)視圖邏輯和View與Model模塊之間狀態(tài)控制的封裝，是View和Model通信的橋梁，也是MVVM設(shè)計(jì)思想的核心部分。它包含綁定的數(shù)據(jù)集合，可根據(jù)用戶(hù)輸入通知修改Model、響應(yīng)Model中的數(shù)據(jù)變化事件，可發(fā)送ViewModel中的變化事件以通知View更新。一個(gè)ViewModel可以綁定到多個(gè)View上，即多個(gè)View可以復(fù)用同一個(gè)ViewModel，這大大提高了代碼的可重用性。模型：封裝了與業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)，以及數(shù)據(jù)處理等事件。它不依賴(lài)于View和ViewModel，可直接與數(shù)據(jù)庫(kù)交互。

2 AngularJS中MVVM框架模式的應(yīng)用

2.1 AngularJS簡(jiǎn)介

AngularJS框架于2009年由Google首次發(fā)布。因其模塊化思想，雙向數(shù)據(jù)綁定，指令（Directives），測(cè)試驅(qū)動(dòng)開(kāi)發(fā)等特性，以及其2.0版本對(duì)移動(dòng)設(shè)備的良好支持，目前已處于前端JS框架之領(lǐng)導(dǎo)地位。AngularJS 設(shè)計(jì)初衷是標(biāo)準(zhǔn)的MVC模式，但隨著代碼重構(gòu)和API的重寫(xiě)，現(xiàn)在更是將MVVM框架模式表現(xiàn)得淋漓盡致。

2.2 AngularJS中MVVM應(yīng)用模式

在AngularJS中，MVVM應(yīng)用模式主要體現(xiàn)在以下幾個(gè)部分，結(jié)構(gòu)如圖2所示。

View：它專(zhuān)注于界面的顯示和渲染。在AngularJS中，View除了HTML、CSS這些視圖代碼，還包含AngularJS指令、表達(dá)式等的視圖模板。View不能直接與Model交互，視圖對(duì)象需要通過(guò)$scope這個(gè)ViewModel來(lái)引用。

ViewModel：它負(fù)責(zé)View和Model的交互、協(xié)作。ViewModel給View提供顯示數(shù)據(jù)，并提供了View中Command事件操作Model的方式。在AngularJS中，$scope對(duì)象充當(dāng)了這個(gè)ViewModel的角色。$scope被稱(chēng)為控制器的功能模塊包裝，它提供一些API來(lái)監(jiān)控View狀態(tài)，可以把數(shù)據(jù)模型和函數(shù)暴露給視圖（UI模板），它包括數(shù)據(jù)引用關(guān)系、控制器定義行為、視圖處理頁(yè)面布局以及相應(yīng)的處理跳轉(zhuǎn)等內(nèi)容。

Model：它是與應(yīng)用程序的業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)的封裝載體，是業(yè)務(wù)領(lǐng)域的對(duì)象。AngularJS通過(guò)數(shù)據(jù)模型Model驅(qū)動(dòng)，以JavaScript對(duì)象的屬性的形式呈現(xiàn)。通過(guò)數(shù)據(jù)綁定技術(shù)，視圖會(huì)根據(jù)數(shù)據(jù)模型的變化自動(dòng)更新，因而模型也是Web應(yīng)用程序開(kāi)發(fā)和設(shè)計(jì)中的焦點(diǎn)。

AngularJS中，Model與ViewModel通過(guò)$scope對(duì)象互動(dòng)。$scope對(duì)象監(jiān)聽(tīng)Model的變化，通過(guò)View來(lái)發(fā)送和渲染，由HTML來(lái)展示代碼。Model并不關(guān)心會(huì)被如何顯示或操作，所以Model中也不會(huì)包含任何界面顯示相關(guān)的邏輯。在web頁(yè)面中，大部分Model都是來(lái)自Ajax的服務(wù)端返回?cái)?shù)據(jù)或者是全局的配置對(duì)象，而AngularJS中內(nèi)置的服務(wù)$http非常強(qiáng)大，可直接替代 Jquery的 Ajax函數(shù)，它封裝和處理這些與Model相關(guān)的業(yè)務(wù)邏輯。

Controller：AngularJS提供了無(wú)狀態(tài)的Controller，它并不是MVVM模式的核心元素。Controller可設(shè)置模型的初始狀態(tài)，它組合一個(gè)或者多個(gè)服務(wù)（service）來(lái)獲取業(yè)務(wù)領(lǐng)域Model并將其放在ViewModel對(duì)象上，使得應(yīng)用界面在啟動(dòng)加載的時(shí)候達(dá)到一種可用的狀態(tài)。另外，Controller可監(jiān)控模型其余部分的變化并采取相應(yīng)的動(dòng)作。

AngularJS內(nèi)嵌了jQLite，它內(nèi)部實(shí)現(xiàn)的一個(gè)Jquery子集，包含了常用的 Jquery DOM 操作方法，事件綁定等，所以我們只需用JS控制ViewModel，不用關(guān)注數(shù)據(jù)如何呈現(xiàn)到頁(yè)面，由框架更新Model和View。對(duì)于用戶(hù)交互Command事件（如ng-Click、ng-Change、ng-If等）則會(huì)轉(zhuǎn)發(fā)到轉(zhuǎn)到$scope的某個(gè)行為邏輯上，通過(guò)ViewModel來(lái)實(shí)現(xiàn)對(duì)Model的改變，對(duì)于Model 的任何改變也會(huì)隨之反應(yīng)在ViewModel之上，再通過(guò)$scope的“臟檢查機(jī)制”（$digest）來(lái)更新到View，從而實(shí)現(xiàn)View和 Model的分離。

2.3 AngularJS中MVVM應(yīng)用模式與Web前端傳統(tǒng)開(kāi)發(fā)思維對(duì)比

Jquery是以事件驅(qū)動(dòng)為中心、面向網(wǎng)頁(yè)編程的傳統(tǒng)前端開(kāi)發(fā)思維的代表。它專(zhuān)注于View層的變化和用戶(hù)的操作，在對(duì)網(wǎng)頁(yè)元素的定位和操作上需花費(fèi)較多精力，對(duì)于數(shù)據(jù)處理卻是弱項(xiàng)。隨著界面和邏輯的日趨復(fù)雜，再使用JS或者Jquery去控制DOM會(huì)越來(lái)越不易，尤其對(duì)具有復(fù)雜交互的項(xiàng)目，JS邏輯會(huì)變得臃腫，交互邏輯分散。而Jquery template技術(shù)，雖可實(shí)現(xiàn)模塊之間解耦，但無(wú)法實(shí)現(xiàn)數(shù)據(jù)和視圖展現(xiàn)的解耦。AngularJS是新一代前端開(kāi)發(fā)思維的體現(xiàn)，以Model為中心、面向數(shù)據(jù)編程。它減少對(duì)網(wǎng)頁(yè)元素的定位和操作，避免了Jquery中DOM操作對(duì)網(wǎng)頁(yè)結(jié)構(gòu)的破壞。AngularJS把模型和視圖綁定在一起，實(shí)現(xiàn)聯(lián)動(dòng)，改變模型，DOM 就可以隨之進(jìn)行改變，甚至綁定 DOM 的事件也可以直接跟著進(jìn)行改變，讓View和Model的進(jìn)一步分離和解耦，減少了前端開(kāi)發(fā)工作量，提高了開(kāi)發(fā)效率。

3 MVVM框架在Web前端開(kāi)發(fā)過(guò)程中的優(yōu)勢(shì)

MVVM適合編寫(xiě)大型Web應(yīng)用前端JS框架，其優(yōu)勢(shì)如下。在團(tuán)隊(duì)層面， MVVM改變了軟件開(kāi)發(fā)方式。由于 View與ViewModel之間的松耦合關(guān)系，使得開(kāi)發(fā)團(tuán)隊(duì)與設(shè)計(jì)團(tuán)隊(duì)分工明確，設(shè)計(jì)團(tuán)隊(duì)只需產(chǎn)出用戶(hù)友好的界面，而開(kāi)發(fā)團(tuán)隊(duì)則專(zhuān)注于業(yè)務(wù)邏輯和數(shù)據(jù)，提高了開(kāi)發(fā)效率。在架構(gòu)層面 ，模塊間松耦合關(guān)系使得模塊間相互依賴(lài)性降低，項(xiàng)目架構(gòu)更穩(wěn)定，擴(kuò)展性得到提高，后續(xù)如需增加新模塊，能做到最小的改動(dòng)。在代碼層面，通過(guò)合理的規(guī)劃分層ViewModel，可提高代碼重用性，使整個(gè)邏輯結(jié)構(gòu)更為簡(jiǎn)潔。另外，MVVM的引入能更有效地組織應(yīng)用結(jié)構(gòu)，使項(xiàng)目模塊變得清晰化、條理化，增強(qiáng)了代碼可讀性，降低了前端測(cè)試難度。

4 結(jié)束語(yǔ)

MVVM框架模式歸根結(jié)底還是MVC精心優(yōu)化后的結(jié)果，它可兼容當(dāng)下使用的MVC模式?；蛟S有些人認(rèn)為，MVVM是以更復(fù)雜的方式存儲(chǔ)DOM和數(shù)據(jù)綁定關(guān)系，比較耗內(nèi)存、耗性能，但是當(dāng)Web應(yīng)用程序的功能達(dá)到一個(gè)量級(jí)且代碼開(kāi)始需要以更高效的方式組合時(shí)，使用優(yōu)秀的開(kāi)發(fā)框架反而會(huì)提高網(wǎng)站的性能。

參考文獻(xiàn)：

[1] 劉立. MVVM模式分析與應(yīng)用[J].微型電腦應(yīng)用，2012（12）：57-60.

[2] 陳濤. MVVM設(shè)計(jì)模式及其應(yīng)用研究[J].計(jì)算機(jī)與數(shù)字工程，2014（10）：1982-1985.

[3] 李龍澍，華驍飛. Silverlight下的MVVM模式的應(yīng)用[J].計(jì)算機(jī)技術(shù)與發(fā)展，2013（12）：203-207.