Web前端開發技術的演化與MVVM設計模式研究

李嘉　趙凱強　李長云

摘要：隨著Web應用的不斷深化，前端開發模式是提高開發質量和開發效率的關鍵要素?；赪eb系統組成，以計算機技術發展與Web應用需求為主線，系統梳理了前端開的演化過程：“后端開發為主→前端開發為主→前后端分離開發模式”，重點分析了當前主流MVVM設計模式的優勢，為Web開發者提供參考和借鑒。

關鍵詞：Web；開發模式；MVVM設計模式

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

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

1 Web系統的構成

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

1.1 客戶機

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

1.2 服務器

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

1.3 協議

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

2 Web前端開發技術與開發模式的演化

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

2.1 后端開發為主的模式

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

2.2 前端開發的誕生

隨著Web的應用，早期的document進化成了Web Page， 前端需要更好的排版，于是CSS誕生了，它實現了web結構與樣式的分離；同時，為了使客戶端能獲得簡單的數據校驗能力和dom的操作能力，js誕生了，賦予了web頁面處理自身行為的能力。

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

2.3 前后端分離的開發模式

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

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

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

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

3 MVVM設計模式特征

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

3.1 MVVM設計模式推出的前提

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

3.2 MVVM的組成

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

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

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

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

在MVVM架構下，View和Model并沒有直接的聯系，而是通過ViewModel來交互。View與ViewModel的交互是雙向的，因此view的變化會同步到Model上去，而Model的數據變化也會立即反應到View上去。

ViewModel通過雙向的數據綁定連接View層與Model層，View與Model之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM， 不需要關注數據狀態的同步問題，復雜的數據狀態維護完全由 MVVM 來統一管理。

4） MVVM的優勢

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

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

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

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

4 結束語

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

參考文獻：

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