Web前端開發(fā)技術(shù)的演化與MVVM設(shè)計模式研究

李嘉　趙凱強　李長云

摘要：隨著Web應(yīng)用的不斷深化，前端開發(fā)模式是提高開發(fā)質(zhì)量和開發(fā)效率的關(guān)鍵要素。基于Web系統(tǒng)組成，以計算機技術(shù)發(fā)展與Web應(yīng)用需求為主線，系統(tǒng)梳理了前端開的演化過程：“后端開發(fā)為主→前端開發(fā)為主→前后端分離開發(fā)模式”，重點分析了當前主流MVVM設(shè)計模式的優(yōu)勢，為Web開發(fā)者提供參考和借鑒。

關(guān)鍵詞：Web；開發(fā)模式；MVVM設(shè)計模式

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

隨著互聯(lián)網(wǎng)的普及應(yīng)用，Web（World Wide Web，也就是WWW，中文名字為“萬維網(wǎng)”）已經(jīng)成為人們必備的共享網(wǎng)絡(luò)數(shù)據(jù)信息的最便捷工具。Web是在1989年由TimBL在瑞士日內(nèi)瓦的歐洲粒子物理研究所（CERN）開發(fā)出來的，它解決了文檔信息的電子化鏈接問題，使得全球的人們都可以通過互聯(lián)網(wǎng)方便、快捷地存取可共享的信息。但是，伴隨著Web應(yīng)用的不斷深化，人們的需求越來越高，已經(jīng)不滿足于靜態(tài)文檔的獲取，需要更加主動的數(shù)據(jù)操控能力，同時，開發(fā)效率也是決定Web應(yīng)用成功與否的重要標志。因此，從Web的應(yīng)用需求出發(fā)，探索Web開發(fā)技術(shù)發(fā)展的路徑，讓程序員深刻理解MVVM設(shè)計模式的優(yōu)勢，對于縮短Web的開發(fā)周期和提高程序員的開發(fā)水平具有現(xiàn)實意義。

1 Web系統(tǒng)的構(gòu)成

數(shù)萬個Web站點透過超級連接（Hyper link）實現(xiàn)了全球資源的互相連接，每個站點都設(shè)計了自己的主頁（Home Page）。從技術(shù)角度上說，環(huán)球信息網(wǎng)是Internet上支持WWW協(xié)議和超文本傳輸協(xié)議HTTP（Hyper Text Transport Protocol）的客戶機與服務(wù)器的集合，他們共享的超媒體文件包括了文字、圖形、聲音、動畫、資料庫、以及各式各樣的軟件。因此Web系統(tǒng)包含三個主要的要素：客戶機、服務(wù)器、傳輸協(xié)議。

1.1 客戶機

客戶機是運行在信息需求方主機上的應(yīng)用進程，它主動向服務(wù)器發(fā)出請求，等待接收服務(wù)。它除了向Web服務(wù)器發(fā)出請求外，還可以向諸如Gopher、FTP、news、mail等多種服務(wù)器發(fā)出請求。目前Web客戶機被統(tǒng)一設(shè)計為瀏覽器，瀏覽器是多種觀察器的集成應(yīng)用，它可以解釋執(zhí)行從服務(wù)器上下載下來的特定類型的文件。通?？蛻魴C的任務(wù)包括：1）通過超級鏈接觸發(fā)一個服務(wù)請求；2）將該服務(wù)請求發(fā)送給指定的服務(wù)器；3）將從服務(wù)器上下載下來的網(wǎng)頁解釋呈現(xiàn)。

1.2 服務(wù)器

服務(wù)器是運行在信息提供方主機上的應(yīng)用進程，服務(wù)器被動等待客戶機請求，提供信息應(yīng)用服務(wù)。一個Web服務(wù)器的主要任務(wù)如下：1）接受請求；2）檢查請求的合法性，包括安全性屏蔽；3）針對請求獲取并制作網(wǎng)頁，其包括Java腳本和程序、CGI腳本和程序、HTML文本；4）把信息處理結(jié)果以網(wǎng)頁形式發(fā)送給提出請求的客戶機。

1.3 協(xié)議

