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

蘇艷 武漢傳媒學(xué)院

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

蘇艷 武漢傳媒學(xué)院

在Web技術(shù)不斷發(fā)展的過程當(dāng)中，其前端技術(shù)也在此過程中獲得了較大的發(fā)展。在本文中，將就MVVM框架在Web前端的應(yīng)用進行一定的研究。

MVVM框架 Web前端 應(yīng)用

1 引言

面向?qū)ο笤O(shè)計原則是現(xiàn)今應(yīng)用較多的框架類型，MVP、MVC以及MVVM是以該核心為原則形成的框架模式。而在現(xiàn)今web廣泛應(yīng)用的情況下，前端規(guī)模也在此過程中得到了進一步的擴大。

2 Angular JS中MVVM框架應(yīng)用

Angular JS是由Google于2009年公布的框架，具有著雙向數(shù)據(jù)綁定、測試驅(qū)動開發(fā)以及模塊化思想等特點，且在移動設(shè)備支持方面具有著較好的表現(xiàn)。在開始階段，該框架是標(biāo)準(zhǔn)的MVC設(shè)計模式，而隨著API重寫以及代碼重構(gòu)，目前其具有了明顯的MVVM模式特征。

在Angular JS當(dāng)中，MVVM模式主要在以下幾個方面得到了體現(xiàn)：第一，view。該部分的功能即是對界面的渲染與顯示。在Angular JS當(dāng)中，其除了CSS以及HTML等基本視圖代碼意外，且具有Angular JS表達式以及指令等視圖模塊。在實際應(yīng)用當(dāng)中，view不能夠同Model直接進行交互，而需要通過專門的指令進行引用；第二，ViewModel。該部分的功能是對Model以及View之間的協(xié)作與交互功能進行實現(xiàn)。在具體應(yīng)用當(dāng)中，其將對view實現(xiàn)顯示數(shù)據(jù)的提供，并具有Command操作方式的提供。在框架當(dāng)中，scope對象為功能模塊包裝，通過一定API的提供對view狀態(tài)進行監(jiān)控，能夠?qū)⒑瘮?shù)以及數(shù)據(jù)模型對視圖進行暴露，包括有控制器定義行為、處理跳轉(zhuǎn)、視圖處理頁面布局以及數(shù)據(jù)引用關(guān)系等內(nèi)容；第三，Model。其是應(yīng)用程序當(dāng)中對業(yè)務(wù)邏輯數(shù)據(jù)進行封裝的載體，為業(yè)務(wù)領(lǐng)域?qū)ο?。在Angular JS當(dāng)中，其驅(qū)動為數(shù)據(jù)模型Model。通過數(shù)據(jù)綁定技術(shù)的應(yīng)用，則能夠以數(shù)據(jù)模型變化情況自動更新視圖。對此，模型也是現(xiàn)階段web程序設(shè)計與開發(fā)當(dāng)中的一項重點內(nèi)容。在Angular JS當(dāng)中，scope是ViewModel同Model之間互動的橋梁，能夠?qū)odel的變化情況進行監(jiān)聽，并以View進行渲染與發(fā)送。在實際工作中，Model并不需要關(guān)心具體操作以及顯示情況，對此，在Model當(dāng)中也不會對界面邏輯進行包含。在web頁面中，很多Model都是全局配置對象或者服務(wù)端的返回數(shù)據(jù)，而在Angular JS當(dāng)中，其所具有的http服務(wù)即能夠?qū)odel相關(guān)的業(yè)務(wù)邏輯進行封裝與處理；第四，Controller。在Angular JS當(dāng)中，對無狀態(tài)Controller進行了提供，其并非模式當(dāng)中的核心元素。在實際應(yīng)用當(dāng)中，其能夠?qū)δＰ偷某跏紶顟B(tài)進行設(shè)置，通過多個服務(wù)的組合對業(yè)務(wù)領(lǐng)域Model進行獲取，并將其放在ViewModel對象上，以此使界面在加載階段成為可用狀態(tài)。同時，其也可以在對模型變化進行監(jiān)控的基礎(chǔ)上對相應(yīng)的動作進行采取。同時，在框架中具有jQLite，在其內(nèi)部，具有JQuery子集的實現(xiàn)，具有事件綁定等常用的操作方式，在時間應(yīng)用中，可以在不需要關(guān)注數(shù)據(jù)呈現(xiàn)方式的情況下通過框架實現(xiàn)View以及Model的更新。

3 web前端MVVM應(yīng)用優(yōu)勢

在web當(dāng)中，MVVM非常適合應(yīng)用在web前端JS框架當(dāng)中。從團隊角度看來，通過MVVM的應(yīng)用，能能夠?qū)浖拈_發(fā)方式進行改變。ViewModel同View間松耦合關(guān)系的存在，則可以使設(shè)計同開發(fā)團隊在實際工作當(dāng)中具有著明確的分工。在工作中，設(shè)計團隊的任務(wù)即是對友好的用戶界面進行形成，而開發(fā)團隊的任務(wù)即專注在數(shù)據(jù)與業(yè)務(wù)邏輯方面，以此實現(xiàn)開發(fā)效率的提升。架構(gòu)角度方面，模塊間松耦合關(guān)系的存在，使得不同模塊之間具有了更低的依賴性，在具有穩(wěn)定項目架構(gòu)的同時獲得更高的擴展性，在后續(xù)工作當(dāng)中，如果根據(jù)工作需求需要對新模塊進行增加，則能夠以最小的改動幅度達到目標(biāo)。代碼方面，通過合理規(guī)劃分層ViewModel的應(yīng)用，能夠在對代碼重用性進行提升的基礎(chǔ)上使邏輯結(jié)構(gòu)具有簡潔的特點。此外，在對MVVM應(yīng)用的情況下，也能夠在實現(xiàn)應(yīng)用結(jié)構(gòu)組織的基礎(chǔ)上使項目模塊具有條理化以及清晰化的特點，在對代碼可讀性進行增強的基礎(chǔ)上實現(xiàn)前端測試難度的降低。

4 結(jié)束語

MVVM是MVC優(yōu)化后獲得的結(jié)果，能夠?qū)ΜF(xiàn)階段MVC模式進行較好的兼容，通過其應(yīng)用，能夠更好的實現(xiàn)web前端發(fā)展的促進與優(yōu)化。

[1]莫文水.Web前端中MVVM框架的應(yīng)用研究[J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用.2017(04)

[2]肖小嵐,劉振宇.基于MVVM模式的Extjs框架在前端界面設(shè)計中的應(yīng)用研究[J].電腦知識與技術(shù).2016(05)

[3]李龍澍,華驍飛.Silverlight下的MVVM模式的應(yīng)用[J].計算機技術(shù)與發(fā)展.2013(12)