web 前端主流框架分析與對(duì)比

廖家莉 曹 俊

（四川托普信息技術(shù)職業(yè)學(xué)院，四川 成都 611743）

【關(guān)鍵字】前端；框架；Bo o ts tra p；A n g u l a r；V u e

0 引言

項(xiàng)目開發(fā)一般會(huì)使用到框架， 框架可以重復(fù)使用，運(yùn)行速度快，提高項(xiàng)目開發(fā)效率，減少不必要的DOM 操作，兼容性問題好，還可以花更多時(shí)間關(guān)注業(yè)務(wù)邏輯以前一般使用MVC 模式開發(fā)項(xiàng)目， 數(shù)據(jù)模型不變，視圖包含業(yè)務(wù)邏輯，業(yè)務(wù)邏輯無法重用，控制器的壓力特別大。 現(xiàn)在前端的框架大多都是MVVM 模式，可以大大減輕控制器的壓力，還真正地實(shí)現(xiàn)了頁面與數(shù)據(jù)邏輯分離，業(yè)務(wù)邏輯可重復(fù)使用。 前端框架不僅有CSS 框架還有JS 框架， 下面將簡(jiǎn)單分析對(duì)比Bootstrap、Foundation、Angular.js、Vue.js 這四個(gè)框架。

1 前端C S S 框架

1.1 Bootstrap 框架

Bootstrap 框架是 2011 年發(fā)布的一款基于HTML、CSS、JavaScript 開發(fā)的開源前端 CSS 框架，支持組件與組件定制， 可以用于快速構(gòu)建響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的web 項(xiàng)目。現(xiàn)在很多公司開發(fā)項(xiàng)目都會(huì)用到Bootstrap 框架，Bootstrap 框架支持響應(yīng)式柵格系統(tǒng)、全局CSS 樣式、CSS 組件和JavaScript 插件等功能。 其中，柵格系統(tǒng)是將屏幕分成12 份，可以按份數(shù)自由組合，再結(jié)合媒體查詢實(shí)現(xiàn)不同屏幕下顯示不同效果，特別適合現(xiàn)在手機(jī)電腦普及的時(shí)代，用戶可以在不同終端看到同一項(xiàng)目的不同的布局效果，用戶體驗(yàn)非常好。 Bootstrap 框架的全局CSS 樣式包括標(biāo)題、段落、列表、表格、按鈕、圖片、輔助類等樣式，使用非常方便簡(jiǎn)單， 只需要設(shè)置類名就可以使用其樣式。Bootstrap 對(duì)表單、表單元素、表單驗(yàn)證也設(shè)置有樣式，表單驗(yàn)證不僅有顏色驗(yàn)證、文字驗(yàn)證，還有圖表驗(yàn)證。Bootstrap 還提供了大量CSS 組件，包括導(dǎo)航、下拉菜單、輸入框組、按鈕組、列表組、字體圖標(biāo)、巨幕、分頁、縮略圖、進(jìn)度條、媒體對(duì)象、面板等。 其中導(dǎo)航有非常多樣式，如選項(xiàng)卡導(dǎo)航、膠囊式導(dǎo)航、兩端對(duì)齊導(dǎo)航、路徑導(dǎo)航、反色導(dǎo)航、響應(yīng)式導(dǎo)航等。這些CSS 組件可以重復(fù)使用非常方便。Bootstrap 不僅有大量的CSS 組件，還提供了12 個(gè)JavaScript 插件，包括輪播圖、模態(tài)框、折疊、選項(xiàng)卡、下拉菜單、滾動(dòng)監(jiān)聽、彈出框、警告框、工具提示、按鈕等。 其中，輪播圖和模態(tài)框用得非常多，觸發(fā)簡(jiǎn)單，自己寫的代碼少。這就是框架的優(yōu)點(diǎn)不僅可以非常快速地搭建自己的網(wǎng)站， 寫的少做得多， 能完成項(xiàng)目80%左右的功能，Bootstrap 框架的風(fēng)格統(tǒng)一漂亮，適合做一些商業(yè)項(xiàng)目。

1.2 Foundation 框架與Bootstrap 框架對(duì)比