協(xié)議是客戶機與服務(wù)器之間實現(xiàn)互操作性或傳遞文檔的各種方法的定義。HTTP（HyperText Transfer Protocol）協(xié)議是為了傳遞超文本標記語言HTML（Hyper text Markup Language）而誕生的，它使用統(tǒng)一資源定位器URL（Uniform Resource Locator）來確定文檔在環(huán)球信息網(wǎng)上的“地址”。HTTP協(xié)議的特點是：單向訪問、無連接和無狀態(tài)（連接本身不帶有上下文信息）。

2 Web前端開發(fā)技術(shù)與開發(fā)模式的演化

Web開發(fā)技術(shù)的演化是由用戶需求和計算機技術(shù)的發(fā)展雙重動力作用的結(jié)果。Web開發(fā)技術(shù)最早由TimBerners-Lee 創(chuàng)建的一種新的語言HTML來傳輸和呈現(xiàn)超文本文檔開始， 之后人們又希望網(wǎng)頁能夠生動起來，于是JAVA編程語言應(yīng)用在Web中，使得主頁具有動態(tài)效果。為了提高開發(fā)效率和效果，前端開發(fā)技術(shù)經(jīng)歷了“后端開發(fā)為主→前端開發(fā)為主→前后端分離”的開發(fā)模式變遷路徑。

2.1 后端開發(fā)為主的模式

早期網(wǎng)頁開發(fā)由后端主導(dǎo)，起初制約web開發(fā)偏重后端的因素很簡單，一方面，因為前端瀏覽器性能弱、標準化低；另一方面，客戶端應(yīng)用需求也較低，前端只是簡單操作一下DOM元素。最初web僅僅是一個信息管理系統(tǒng)，其核心對象之一就是文檔（document），而不是叫做app或者canvas，或者world，文檔的鏈接并不需要持續(xù)的交互，只需要一次性能夠下載文檔即可。因此，網(wǎng)頁的開發(fā)只需要用HTML將文檔內(nèi)容按照標題、段落等標簽組織起來就可滿足需求，因為HTML的標簽可以控制文檔的樣式。

2.2 前端開發(fā)的誕生

隨著Web的應(yīng)用，早期的document進化成了Web Page， 前端需要更好的排版，于是CSS誕生了，它實現(xiàn)了web結(jié)構(gòu)與樣式的分離；同時，為了使客戶端能獲得簡單的數(shù)據(jù)校驗?zāi)芰蚫om的操作能力，js誕生了，賦予了web頁面處理自身行為的能力。

在技術(shù)上，1999年W3C發(fā)布了第四代HTML標準，同年微軟推出用于異步數(shù)據(jù)傳輸?shù)腁ctiveX，隨即各大瀏覽器廠商模仿實現(xiàn)了XMLHttpRequest對象。這標記著Ajax的萌芽，但是Ajax這個詞在六年真正問世的，谷歌使用Ajax技術(shù)打造了Gmail和谷歌地圖之后，Ajax獲得了業(yè)內(nèi)巨大關(guān)注，2006年，XMLHttpRequest被W3C正式納入標準。Ajax是Web網(wǎng)頁邁向web應(yīng)用的一個里程碑技術(shù)， document的內(nèi)容可以被替換了，前后端的交互擺脫了document à http request à new document的單一模式。標識著Web2.0時代的到來。

2.3 前后端分離的開發(fā)模式

因為前端計算能力的大幅度提升，前端能力的大量過剩，使得越來越多的業(yè)務(wù)邏輯向前端遷移，后端將不再接觸任何HTML和模板，只負責(zé)數(shù)據(jù)的提供，剩下業(yè)務(wù)邏輯的事交由前端完成。后端將一部分計算壓力遷移給了前端，越來越與業(yè)務(wù)邏輯無關(guān)，后臺被抽離出來，抽象成了云服務(wù)。后端就變成了一個數(shù)據(jù)庫和權(quán)限系統(tǒng)，也就促成了后端云服務(wù)化。endprint

