Web前端中基于MVVM框架的技術(shù)應(yīng)用研究

朱海萍 丁西 劉鏈

摘? 要：在互聯(lián)網(wǎng)技術(shù)日新月異的今天，隨著Web技術(shù)的不斷發(fā)展，以前的技術(shù)無(wú)法滿足日趨復(fù)雜的Web應(yīng)用，如果還在使用之前老的框架，對(duì)View層的操作就會(huì)難以維護(hù)，這就是前端框架要不斷演變的主要原因，前端MVVM框架應(yīng)運(yùn)而生，前端模塊化開(kāi)發(fā)模式成為現(xiàn)在的主流。該文將重點(diǎn)介紹MVVM框架的發(fā)展由來(lái)、MVVM模式的工作原理以及和傳統(tǒng)的MVC模式進(jìn)行對(duì)比、前端主流MVVM框架的對(duì)比、詳細(xì)分析MVVM框架的關(guān)鍵技術(shù)以及優(yōu)勢(shì)所在。

關(guān)鍵詞：MVC? MVVM? VUE? Web前端

中圖分類(lèi)號(hào)：TP393.09? ? ? ? ? ? ? ? ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1672-3791（2020）10（c）-0008-03

Abstract： With the rapid development of Internet technology today， with the continuous development of web technology， the previous technology cannot meet the increasingly complex web applications. If you still use the old framework before， the operation of the View layer will be difficult to maintain. This is the front end the main reason for the continuous evolution of the framework is that the front-end MVVM framework came into being， and the front-end modular development model has become the mainstream. This article will focus on the origin of the development of the MVVM framework， the working principle of the MVVM model and the comparison with the traditional MVC model. Comparison of mainstream MVVM framework， detailed analysis of the key technologies and advantages of MVVM framework.

Key Words： MVC; MVVM; VUE; Web front end

1? Web前端模式的演化

要了解MVVM模式的由來(lái)，我們先來(lái)回顧下Web前端發(fā)展的歷史，在1989年，物理學(xué)家蒂姆·伯納斯·李發(fā)明了超文本標(biāo)記語(yǔ)言（HyperText Markup Language），就是現(xiàn)在我們所知道的HTML。HTML在1993年成為互聯(lián)網(wǎng)草案，最早的html就只是靜態(tài)的頁(yè)面，并不能動(dòng)態(tài)修改頁(yè)面的內(nèi)容，在1995年年底，JavaScript的出現(xiàn)將動(dòng)態(tài)去修改頁(yè)面變成了現(xiàn)實(shí)，到如今的前端開(kāi)發(fā)模式我們可以分為4個(gè)階段，具體如下。

（1）js結(jié)合原生的瀏覽器API通過(guò)瀏覽器的機(jī)制，可以直接操作頁(yè)面DOM。

（2）隨著Web 2.0時(shí)代的到來(lái)，Web開(kāi)發(fā)的要求不斷提升，ajax也慢慢流行起來(lái)。為了降低跨瀏覽器開(kāi)發(fā)的復(fù)雜度和考慮各種瀏覽器兼容性，很多前端類(lèi)庫(kù)（YUI、Dojo、Mootools、Prototype、jQuery）也相繼問(wèn)世，但最終還是jQuery以“寫(xiě)得更少，做得更多”，簡(jiǎn)潔、優(yōu)雅的設(shè)計(jì)特點(diǎn)勝出，迅速占領(lǐng)了世界，直到現(xiàn)在還廣泛運(yùn)用。

（3）MVC模式的誕生，隨著前端技術(shù)的發(fā)展，后臺(tái)的業(yè)務(wù)邏輯逐漸向前端轉(zhuǎn)移，只使用jquery可能無(wú)法滿足越來(lái)越復(fù)雜的業(yè)務(wù)需求，尤其在單頁(yè)面應(yīng)用上更顯得力不從心，于是Backbone.js就誕生了，作為前端MVC框架的鼻祖，讓前端開(kāi)發(fā)的價(jià)值上升了一個(gè)新的臺(tái)階。

（4）MVVM模式是Model-View-View Model模式的簡(jiǎn)稱(chēng)，借鑒了MVC模式的思想，利用數(shù)據(jù)驅(qū)動(dòng)視圖，達(dá)到數(shù)據(jù)和視圖進(jìn)行完全分離，實(shí)現(xiàn)了前后端真正的分離模式，成為如今Web開(kāi)發(fā)的主流。

2? MVVM模式的思想以及與MVC的比較

MVVM模式是從MVC發(fā)展而來(lái)，對(duì)比兩種模式的工作原理，了解MVC框架的缺點(diǎn)能讓我們更好地去認(rèn)識(shí)MVVM模式的優(yōu)勢(shì)所在。

2.1 MVC模式