Foundation 框架也是CSS 框架， 如果懂Bootstrap框架， 就會(huì)覺得Foundation 框架非常簡(jiǎn)單，F(xiàn)oundation框架和Bootstrap 框架有很多相似的地方，F(xiàn)oundation框架也有柵格系統(tǒng)，基本的段落、標(biāo)題、列表、按鈕、面板等樣式，輪播圖、模態(tài)框、導(dǎo)航等效果。Foundation 框架還有側(cè)邊欄導(dǎo)航、響應(yīng)式視頻窗口、塊網(wǎng)格等功能，特別是側(cè)邊欄導(dǎo)航，可以將導(dǎo)航展開或收起，這一功能非常方便。 雖然 Foundation 框架有些功能比Bootstrap 框架做得更好，F(xiàn)oundation 框架比Bootstrap框架還更為輕量， 對(duì)移動(dòng)設(shè)備優(yōu)化也更好， 但是Foundation 框架的兼容性沒有Bootstrap 框架的好，開發(fā)者還是會(huì)選擇Bootstrap 框架，Bootstrap 框架已經(jīng)深入人心，根深蒂固，F(xiàn)oundation 框架無法撼動(dòng)Bootstrap框架的地位。

2 前端J S 框架

2.1 Angular.js

Angular.js 框架是2009 年發(fā)布的一款功能比較完整MVVM 模式的框架，包含的內(nèi)容豐富，很多公司開發(fā)項(xiàng)目都會(huì)選擇Angular.js 框架。 其核心特征是模型視圖、數(shù)據(jù)雙向綁定、模塊、指令、依賴注入、服務(wù)、路由等，可以用于創(chuàng)建高效、復(fù)雜、精致的單頁面應(yīng)用。 其中， 數(shù)據(jù)的雙向綁定通過臟檢查機(jī)制實(shí)現(xiàn)，$apply 實(shí)時(shí)更新數(shù)據(jù)，$watch 監(jiān)聽數(shù)據(jù)的變化， 模型和視圖之間的數(shù)據(jù)可以自動(dòng)同步，Angular.js 還可以通過$http 服務(wù)獲取服務(wù)器端的數(shù)據(jù)。 Angular.js 框架也可以通過模塊依賴實(shí)現(xiàn)數(shù)據(jù)共享。 Angular.js 框架提供了大量的內(nèi)置指令，如：程序控制類指令、數(shù)據(jù)綁定類指令、事件綁定類指令、狀態(tài)設(shè)置類指令、流程控制類、 加載處理類指令等， 其中ng-model、ng-repeat用得非常多，ng-repeat 可以遍歷數(shù)組和對(duì)象，購(gòu)物車、商品列表、成績(jī)表等都可以通過ng-repeat 實(shí)現(xiàn)，可以少寫很多代碼，非常方便簡(jiǎn)單。 Angular.js 還有自定義指令和服務(wù)，都可以提高代碼的復(fù)用性。其中，服務(wù)可以注入到不同控制器中重復(fù)使用，value（）和constant（） 創(chuàng)建的服務(wù)可以使多個(gè)組件同時(shí)使用一個(gè)變量或常量，provider（）是唯一可以配置信息的服務(wù)組件，在編譯時(shí)調(diào)用；factory（）是使用其返回的對(duì)象作為服務(wù)對(duì)象；service（）是將構(gòu)造函數(shù)作為服務(wù)對(duì)象。 $window和$location 是用得比較的多兩種內(nèi)置服務(wù)，$location主要用于獲取、 監(jiān)聽、 改變URL。 路由則可以同過URL 的改變實(shí)現(xiàn)視圖之間的切換，從而實(shí)現(xiàn)復(fù)雜的單頁面應(yīng)用開發(fā)。

2.2 Vue.js 與 Angular.js 對(duì)比

