Web前端框架技術綜述

項陽陽

（武漢職業技術學院計算機技術與軟件工程學院 湖北省武漢市 430074）

1 引言

1995年，網景公司發布第一款商業瀏覽器Netscape Navigator，為了提高網頁互動性，網景公司設計出第一個能夠在瀏覽器端運行的腳本語言，命名為LiveScript。為了借助Java 語言的營銷效應，遂改名為JavaScript。1996年，微軟發布VBScript 和Jscript 兩個腳本語言，內置于其IE 瀏覽器中。為了確保JavaScript 占有市場領導地位，網景公司將JavaScript 提交到歐洲計算機制造商協會（ECMA）以便將其進行國際標準化，產生了ECMAScript。為了取得瀏覽器市場，網景公司在1998年成立了Mozilla 開源項目，準備開發下一代瀏覽器。2003年，蘋果公司發布了Safari。隨著瀏覽器產品越來越多，即使有了ECMAScript 標準，但是由于標準制定較晚，所以每個瀏覽器都有各自的標準。網頁開發人員需要對同一個功能編寫出多份代碼，以適應不同瀏覽器。直到2006年，John Resig 編寫出jQuery，封裝實現瀏覽器兼容的JavaScript 細節代碼，從此解決了網頁開發人員處理網頁兼容性問題的痛點，極大簡化了前端編程。直到今天jQuery 仍舊是使用最廣泛的框架之一。隨著MVC 設計模式廣泛應用于前端開發當中，Angular JS, Backbone JS, React JS, Vue JS 依次誕生并為大家所廣泛使用。本文將詳細介紹五種框架的原理及優缺點，為立志于與做前端開發的學生普及框架知識，同時給出學習和實踐中選擇框架的建議和啟示。

2 五大主流框架介紹

下面按照前端框架誕生的時間線，依次講解jQuery、Angular JS、BackBone JS、React JS、Vue JS 這五種廣泛流行的框架。

2.1 jQuery開發框架

jQuery 是JavaScript 的封裝，實現了常用功能的封裝和瀏覽器兼容問題的處理。設計宗旨是“write less, do more”，以簡潔的代碼實現較為豐富的功能[1]。這是一個輕量級的腳本，非常小巧，生產版本文件包僅有94.8KB[2]。目前已經發布了3 個系列的版本，用途較為廣泛的為1.12.4 版本和3.5 系列版本。很多網站提供了在線CDN 的jQuery 資源，只需要在HTML 代碼中添加語句即可完成引用，在后續的JavaScript 代碼里便可以使用jQuery 語法。在項目中使用jQuery 可以極大的減少JavaScript的代碼量。嚴格意義上來說jQuery 并不算是一個框架，而是一個JavaScript 庫，簡化了HTML DOM 對象的操作、遍歷、事件綁定、ajax 操作等。

2.2 Angular JS開發框架

Angular JS 是一個用 HTML 和 TypeScript 構建客戶端應用的平臺與框架，由Google 于2009年公布。為了應對“單頁面應用”（ 由一個外殼頁面和多個頁面片段組成，可以在頁面切換的時候添加加載動畫，用戶體驗的到提升）。該框架現在已經發布到第二個版本， 是典型的MVC 模式（模型model-視圖view-控制器controller）框架，支持雙向數據綁定；其中V 為視圖（View），使用html 實現的，用戶能夠看到的頁面； C 為控制器Controller，使用JavaScript 實現，主要為頁面的邏輯部分；M 為數據Model，頁面所包含的數據模型；當用戶瀏覽網頁時，即View 部分，發生和頁面交互，比如點擊鼠標、移動鼠標、滾動鼠標等事件之后，被C（控制器）捕獲進行相應的處理，處理完之后更新M（數據模型）。以上為MVC 模式的處理流程，MVC 模式中數據流動是單向的。如圖1 所示。

不再像之前的jquery 項目，所有的代碼融合在一起，顯得臃腫。引入了MVC 模式之后，分離了代碼邏輯和UI 層，使得代碼整潔清晰，便于修改和維護。第一個版本的AngularJS 已經略顯老舊， Angular 2.x 版本做了較大的改動。升級之后的AngularJS 迎來了新的生命，它提供了完整的文檔，并提供一個搭建環境的腳手架Angular CLI，可以生成應用和庫代碼，以及執行各種持續開發任務，如測試、打包和部署。該框架以模塊化的思想，建立了自己的指令系統[4]，要求開發人員按照框架規定的編碼方式進行編碼，因此用作團隊開發時，代碼的可維護性比較高。使用Angular 1.x 版本的開發人員需要重新學習Angular2.x 的版本，有一定的學習成本。

2.3 BackBone JS開發框架