它的原理就是界面展示與數(shù)據(jù)模型分離，修改展示界面并不需要重新編寫(xiě)業(yè)務(wù)邏輯。

Model（模型）：模型存放著應(yīng)用的所有數(shù)據(jù)對(duì)象，因此包含數(shù)據(jù)和行為，模型不包含視圖與控制器之間的邏輯，但是模型提供了模型數(shù)據(jù)查詢和模型數(shù)據(jù)的狀態(tài)更新等功能。

View（視圖）：對(duì)模型進(jìn)行視圖的展示，視圖是展現(xiàn)給用戶的，就是我們能見(jiàn)到的頁(yè)面。

Controller（控制器）：控制器可以理解為是模型與視圖的橋梁，集中性地管理事件觸發(fā)、視圖觸發(fā)，當(dāng)頁(yè)面加載完成時(shí)，控制器進(jìn)行監(jiān)聽(tīng)交互，做出對(duì)視圖的選擇，委托模型更新數(shù)據(jù)。

各部分之間的通信方式如下。

View傳送指令到Controller，Controller完成業(yè)務(wù)邏輯后要求Model改變狀態(tài)，Model將新的數(shù)據(jù)發(fā)送到 View，用戶得到反饋。

2.2 MVC模式的缺點(diǎn)

缺點(diǎn)一：控制層和視圖層進(jìn)行耦合，一發(fā)而動(dòng)全身，并沒(méi)有實(shí)現(xiàn)真正的分離和重用。

缺點(diǎn)二：架構(gòu)以犧牲代碼的復(fù)雜性為代價(jià)，對(duì)于小項(xiàng)目降低開(kāi)發(fā)效率。

2.3 MVVM模式

View和Model層沒(méi)有直接的聯(lián)系，通過(guò)ViewModel進(jìn)行雙向交互，實(shí)現(xiàn)了真正的前后分離。

View表示我們網(wǎng)頁(yè)，Model表示數(shù)據(jù)模型，因?yàn)镸VVM的控制器并不會(huì)去監(jiān)聽(tīng)瀏覽器的事件，而是監(jiān)聽(tīng)一個(gè)屬性表，由瀏覽器的事件修改屬性，以觸發(fā)控制器中的方法，增加了一層控制業(yè)務(wù)的屬性，而這層屬性被稱(chēng)為ViewModel，View與Model通過(guò)ViewModel就實(shí)現(xiàn)了雙向綁定。

MVVM模式采用雙向綁定（data-binding）：View和Model之間的同步工作完全是自動(dòng)的，ViewModel通過(guò)雙向數(shù)據(jù)綁定把View層和Model層連接起，負(fù)責(zé)把Model的數(shù)據(jù)同步到View顯示出來(lái)，還負(fù)責(zé)把View的修改同步回Model，所以開(kāi)發(fā)者只需要關(guān)注自己的業(yè)務(wù)邏輯。這也是MVVM的核心思想：關(guān)注Model的變化，讓MVVM框架利用自己的機(jī)制去自動(dòng)更新DOM，從而把開(kāi)發(fā)者從操作DOM的繁瑣中解脫出來(lái)，不需關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題，也就是所謂的數(shù)據(jù)和視圖分離，數(shù)據(jù)驅(qū)動(dòng)視圖，視圖不影響數(shù)據(jù)。

2.4 MVVM的優(yōu)勢(shì)

（1）低耦合。視圖獨(dú)立Model變化和修改，一個(gè)ViewModel同時(shí)綁定到多個(gè)視圖上。

（2）可重用性。可以把View邏輯放在ViewModel里面，重用這些視圖邏輯。

（3）獨(dú)立開(kāi)發(fā)。通過(guò)MVVM，開(kāi)發(fā)人員可以專(zhuān)注于業(yè)務(wù)邏輯和數(shù)據(jù)開(kāi)發(fā)在viewModel里面，分工更加明確。

3? 前端MVVM框架的對(duì)比

如今MVVM框架成為Web開(kāi)發(fā)主流，涌現(xiàn)出了越來(lái)越多的框架，但是用數(shù)據(jù)說(shuō)話，形成了三足鼎立的一個(gè)狀態(tài)，即angular.js、react.js、vue.js，每個(gè)框架都不可避免會(huì)有自己的一些特點(diǎn)，現(xiàn)在主要針對(duì)三大框架進(jìn)行一個(gè)詳細(xì)的對(duì)比。

3.1 數(shù)據(jù)綁定

Angular和vue為雙向綁定，react單向綁定。

3.2 模板

Angular的模板是最強(qiáng)大的，除了自帶的、豐富的模板指令，還可以通過(guò)自定義的指令定義模板，調(diào)用的時(shí)候只需要一個(gè)指令名稱(chēng)就夠了，React模板就是JSX，JSX語(yǔ)法相當(dāng)于一個(gè)變量，相當(dāng)靈活。Vue基于HTML的模板，它的特點(diǎn)就是簡(jiǎn)潔易用。

