web前端三大主流框架:1、Angular,是一種用於創建單一應用程式介面的前端框架,具有模組功能強大,擁有自訂命令等優點;2、react,是一個用來建立使用者介面的JavaScript開發框架,主要用於建立UI;3、vue,是一套用於建立使用者介面的漸進式JavaScript框架,Vue的核心庫只專注於視圖層,並且非常容易學習,非常容易與其它庫或已有專案整合。
本教學操作環境:windows7系統、Dell G3電腦。
近十年以來,IT產業發展火熱,衍生了許多新職業,例如UI設計師、開發工程師、軟體測試工程師等等,在眾多備受矚目的新生職業中,Web前端工程師是其中的一員。那麼Web前端三大主流框架是什麼呢?
web前端三大主流框架是Angular、React、Vue。
1、Angular
AngularJS由Misko Hevery 等人於2009年創建,後來嗑谷歌所收購。它是一款優秀的前端JS框架被應用多多種產品中去。它不僅是一個理念先進的前端開發框架,也是端對端的解決方案。它遵循架構設計中的MVC模式,提倡資料與邏輯處理元件的鬆散耦合。 AngularJS透過指令技術實現了對HTML的自然擴展,以及透過編譯技術實現了資料模型與展現視圖的雙向自動同步,減輕了複雜的DOM操作。另外它也對前端的自動化測試技術提供了良好的支援。
Angular是一種用於創建單一應用程式介面的前端框架,它有許多核心功能例如資料綁定,服務,指令以及依賴注入等等。它具有模組功能強大,擁有自訂命令等優點
特性:
1.良好的應用程式結構
2.雙向資料綁定
3.指令
4.HTML模板
5.可嵌入、注入和測試
優點:
1.模板功能強大豐富,自帶了極為豐富的angular指令。
2.是一個比較完善的前端框架,包含服務,模板,資料雙向綁定,模組化,路由,過濾器,依賴注入等所有功能;
3.自訂指令,自訂指令後可以在專案中多次使用。
4.ng模組化比較大膽的引入了Java的一些東西(依賴注入),能夠很容易的寫出可復用的程式碼,對於敏捷開發的團隊來說非常有幫助。
5.angularjs是網路巨人谷歌開發,這也意味著他有一個堅實的基礎和社群支持。
缺點:
1.angular入門很容易但深入後概念很多,學習中較難理解。
2.文檔範例非常少,官方的文檔基本只寫了api,一個例子都沒有,很多時候具體怎麼用都是google來的,或直接問misko,angular的作者。
3.對IE6/7相容不算特別好,就是可以用jQuery自己手寫程式碼解決一些。
4.指令的應用的最佳實踐教程少,angular其實很靈活,如果不看一些作者的使用原則,很容易寫出四不像的代碼,例如js中還是像jQuery的思想有很多dom操作。
5.DI依賴注入如果程式碼壓縮需要顯示聲明。
2、React
React,facebook出品,正式版推出是在2013年,比angular晚了4年,但得益於其創新式的VirtualDOM,性能上碾壓angularJS,一經推出,火的一塌糊塗。 特點很多,VirtualDOM、JSX、Diff演算法等,支援ES6語法,採用函數式編程,門檻稍高,但也更靈活,能讓開發有更多可能性。
特性
1.聲明式設計:React採用聲明範式,可以輕鬆描述應用。
2.高效率:React透過DOM的模擬,最大限度地減少與DOM的交互作用。
3.靈活:React可以與已知的函式庫或框架很好地配合。
優點:
1.速度快:在UI渲染過程中,React透過在虛擬DOM中的微操作來實現實際DOM的局部更新。
2.跨瀏覽器相容:虛擬DOM幫助我們解決了跨瀏覽器問題,它為我們提供了標準化的API,甚至在IE8中都是沒問題的。
3.模組化:為你程式編寫獨立的模組化UI元件,這樣當某個或某些元件出現問題是,可以方便地進行隔離。
4.單向資料流:Flux是用於在JavaScript應用程式中創建單向資料層的架構5.同構、純粹的javascript:因為搜尋引擎的爬蟲程式依賴的是服務端響應而不是JavaScript的執行,預先渲染你的應用程式有助於搜尋引擎優化。 6.相容性好:例如使用RequireJS來載入和打包,而Browserify和Webpack適用於建立大型應用。它們使得那些艱難的任務不再讓人望而生畏。缺點:React本身只是一個V而已,並不是一個完整的框架,所以如果是大型專案想要一套完整的框架的話,基本上都需要加上ReactRouter和Flux才能寫大型應用。
3、Vue
Vue作為最後推出的框架(2014年),借鑒了前輩angular和react的特點(如VirtualDOM、雙向資料綁定、diff演算法、響應式屬性、組件化開發等)並做了相關優化,使其使用起來更方便,更容易上手,比較少適合初學者。
特性:
1.輕量級的框架
2.雙向資料綁定
3.指令
4.插件化
優點:
1.簡單:官方文件很清晰,比Angular簡單易學。
2.快速:非同步批次方式更新DOM。
3.組合:用解耦的、可重複使用的元件組合你的應用程式。
4.緊湊:~18kbmin+gzip,無依賴。
5.強大:表達式無需聲明依賴的可推導屬性(computedproperties)。
6.對模組友善:可以透過NPM、Bower或Duo安裝,不強迫你所有的程式碼都遵循Angular的各種規定,使用場景更加靈活。
缺點:
1.新生兒:Vue.js是一個新的項目,沒有angular那麼成熟。
2.影響度不是很大:google了一下,有關於Vue.js多樣性或者說豐富性少於其他一些有名的庫
3.不支援IE8。
擴展知識:Vue.js與其他框架的差異?
1. 與AngularJS的區別
相同點:
都支援指令:內建指令和自訂指令。
都支援過濾器:內建過濾器和自訂過濾器。
都支援雙向資料綁定。
都不支援低端瀏覽器。
不同點:
1.AngularJS的學習成本高,例如增加了Dependency Injection特性,而Vue.js本身提供的API都比較簡單、直覺。
2.在效能上,AngularJS依賴對資料做髒檢查,所以Watcher越多越慢。
Vue.js使用基於依賴追蹤的觀察並且使用非同步佇列更新。所有的數據都是獨立觸發的。
對於龐大的應用來說,這個最佳化差異還是比較明顯的。
2. 與React的區別
相同點:
React採用特殊的JSX語法,Vue.js在元件開發中也推崇編寫.vue特殊檔案格式,對檔案內容都有一些約定,兩者都需要編譯後使用。
中心思想相同:一切都是組件,組件實例之間可以嵌套。
都提供合理的鉤子函數,可以讓開發者客製化地去處理需求。
都不內建列數AJAX,Route等功能到核心包,而是以插件的方式載入。
在元件開發中都支援mixins的特性。
不同點:
React依賴Virtual DOM,而Vue.js使用的是DOM模板。 React採用的Virtual DOM會對渲染出來的結果做髒檢查。
Vue.js在範本中提供了指令,過濾器等,可以非常方便,快速地操作DOM。
以上就是web前端三大主流框架是啥的詳細內容,更多請關注本站其它相關文章!