web前端有哪些框架

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

本教學操作環境：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中文網其他相關文章！