Web前端框架技術(shù)綜述

項陽陽

（武漢職業(yè)技術(shù)學(xué)院計算機技術(shù)與軟件工程學(xué)院 湖北省武漢市 430074）

1 引言

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

2 五大主流框架介紹

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

2.1 jQuery開發(fā)框架

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

2.2 Angular JS開發(fā)框架

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

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

2.3 BackBone JS開發(fā)框架

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

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

2.4 React JS開發(fā)框架

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

2.5 Vue JS開發(fā)框架

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

3 結(jié)語

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