BackboneJS 誕生時間2010年10月，整合了Underscore、Require JS、Handlebar，其中Underscore 是Javascript 庫，功能類似于jQuery，提供基本的功能函數庫，但是又非常輕量級，代碼只有17.1k；Require JS 是JavaScript 的一個模塊加載器，讓前端代碼也支持按需加載；Handlebar 是一個JavaScript 語義模板庫，通過對view 和data 的分離來快速構建Web 模板。Backbone JS 非常適合復雜的“單頁面應用”，它的出現為當時的開發人員提供了AngularJS 之外，更加輕量和友好的前端開發解決方案。Backbone實現了視圖組件化，該思想也是VueJS、ReactJS、Angular2 框架的基本思想，將復雜的View 視圖切割成小粒度的片段—自定義組件模版，分離事件綁定和數據綁定。將MVC 思想升華為MVVM 思想，更加清晰的進行Model->View->ViewModel 的數據綁定。如圖2 所示。

其中Model 仍舊為數據模型，ViewModel 作為中間層，又稱為組件模板，多個ViewModel 組成了View 視圖，將頁面分成多個小組件，分而治之，降低代碼的耦合度，防止命名空間的污染。將View 和Model 分離，提高了代碼復用，開發人員可以拆分稱細小的模塊獨立開發，提高工作效率。Backbone JS 框架在2014年左右非常受歡迎，很多大公司如Airbnb（現已更換為React JS 框架）、Linkedin（領英）都曾經使用該框架，百度貼吧也使用了BackboneJS 的部分功能。Web 前端技術日新月異，Backbone JS 這個框架略顯老態，但是它在JavaScript 前端框架演進歷史中扮演著舉足輕重的角色。

2.4 React JS開發框架

ReactJS 是FaceBook 公司于2013年開源[6]，最初的定位是提出UI 開發的新思路。英文資源比較豐富，其創新的開發理念受到很多開發者的推崇。ReactJS 最顯著的特點就是一切以JS 為中心，提供了一種新的語法：JSX，把HTML 使用JS 生成。采用組件化的思想，每個組件生命周期分成三個階段：掛載、渲染、卸載，每個階段支持多個生命周期函數，例如：constructor->componentWillMount->componentDidMount->componentWillUnmont 等。只支持單向數據綁定，數據的流向是父組件到子組件。提出Virtual DOM 概念，對于DOM 頻繁變化的場景，會通過其diff算法比較新舊兩個Virtual DOM 樹，找到最小差異的DOM 節點，重新渲染，擁有較好的性能。支持ES6，創新的JSX 增加了學習負擔，相對來說學習曲線比較陡峭。React JS 使用state 作為狀態管理，當state 發生變化時更新頁面。

2.5 Vue JS開發框架

VueJS 是尤雨溪2016年利用業余時間編寫，是一個MVVM 模式（Model-View-View Model）的框架；數據和視圖分離，可以達到“高內聚，低耦合”的目標[5]。既支持雙向數據綁定也可以單向數據綁定。最初的定位是盡可能的降低前端開發門檻，讓更多的人更快的上手開發，擁有非常多的中文資源。用戶只掌握Web 基礎知識（HTML，CSS，JS）即可進行Vue 的開發。提出了符合HTML 語法規則的模板語法，完成數據和視圖的綁定。其核心庫只關注視圖層，便于與第三方庫或者項目整合，對開發者非常友好。采用組件化思想，將前端頁面分成多個組件，每個組件的HTML，CSS，JS代碼集中放在一個以vue 為擴展名的文件中VueJS 已經積累了非常大的用戶群體，有非常豐富的生態圈[7]：Vue-cli 腳手架，狀態管理工具Vuex，路由管理器Vue Router，調試工具Vue devtools 等，用戶需要任意功能，只需要添加相應的庫即可，非常方便。組件實現圍繞其生命周期進行，共有5 個階段：beforeCreated->created->beforeMount->mounted->beforeDestory，不同階段可以調用生命周期對應的鉤子函數實現組件數據管理和DOM 渲染夠功能，非常靈活。

3 結語

本文主要介紹Web 框架的發展歷史，描述了5 種Web 前端框架。總結來說，如果開發項目是多頁面應用，且針對的用戶群為PC 端客戶，那么jQuery 能夠滿足需求；如果喜歡Typescript 語法的話，選擇Angular 2.x 是個不錯的選擇。Backbone 已經有點老舊，如果現在你還未使用過的該框架的話，那么不建議選擇該框架，可以嘗試應用Vue 或者React JS 如果非常認同ReactJS 技術思想，那么選擇該框架最好需要有一定的英文讀寫能力，方便閱讀文檔及與其他開發者交流；如果查看英文文檔非常吃力，那么直接選擇Vue 作為開發框架，非常容易上手。