2008年，谷歌V8引擎問世，一舉改變了瀏覽器計算力不足的困境，現(xiàn)代瀏覽器開始崛起，終結(jié)了微軟的壟斷時代。瀏覽器性能的大幅度提升，使得前端計算能力一下子變得過剩了，這也意味著前端應(yīng)該承擔(dān)起更多業(yè)務(wù)工作了。標準組織也在2009年發(fā)布了第五代javaScript[1]；2014年，發(fā)布第五代HTML標準，前端的裝備得到了前所未有的提升，web前端開發(fā)進入了令人目不暇接的新時代。除此之外，2009年Angular.js誕生，隨后被谷歌收購。2010年，backbone.js誕生。2011年，React和Ember誕生。2014年，Vue.js誕生……

前端開始承擔(dān)越來越多的業(yè)務(wù)壓力，開發(fā)的復(fù)雜度也在逐步上升，如果依然保持原有的單純對dom操作的開發(fā)模式，將使得前端開發(fā)效率低下，代碼難以維護。所以前端需要變得模式化、模塊化、工程化。“數(shù)據(jù)綁定”、“深入響應(yīng)式”、“虛擬dom”等前端新概念開始提出。于是各種前端構(gòu)建工具開始誕生，各種前端框架雨后春筍般問世，前端開發(fā)工具一時間從“石器時代”開始向“工業(yè)時代”邁步。

在如今，前端主流框架主要由Angular，React.js、Vue.js三足鼎立。React.js專注view層，而新版Angular和Vue.js都分別用不同的方式采用了MVVM的模式來實現(xiàn)其的核心邏輯。對于web前端來說，MVVM設(shè)計模式契合如今前端開發(fā)的需求，MVVM模式也將引導(dǎo)前端開發(fā)趨勢。

3 MVVM設(shè)計模式特征

MVVM（模型-視圖-視圖模型）起源于MVC和MVP的架構(gòu)模式，ViewModel大致上就是MVP的Presenter和MVC的Controller，但是不同的是View與ViewModel之間不存在MVP的界面接口，而是采取的直接交互，利用數(shù)據(jù)“雙向綁定”的形式讓數(shù)據(jù)更新不需要開發(fā)人員手動去調(diào)用觸發(fā)，而是自動的雙向同步，減少了對DOM的頻繁操作。MVVM的設(shè)計模式更清晰地將用戶界面（UI）開發(fā)從應(yīng)用程序的業(yè)務(wù)邏輯與行為中分離。利用聲明式數(shù)據(jù)綁定來實現(xiàn)View層工作從其他層分離。

3.1 MVVM設(shè)計模式推出的前提

隨著前端應(yīng)用的復(fù)雜程度逐漸上升，這時前端開發(fā)開始暴露出了三個痛點：首先，開發(fā)者在代碼中大量調(diào)用相同的DOM API，操作冗余繁瑣，代碼維護性低；其次，大量的DOM操作使得頁面渲染性能降低，加載速度變慢，用戶體驗降低；最后，當 Model 頻繁發(fā)生變化，開發(fā)者需要主動更新到View ；當用戶的操作導(dǎo)致 Model 發(fā)生變化，開發(fā)者同樣需要將變化的數(shù)據(jù)同步到Model 中，這樣的工作不僅繁瑣，而且很難維護復(fù)雜多變的數(shù)據(jù)狀態(tài)

3.2 MVVM的組成

MVVM由Model、View、ViewModel三部分組成，Model層代表數(shù)據(jù)模型，View層代表UI組件，ViewModel則是一個同步Model和View的對象。

1） MODel。和其余的MV*家族的成員一樣，MVVM中的Model（模型）管理著應(yīng)用程序的數(shù)據(jù)，可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯，Model不涉及用戶界面，也不涉及表示層。它們不會影響數(shù)據(jù)在瀏覽器里的顯示方式。

2） View。與MVC一樣，View為與用戶交互的應(yīng)用程序的一部分，負責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成交互式UI展現(xiàn)給用戶，描繪ViewModel的狀態(tài)。MVVM的主動View包括數(shù)據(jù)綁定、事件和行為，需要對ViewModel有了解。雖然這些行為會被映射到屬性里，但是View層仍只負責(zé)處理ViewModel的事件。View并不負責(zé)處理狀態(tài)，僅僅只是時刻讓狀態(tài)保持與ViewModel同步。

