MVVM框架在Web前端的應用研究

孫連山++李云倩

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

關鍵詞：MVVM；Web前端框架；AngularJS

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2016）06-0045-02

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

1 MVVM框架模式思想

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

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

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

2 AngularJS中MVVM框架模式的應用

2.1 AngularJS簡介

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

2.2 AngularJS中MVVM應用模式

在AngularJS中，MVVM應用模式主要體現(xiàn)在以下幾個部分，結構如圖2所示。

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

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

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

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

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

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

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

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

3 MVVM框架在Web前端開發(fā)過程中的優(yōu)勢

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

4 結束語

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

參考文獻：

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

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

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

孫連山 李云倩

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

關鍵詞：MVVM；Web前端框架；AngularJS

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2016）06-0045-02

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

1 MVVM框架模式思想

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

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

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

2 AngularJS中MVVM框架模式的應用

2.1 AngularJS簡介

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

2.2 AngularJS中MVVM應用模式

在AngularJS中，MVVM應用模式主要體現(xiàn)在以下幾個部分，結構如圖2所示。

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

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

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

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

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

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

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

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

3 MVVM框架在Web前端開發(fā)過程中的優(yōu)勢

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

4 結束語

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

參考文獻：

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

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

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