3.2　前端框架的演變

前端從最初的網頁制作開始，演變到現在框架和體系的逐步完善，每一次進步都是一個質的飛躍。通過梳理前端發展時間線，深入分析前端的從無到有、從有到優的過程，幫助讀者理解技術發展背后的脈絡。

3.2.1　最初的時代

在互聯網發展的早期，前后端開發是一體的，前端屬于后端的一部分。主要的流程是后端接受瀏覽器請求，然后生成靜態頁面，再返回給瀏覽器解析。

為了提升效率，逐漸形成了以后端為主的MVC時代。MVC中的模型Model負責提供和保存數據（與數據庫交互），視圖View負責展示界面和數據，控制器Controller負責數據處理和實現業務邏輯。使用這樣的架構，前后端職能劃分較為清晰，前端屬于MVC中的V，負責編寫頁面模板；后端負責數據和業務邏輯，讀取頁面模板，并使用處理后的數據填充模板中的變量，最后生成靜態頁面。

但這樣的模式依然存在一些問題，前端隸屬于后端，開發環境依賴后端，因其無法獨立，從而導致效率不高。當時的應用多以頁面展示為主，前端需要處理的工作較少，主要編寫HTML和CSS及少量JS文件，使得維護路由和處理業務邏輯等大量的工作堆積在后端。

3.2.2　前端的革命

AJAX的誕生徹底改變了這一切，在無須重新加載整個網頁的情況下，前端可以通過AJAX獲取后端數據，然后利用DOM操作更新網頁，以此達到動態加載的效果。

從此前端被獨立出來，實現了真正意義上的前后端分離。后端專注于提供數據處理，最后將數據打包成接口；前端負責開發界面和交互，通過獲取到的接口數據實現頁面的更新。

前端的工作內容開始慢慢增多，如處理各種業務邏輯、發送AJAX請求、處理返回的數據、操作DOM等，但瀏覽器提供的底層API相對復雜，還存在一定的兼容問題，促使前端的類庫得以發展。

3.2.3　類庫的繁榮

類庫解決了常用代碼的復用，并通過封裝降低了編程的復雜度，將一些常用的和復雜的功能模塊封裝成函數，并提供更加簡單的調用接口。它相當于許多功能的集合，用與不用取決于自身，使用它并不會影響代碼的結構。

其中最著名的類庫是jQuery，它極大地簡化了JavaScript的編程過程。它的主要功能涵蓋HTML元素的選取和操作，JS特效和動畫，CSS的操作、事件和AJAX的封裝，以及其他常用功能等。它還預留了擴展方法，方便將自定義的功能插件集合到其中。其他類似的類庫還有ExtJS、YUI、移動端的Zepto，以及各種針對Canvas的類庫等。

從本質上來看，類庫相當于一個封裝好的中間層，通過簡單友好的接口，間接地操作那些復雜的瀏覽器底層API接口，并在類庫內部解決兼容等問題，使開發更加便捷高效。但是，類庫的使用依托于開發者的技術文檔，所以在一定程度上增加了開發的學習成本。

類庫雖然可以很方便地實現各種功能，但這種開發模式缺乏規范。隨著業務量的增多，前端也需要處理數據、實現業務邏輯、生成視圖等。借鑒后端框架的經驗，前端的各種MVC框架也隨之而來。

3.2.4　框架的興起

前端的MVC與后端類似，數據模型Model負責與后端接口溝通，包括AJAX請求和數據的處理。視圖View包括原始的結構樣式和一部分控制頁面的JS，負責將Model中的數據渲染到頁面。控制器Controller作為數據和視圖的黏合劑，負責接受視圖的請求并轉發給合適的模型，獲取數據的變更并同步更新到視圖。

這樣的模型在理論上是可行的，但在實際開發中，前端框架大都在此基礎上進行了一些改進。目前主要的3個前端框架（Angular、React、Vue）普遍采用的都是MVVM模式。它們將“數據模型和視圖進行雙向綁定”的思想作為核心，View和Model之間沒有任何聯系，僅通過ViewModel進行交互，而且Model和ViewModel之間的交互是雙向的，因此視圖中數據的變化會同時修改數據源，而數據源中數據的變化也會立即反映到View上。

小程序框架采用了類似于MVVM的開發模式，作為一個響應式的數據綁定系統，在邏輯結構上將小程序分為視圖層和邏輯層。這兩層始終保持同步，只要在邏輯層上修改了數據，視圖層就會進行相應的更新，這與傳統的網頁開發的數據展示方式有很大不同。

在傳統的前端模式中，需要先構建頁面，然后通過監聽頁面的事件獲取數據，再通過DOM操作實現視圖的更新。而在MVVM的開發模式中，一切視圖的變化都是通過改變數據進行的，下面來看一個簡單的例子。

＜！——視圖層3-2.axml——＞

＜text class="title"＞Hello{{name}}！＜/text＞

＜view class="box"＞

＜button onTap="changeName"＞Click me！＜/button＞

＜/view＞

//邏輯層　3-2.js

Page（{//注冊一個頁面

data：{name：'taobao'}，//設置初始數據

changeName（）{this.setData（{name：'alipay'}）}//重設數據改變視圖

}）；

在上面的代碼中，框架自動將邏輯層data數據中的name與視圖層中的name進行了綁定，所以頁面一打開就會顯示“Hello taobao！”。當用戶觸發按鈕時，視圖層會發送changeName的事件給邏輯層，邏輯層找到該事件并執行，setData操作將data屬性進行數據重置（date中的name改為alipay）。因為在框架中數據與視圖已經被綁定了，所以改變數據后視圖會自動更新，頁面內容將變為“Hello alipay！”。

更多的數據綁定方式和事件綁定方法，在后面的章節中會進行詳細的介紹。