3） ViewModel。ViewModel（視圖模型）是MVVM模式的核心部分，可以把ViewModel看做為一個專門的Controller，充當View與Model之間的數(shù)據(jù)轉(zhuǎn)換器。它將Model的信息轉(zhuǎn)變成View信息，還將命令從View傳遞到Model上。

在MVVM架構(gòu)下，View和Model并沒有直接的聯(lián)系，而是通過ViewModel來交互。View與ViewModel的交互是雙向的，因此view的變化會同步到Model上去，而Model的數(shù)據(jù)變化也會立即反應(yīng)到View上去。

ViewModel通過雙向的數(shù)據(jù)綁定連接View層與Model層，View與Model之間的同步工作完全是自動的，無需人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動操作DOM， 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護完全由 MVVM 來統(tǒng)一管理。

4） MVVM的優(yōu)勢

實現(xiàn)雙向數(shù)據(jù)綁定是MVVM的最重要優(yōu)勢。在前端開發(fā)的時候，獲取數(shù)據(jù)后，會將數(shù)據(jù)渲染到視圖上。然后在每次數(shù)據(jù)發(fā)生改變的時候，將重新進行渲染，從而更新視圖，使得視圖與數(shù)據(jù)保持一致。而另一方面，頁面也會通過用戶的交互，產(chǎn)生狀態(tài)、數(shù)據(jù)的變化，這時需要將視圖對數(shù)據(jù)的更改同步到數(shù)據(jù)中去。在不同的前端框架中，實現(xiàn)雙向數(shù)據(jù)綁定的技術(shù)有所不同，典型的做法如下：

5） Angular采用了一種“臟值檢查”的方式，當數(shù)據(jù)發(fā)生變化之后，對所有的數(shù)據(jù)和視圖的綁定關(guān)系進行一次檢測，檢測是否有數(shù)值發(fā)生了變化，有變化的進行處理，但是可能引發(fā)其他數(shù)據(jù)的改變，所以可能會導(dǎo)致這個過程觸發(fā)多次循環(huán)，一直到數(shù)據(jù)不再有變化的時候，將變更好了的數(shù)據(jù)發(fā)送到視圖，更新視圖的展現(xiàn)。

6） Vue.js則采用了ES5提供的Object.defineProperty（）方法，監(jiān)控對數(shù)據(jù)的操作，從而可以自動觸發(fā)數(shù)據(jù)同步。由于是在不同數(shù)據(jù)上觸發(fā)同步的，可以精確的把變更發(fā)送給綁定的相應(yīng)視圖，而不需要循環(huán)所有的數(shù)據(jù)監(jiān)測。

由于雙向數(shù)據(jù)綁定，開發(fā)者只需要在View層的視圖模板上聲明數(shù)據(jù)綁定、事件綁定后，在ViewModel中進行業(yè)務(wù)邏輯的數(shù)據(jù)處理。開發(fā)者只需要關(guān)注業(yè)務(wù)的邏輯，完成數(shù)據(jù)抽象、聚焦于數(shù)據(jù)的處理之中。因為數(shù)據(jù)驅(qū)動，一切變得簡單。

4 結(jié)束語

前端MVVM已成趨勢，是大型web應(yīng)用開發(fā)效率提升的大利器，是前端邁向模塊化、工程化的一個重要的設(shè)計思想?；仡橶eb的發(fā)展歷史，就是對web編程的抽象層次不斷提高的一個過程，更高的抽象層次降低了編程的復(fù)雜性，提高開發(fā)效率，編寫易迭代、易維護的代碼。每次技術(shù)發(fā)展到一定階段，新的技術(shù)需求產(chǎn)生，出現(xiàn)某些局限性的時候，就會有更優(yōu)秀的技術(shù)來突破這些局限性。其實這是計算機技術(shù)發(fā)展的一個普遍規(guī)律，需要所有的開發(fā)者一同面對這一次次嚴峻的技術(shù)考驗，迎接這一次次的新技術(shù)浪潮。

參考文獻：

[1] Addy Osmani. javaScript設(shè)計模式[M]. 徐濤， 譯. 北京： 人民郵電出版社， 2013.endprint