3.3 自由度

Angular本身是一個(gè)大而全的框架，它對(duì)模塊模板路由都有很多的要求，因此自由度比較小。

React是UI層框架，JSX模板相當(dāng)于js，寫(xiě)起來(lái)自由度非常大，相當(dāng)于原生的js。

Vue追求的是靈活、簡(jiǎn)單，但還是受到一些經(jīng)典Web技術(shù)的限制，相對(duì)React自由度小一些，但其實(shí)也比較自由。

3.4 路由

Angular路由是自帶的，而Vue和React是借助別的路由工具。

React使用React-router，Vue使用Vue-router，Angular中是靜態(tài)的路由。

3.5 體積和性能

Angular框架較臃腫。gzip文件大小為143 K，而Vue為23 K，React為43 K。如果比較快慢的話，三大框架都是非常快的，我們完全不必糾結(jié)一般的應(yīng)用層面的框架性能問(wèn)題。

3.6 學(xué)習(xí)曲線

React入門(mén)簡(jiǎn)單，越深入就越難，React的語(yǔ)法使用了JSX，學(xué)習(xí)之前首先要先了解JSX語(yǔ)法，后期狀態(tài)管理Redux的理解也相對(duì)比較復(fù)雜，加上生態(tài)衍生出來(lái)的形形色色的插件就更加有難度了。

Angular在經(jīng)歷了全新版本升級(jí)，使學(xué)習(xí)曲線比較陡峭，完完全全變成了一個(gè)框架，使用了很多新的概念，API文檔的理解并不是很容易，導(dǎo)致上手難度稍大，但是本身的設(shè)計(jì)目的是針對(duì)較大型的應(yīng)用，總體來(lái)說(shuō)，對(duì)于新手開(kāi)發(fā)者并沒(méi)有那么友好。

Vue學(xué)習(xí)曲線相對(duì)平緩，入門(mén)相對(duì)簡(jiǎn)單，得益于中文文檔，對(duì)于國(guó)內(nèi)來(lái)說(shuō)更加友好，并且不脫離原有的 HTML、CSS、JS前端開(kāi)發(fā)習(xí)慣是它最大的特色，不需要先學(xué)習(xí)jsx語(yǔ)法或typescript的語(yǔ)法，所以學(xué)習(xí)曲線很穩(wěn)，也更讓純前端人員接受和上手。

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

前端MVVM已成為主流，前后端分離也逐漸成為未來(lái)趨勢(shì)，MVVM模式是前端模塊化、工程化的重要設(shè)計(jì)思想，在互聯(lián)網(wǎng)高速發(fā)展的今天，面對(duì)越來(lái)越復(fù)雜化的應(yīng)用場(chǎng)景，MVVM模式對(duì)前端開(kāi)發(fā)的效率有了大的提高，對(duì)于前端模塊化開(kāi)發(fā)有了質(zhì)的提升，讓前端代碼更加簡(jiǎn)潔易維護(hù)和易測(cè)試。新的技術(shù)總是接踵而至，在計(jì)算機(jī)領(lǐng)域時(shí)刻都要迎接更加優(yōu)秀的技術(shù)的來(lái)臨，讓我們一起迎接MVVM這一輪新技術(shù)的浪潮吧。

參考文獻(xiàn)

[1] 何煥春，楊懌.基于MVVM構(gòu)架的Web前端框架研究[J].電腦知識(shí)與技術(shù)，2017，13（24）：59-60.

[2] 顧睿.基于MVVM的虛擬DOM輕型Web前端框架的設(shè)計(jì)與實(shí)現(xiàn)[D].西安電子科技大學(xué)，2019.

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

[4] 仝守玉.基于MVVM模式的數(shù)字員工管理平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[D].北京郵電大學(xué)，2017.

[5] 彭逸帆.多用戶管理系統(tǒng)的Web前端框架研究[D].北京郵電大學(xué)，2018.

[6] 程桂花.MVVM前后端數(shù)據(jù)交互中安全機(jī)制的研究與實(shí)現(xiàn)[D].浙江理工大學(xué)，2017.

[7] 蘇艷.MVVM框架在Web前端的應(yīng)用研究[J].數(shù)碼世界，2017（11）：67.

[8] 肖小嵐，劉振宇.基于MVVM模式的Extjs框架在前端界面設(shè)計(jì)中的應(yīng)用研究[J].電腦知識(shí)與技術(shù)，2016，12（5）：84-88.

[9] 孫連山，李云倩.MVVM框架在Web前端的應(yīng)用研究[J].電腦知識(shí)與技術(shù)：學(xué)術(shù)交流，2016（2X）：45-46.