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

朱海萍 丁西 劉鏈

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

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

中圖分類號：TP393.09? ? ? ? ? ? ? ? ? ? ? ?文獻(xiàn)標(biāo)識碼：A文章編號：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模式的由來，我們先來回顧下Web前端發(fā)展的歷史，在1989年，物理學(xué)家蒂姆·伯納斯·李發(fā)明了超文本標(biāo)記語言（HyperText Markup Language），就是現(xiàn)在我們所知道的HTML。HTML在1993年成為互聯(lián)網(wǎng)草案，最早的html就只是靜態(tài)的頁面，并不能動態(tài)修改頁面的內(nèi)容，在1995年年底，JavaScript的出現(xiàn)將動態(tài)去修改頁面變成了現(xiàn)實，到如今的前端開發(fā)模式我們可以分為4個階段，具體如下。

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

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

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

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

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

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

2.1 MVC模式

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

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

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

Controller（控制器）：控制器可以理解為是模型與視圖的橋梁，集中性地管理事件觸發(fā)、視圖觸發(fā)，當(dāng)頁面加載完成時，控制器進(jìn)行監(jiān)聽交互，做出對視圖的選擇，委托模型更新數(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ā)而動全身，并沒有實現(xiàn)真正的分離和重用。

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

2.3 MVVM模式

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

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

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

2.4 MVVM的優(yōu)勢

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

（2）可重用性?？梢园裋iew邏輯放在ViewModel里面，重用這些視圖邏輯。

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

3? 前端MVVM框架的對比

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

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

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

3.2 模板

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

3.3 自由度

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

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

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

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)用層面的框架性能問題。

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

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

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

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

4? 結(jié)語

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

參考文獻(xiàn)

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

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

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

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

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

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

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

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

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