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

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

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

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

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

1 引言

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

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

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

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

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

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

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

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

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

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

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