Vue.js 框架是2014 年發(fā)布的一款用于構(gòu)建用戶界面的漸進(jìn)式JavaScript 框架， 主要關(guān)注視圖層，API簡(jiǎn)單，容易上手，便于與第三方庫(kù)或既有項(xiàng)目整合，主要用于開發(fā)復(fù)雜的單頁面應(yīng)用程序和現(xiàn)在比較火的小程序。 Vue.js 框架與Angular.js 框架有很多相似之處，都能實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，都有指令、過濾器、路由，都可以用于開發(fā)單頁面應(yīng)用，甚至在環(huán)境配置時(shí)步驟都非常相似。 不過兩者的內(nèi)置指令前綴不同，Angular.js 的前綴是“ng-”，而 Vue.js 的前綴是“v-”；兩者實(shí)現(xiàn)數(shù)據(jù)雙向綁定的方式不同，Angular.js 通過臟檢查機(jī)制實(shí)現(xiàn)數(shù)據(jù)雙向綁定， 監(jiān)聽的越多實(shí)現(xiàn)越慢，而Vue.js 通過數(shù)據(jù)劫持，只要數(shù)據(jù)發(fā)生變化就通知訂閱者更新視圖，速度相對(duì)要快一點(diǎn)，特別是在數(shù)據(jù)多的時(shí)候，Vue.js 框架的優(yōu)勢(shì)更加明顯， 所以開發(fā)項(xiàng)目會(huì)傾向于Vue.js 框架。 雖然Angular.js 框架更成熟，功能更完整，但是Angular.js 框架的學(xué)習(xí)路線更陡峭，不能從1.0 版本升級(jí)到2.0 版本，而Vue.js 框架更簡(jiǎn)單靈活、更快速、依賴性小，性能好，第三方UI 庫(kù)很多可以節(jié)省很多開發(fā)時(shí)間，大大加快了訪問速度和提升用戶體驗(yàn)，開發(fā)者更容易接受。時(shí)間就是金錢，公司開發(fā)項(xiàng)目非常看中效率，Vue.js 框架簡(jiǎn)單，效率高，完成的滿意度也高，是項(xiàng)目開發(fā)的不二之選。

3 小結(jié)

框架的選擇非常重要， 框架是一個(gè)項(xiàng)目的骨架，一旦選好進(jìn)行項(xiàng)目開發(fā)后，都不會(huì)隨意更換，所以做項(xiàng)目前一定要選好框架。 框架對(duì)項(xiàng)目的入侵性非常大，如果需要更換，可能整個(gè)項(xiàng)目都需要重新構(gòu)建。現(xiàn)在不同功能的前端框架數(shù)不勝數(shù)，比如動(dòng)畫效果有專門的框架、 游戲開發(fā)也有相關(guān)的框架、App 開發(fā)的框架更多，web App 和混合App 的開發(fā)成本低、 維護(hù)更新簡(jiǎn)單、跨平臺(tái)性好，只是用戶體驗(yàn)沒有原生App 的好，但原生App 的開發(fā)成本高，維護(hù)更新復(fù)雜。 混合App 的成本低， 用戶體驗(yàn)比原生的只差那么一點(diǎn)，如果性能要求不是特別高，一般都會(huì)選擇混合App 技術(shù)來 開 發(fā) 。 混 合 App 的 相 關(guān) 技 術(shù) 有 ionic、uni-app、flutter、week 等， 其中，ionic 是基于 Angular.js 框架基礎(chǔ)之上的， 只是ionic 的環(huán)境配置比較復(fù)雜，uni-app則可以基于vue.js 開發(fā)小程序。 前端框架不僅可以用于開發(fā)復(fù)雜的單頁面應(yīng)用、App、小程序，前端框架也能完成很多后臺(tái)的功能了， 比如Angular.js 框架可以獲取服務(wù)器端數(shù)據(jù)，并對(duì)數(shù)據(jù)進(jìn)行操作。 2018 年，前端 TOP 100 中 Bootstrap 框架排第一，2020 年 Vue 框架排第一，Bootstrap 框架排第三。 Vue.js 框架和Bootstrap 框架在Github 的下載量也都名列前茅。Bootstrap 框架已深入人心，很多公司開發(fā)項(xiàng)目都會(huì)選擇 Bootstrap 框架。Angular.js、React.js、Vue.js 被稱為前端三大主流框架， 這三款框架都比較成熟，Angular.js功能多， 是比較完整的框架，Vue.js 框架結(jié)合了Angular.js 和 React.js 框架的優(yōu)點(diǎn)，API 簡(jiǎn)單， 更受開發(fā)者的青睞，現(xiàn)在使用更為廣泛。