首頁 > web前端 > 前端問答 > web前端有哪些框架

web前端有哪些框架

青灯夜游
發布: 2022-08-23 15:31:56
原創
12326 人瀏覽過

web前端框架有:1、Angular,一種用於創建單一應用程式介面的前端框架;2、react,一個用來建立使用者介面的JavaScript開發框架;3、vue,一套用於建構使用者介面的漸進式JavaScript框架;4、Bootstartp,是基於HTML、CSS、JavaScript的前端框架;5、QUICK UI,一套企業級web前端開發解決方案;6、SUI,一個前端元件庫。

web前端有哪些框架

本教學操作環境:windows7系統、Dell G3電腦。

web前端也被稱為“客戶端”,是關於用戶可以看到和體驗的網站的視覺方面,即用戶所看到的一切網頁瀏覽器展示的內容,涉及用戶可以看到,觸摸和體驗的一切;即web前端包括web頁面的結構、web的外觀視覺表現以及web層面的交互實現。

web前端框架有哪些

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。

4、Bootstartp

#Bootstrap是Twitter開源的基於HTML、CSS、JavaScript的前端框架。它是為實現快速開發網頁應用程式而設計的一套前端工具包。它支援響應式佈局,並在V3版本之後堅持行動裝置優先。

Bootstrap提供了優雅的HTML和CSS規範,它即是由動態CSS語言Less寫成。 Bootstrap一推出後頗受歡迎,一直是GitHub上的熱門開源項目,包括NASA的MSNBC(微軟全國廣播公司)的Breaking News都使用了該項目。國內一些行動開發者較為熟悉的框架,如WeX5前端開源框架等,也是基於Bootstrap原始碼進行效能優化而來。

官方網址:https://getbootstrap.com

中文網址:http://www.bootcss.com/

Bootstrap 特色

Bootstrap 非常流行,這要歸功於它非常實用的功能和功能。主要核心功能特點如下:

1)跨裝置、跨瀏覽器

可以相容於所有現代瀏覽器,包括比較詬病的 IE7、8。當然,本課程不再考慮 IE9 以下瀏覽器。

2)響應式佈局

不但可以支援 PC 端的各種解析度的顯示,還支援行動端 PAD、手機等螢幕的響應式切換顯示。

3)提供的全面的元件

Bootstrap 提供了實用性很強的元件,包括:導航、標籤、工具列、按鈕等一系列元件,方便開發者呼叫。

4)內建 jQuery 插件

Bootstrap 提供了許多實用性的 jquery 插件,這些插件方便開發者實現 Web 中各種常規特效。

5)支援 HTML5、CSS3

HTML5 語意化標籤和 CSS3 屬性,都得到很好的支援。

6)支援 LESS 動態樣式

LESS 使用變數、巢狀、操作混合編碼,編寫更快、更靈活的 CSS。它和 Bootstrap 能很好的配合開發。

5、QUICK UI

QUICK UI一套完整的企業級web前端開發解決方案,由基礎架構、UI元件庫、皮膚包、範例工程和文件等組成。使用QUICKUI開發者可以大幅減少工作量提高開發效率,快速建立功能強大、美觀、相容的web應用系統。

6、MDC Web

Material Components for the web(MDC Web),Google為Web設計的全新前端框架。 MDC Web幫助開發人員執行Material Design,元件由Google的核心工程師團隊和UX設計人員開發。這些元件可以建立可靠的開發工作流程以建立美觀且功能強大的Web專案。

7、Pure

#

Bootstrap,Patternfly和MDC Web功能非常強大的CSS框架,但非常繁瑣複雜。如想要一個輕量級的CSS框架建議嘗試Pure.css,本身更接近CSS編程,但又可以幫助建立一個不錯的網頁。 Pure是具有最小佔用空間的輕量級CSS框架由Yahoo開發根據BSD許可是開源。

8、Foundation

Foundation聲稱是世界上最先進的響應式前端框架。它提供了用於建立專業網站的高級功能和教程。許多公司,組織都使用該框架,並且該框架具有大量可用的文件。

9、Bulma

Bulma基於Flexbox的開源框架可根據MIT許可證開源。一個非常輕量級的框架,只需要一個CSS檔案。 Bulma擁有簡潔明了的文件可輕鬆選擇想要的主題。還具有許多Web元件可以在設計中使用它們。

10、Skeleton

輕量級框架Skeleton。 Skeleton庫只有大約400行,且該框架僅提供一些基本的CSS框架組件。 Skeleton也提供了詳細的文件來幫助快速上手。

11、Materialize

Materialize 是基於Material Design風格的現代化的響應式前端框架,解決了最繁重的工作,結合的自訂元件為提供預設的樣式。 Materialize的文件頁面非常全面且容易遵循。其組件頁麵包括按鈕,卡片,導航等。

12、Bootflat

Bootflat是從Twitter的Bootstrap衍生的開源CSS框架。與Bootstrap相比Bootflat更簡單更輕量級。大部分都是圖像沒有太多的文字。

13、PatternFly

PatternFly是Red Hat的開源CSS框架,和Bootstrap不同的是Bootstrap是為那些想要建立漂亮網站的人而設計,而PatternFly主要專注於企業應用程式開發人員提供諸如條形圖、圖表、導航之類的元件,實際上Red Hat就是使用它創建了OpenShift。除了靜態HTML,PatternFly還支援ReactJS框架,這是Facebook開發的熱門JavaScript框架。 PatternFly具有許多適用於企業級應用程式的高階元件,如長條圖,圖表,模式和佈局。

14、flex

Flex目前仍在孵化階段,還不是Apache的正式項目,Flex4.8也不是正式的Apache版本。 ,這個版本標誌著Flex新時代的開始,Flex的未來將由社群來驅動而不是由一家公司驅動。開發者可以透過貢獻程式碼來幫助改進Flex,如修復bug、增加功能等。

以上就是小千分享的Web前端開發常用的一些框架。程式設計師可以根據自己的業務需求選擇簡潔直覺、功能強大的前端開發框架,讓自己的工作更快速簡單,並提升開發的效率。

15、SUI

「SUI 是一套基於bootstrap開發的前端元件庫,同時它她也是一套設計規格。透過SUI,可以非常方便的設計和實現精美的頁面」。果然還是直接引用官方給的枯燥無味廣告要節省自己的腦細胞( 囧… ),當然了就像廣告說的,如果你之前用過Bootstrap, 那麼可以輕鬆轉向SUI,這可能就是淘寶給前端屌絲們的福利了。 。

Github:https://github.com/sdc-alibaba/sui

官網:http://sui.taobao.org/sui/docs/index.html

(學習影片分享:web前端

以上是web前端有哪些框架的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板