web前端框架有：1、Angular，一種用於創(chuàng)建單一應(yīng)用程式介面的前端框架；2、react，一個(gè)用來(lái)建立使用者介面的JavaScript開(kāi)發(fā)框架；3、vue，一套用於建構(gòu)使用者介面的漸進(jìn)式JavaScript框架；4、Bootstartp，是基於HTML、CSS、JavaScript的前端框架；5、QUICK UI，一套企業(yè)級(jí)web前端開(kāi)發(fā)解決方案；6、SUI，一個(gè)前端元件庫(kù)。

本教學(xué)操作環(huán)境：windows7系統(tǒng)、Dell G3電腦。

web前端也被稱為“客戶端”，是關(guān)於用戶可以看到和體驗(yàn)的網(wǎng)站的視覺(jué)方面，即用戶所看到的一切網(wǎng)頁(yè)瀏覽器展示的內(nèi)容，涉及用戶可以看到，觸摸和體驗(yàn)的一切；即web前端包括web頁(yè)面的結(jié)構(gòu)、web的外觀視覺(jué)表現(xiàn)以及web層面的交互實(shí)現(xiàn)。

web前端框架有哪些

1、Angular

AngularJS由Misko Hevery 等人於2009年創(chuàng)建，後來(lái)嗍谷歌所收購(gòu)。它是一款優(yōu)秀的前端JS框架被應(yīng)用多多種產(chǎn)品中去。它不僅是一個(gè)理念先進(jìn)的前端開(kāi)發(fā)框架，也是端對(duì)端的解決方案。它遵循架構(gòu)設(shè)計(jì)中的MVC模式，提倡資料與邏輯處理元件的鬆散耦合。 AngularJS透過(guò)指令技術(shù)實(shí)現(xiàn)了對(duì)HTML的自然擴(kuò)展，以及透過(guò)編譯技術(shù)實(shí)現(xiàn)了資料模型與展現(xiàn)視圖的雙向自動(dòng)同步，減輕了複雜的DOM操作。另外它也對(duì)前端的自動(dòng)化測(cè)試技術(shù)提供了良好的支援。

Angular是一種用於創(chuàng)建單一應(yīng)用程式介面的前端框架，它有許多核心功能例如資料綁定，服務(wù)，指令以及依賴注入等等。它具有模組功能強(qiáng)大，擁有自訂命令等優(yōu)點(diǎn)

特性：

• 1.良好的應(yīng)用程式結(jié)構(gòu)

• #2.雙向資料綁定

• 3.指令

• 4.HTML模板

• 5.可嵌入、注入與測(cè)試

優(yōu)點(diǎn)：

• ##1.範(fàn)本功能強(qiáng)大豐富，自帶了極其豐富的angular指令。

• 2.是一個(gè)比較完善的前端框架，包含服務(wù)，模板，資料雙向綁定，模組化，路由，過(guò)濾器，依賴注入等所有功能；

• 3.自訂指令，自訂指令後可以在專案中多次使用。

• 4.ng模組化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復(fù)用的程式碼，對(duì)於敏捷開(kāi)發(fā)的團(tuán)隊(duì)來(lái)說(shuō)非常有幫助。

• 5.angularjs是網(wǎng)路巨人谷歌開(kāi)發(fā)，這也意味著他有一個(gè)堅(jiān)實(shí)的基礎(chǔ)和社群支持。

缺點(diǎn)：

• #1.angular入門很容易但深入後概念很多,學(xué)習(xí)中較難理解。

• 2.文檔範(fàn)例非常少,官方的文檔基本上只寫了api,一個(gè)例子都沒(méi)有,很多時(shí)候具體怎麼用都是google來(lái)的,或直接問(wèn)misko,angular的作者。

• 3.對(duì)IE6/7相容不算特別好,就是可以用jQuery自己手寫程式碼解決一些。

• 4.指令的應(yīng)用的最佳實(shí)踐教程少,angular其實(shí)很靈活,如果不看一些作者的使用原則,很容易寫出四不像的代碼,例如js中還是像jQuery的思想有很多dom操作。

• 5.DI依賴注入如果程式碼壓縮需要顯示宣告。

2、React

React，facebook出品，正式版推出是在2013年，比angular晚了4年，但得益於其創(chuàng)新式的VirtualDOM，性能上碾壓angularJS，一經(jīng)推出，火的一塌糊塗。特點(diǎn)很多，VirtualDOM、JSX、Diff演算法等，支援ES6語(yǔ)法，採(cǎi)用函數(shù)式編程，門檻稍高，但也更靈活，能讓開(kāi)發(fā)有更多可能性。

特性

• 1.聲明式設(shè)計(jì)：React採(cǎi)用宣告範(fàn)式，可以輕鬆描述應(yīng)用。

• 2.高效率：React透過(guò)DOM的模擬，最大限度地減少與DOM的互動(dòng)。

• 3.靈活：React可以與已知的函式庫(kù)或框架很好地配合。

優(yōu)點(diǎn)：

• #1.速度快：在UI渲染過(guò)程中，React透過(guò)在虛擬DOM中的微操作來(lái)實(shí)現(xiàn)對(duì)實(shí)際DOM的局部更新。

• 2.跨瀏覽器相容：虛擬DOM幫助我們解決了跨瀏覽器問(wèn)題，它為我們提供了標(biāo)準(zhǔn)化的API，甚至在IE8中都是沒(méi)問(wèn)題的。

• 3.模組化：為你程式編寫?yīng)毩⒌哪＝M化UI元件，這樣當(dāng)某個(gè)或某些元件出現(xiàn)問(wèn)題是，可以方便地進(jìn)行隔離。

• 4.單向資料流：Flux是用於在JavaScript應(yīng)用程式中建立單向資料層的架構(gòu)5.同構(gòu)、純粹的javascript：因?yàn)樗褜ひ娴呐老x(chóng)程式依賴的是服務(wù)端回應(yīng)而不是JavaScript的執(zhí)行，預(yù)先渲染你的應(yīng)用程式有助於搜尋引擎優(yōu)化。 6.相容性好：例如使用RequireJS來(lái)載入和打包，而B(niǎo)rowserify和Webpack適用於建立大型應(yīng)用。它們使得那些艱難的任務(wù)不再讓人望而生畏。缺點(diǎn)：React本身只是一個(gè)V而已，並不是一個(gè)完整的框架，所以如果是大型專案想要一套完整的框架的話，基本上都需要加上ReactRouter和Flux才能寫大型應(yīng)用。

3、Vue

Vue作為最後推出的框架（2014），借鑒了前輩angular和react的特點(diǎn)（如VirtualDOM、雙向資料綁定、diff演算法、響應(yīng)式屬性、組件化開(kāi)發(fā)等）並做了相關(guān)優(yōu)化，使其使用起來(lái)更加方便，更容易上手，比較少適合初學(xué)者。

特性：

• 1.輕量級(jí)的框架

• 2.雙向資料綁定

• 3.指令

• 4.外掛程式

優(yōu)點(diǎn)：

• 1.簡(jiǎn)單：官方文件很清晰，比Angular簡(jiǎn)單易學(xué)。

• 2.快速：非同步批次方式更新DOM。

• 3.組合：用解耦的、可重複使用的元件組合你的應(yīng)用程式。

• 4.緊湊：~18kbmin gzip，且無(wú)依賴。

• 5.強(qiáng)大：表達(dá)式無(wú)需宣告所依賴的可推導(dǎo)屬性(computedproperties)。

• 6.對(duì)模組友善：可以透過(guò)NPM、Bower或Duo安裝，不強(qiáng)迫你所有的程式碼都遵循Angular的各種規(guī)定，使用場(chǎng)景更加靈活。

缺點(diǎn)：

• #1.新生兒：Vue.js是一個(gè)新的項(xiàng)目，沒(méi)有angular那麼成熟。

• 2.影響度不是很大：google了一下，有關(guān)於Vue.js多樣性或說(shuō)豐富性少於其他一些有名的函式庫(kù)

• 3.不支援IE8。

4、Bootstartp

#Bootstrap是Twitter開(kāi)源的基於HTML、CSS、JavaScript的前端框架。它是為實(shí)現(xiàn)快速開(kāi)發(fā)網(wǎng)頁(yè)應(yīng)用程式而設(shè)計(jì)的一套前端工具包。它支援響應(yīng)式佈局，並在V3版本之後堅(jiān)持行動(dòng)裝置優(yōu)先。

Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)範(fàn)，它即是由動(dòng)態(tài)CSS語(yǔ)言Less寫成。 Bootstrap一推出後頗受歡迎，一直是GitHub上的熱門開(kāi)源項(xiàng)目，包括NASA的MSNBC（微軟全國(guó)廣播公司）的Breaking News都使用了該項(xiàng)目。國(guó)內(nèi)一些行動(dòng)開(kāi)發(fā)者較為熟悉的框架，如WeX5前端開(kāi)源框架等，也是基於Bootstrap原始碼進(jìn)行效能優(yōu)化而來(lái)。

官方網(wǎng)址：https://getbootstrap.com

中文網(wǎng)址：http://www.bootcss.com/

Bootstrap 特色

Bootstrap 非常流行，這要?dú)w功於它非常實(shí)用的功能和功能。主要核心功能特點(diǎn)如下：

1）跨裝置、跨瀏覽器

可以相容於所有現(xiàn)代瀏覽器，包括比較詬病的 IE7、8。當(dāng)然，本課程不再考慮 IE9 以下瀏覽器。

2）響應(yīng)式佈局

不但可以支援 PC 端的各種解析度的顯示，還支援行動(dòng)端 PAD、手機(jī)等螢?zāi)坏捻憫?yīng)式切換顯示。

3）提供的全面的元件

Bootstrap 提供了實(shí)用性很強(qiáng)的元件，包括：導(dǎo)航、標(biāo)籤、工具列、按鈕等一系列元件，方便開(kāi)發(fā)者呼叫。

4）內(nèi)建 jQuery 插件

Bootstrap 提供了許多實(shí)用性的 jquery 插件，這些插件方便開(kāi)發(fā)者實(shí)現(xiàn) Web 中各種常規(guī)特效。

5）支援 HTML5、CSS3

HTML5 語(yǔ)意化標(biāo)籤和 CSS3 屬性，都得到很好的支援。

6）支援 LESS 動(dòng)態(tài)樣式

LESS 使用變數(shù)、巢狀、操作混合編碼，編寫更快、更靈活的 CSS。它和 Bootstrap 能很好的配合開(kāi)發(fā)。

5、QUICK UI

QUICK UI一套完整的企業(yè)級(jí)web前端開(kāi)發(fā)解決方案，由基礎(chǔ)架構(gòu)、UI元件庫(kù)、皮膚包、範(fàn)例工程和文件等組成。使用QUICKUI開(kāi)發(fā)者可以大幅減少工作量提高開(kāi)發(fā)效率，快速建立功能強(qiáng)大、美觀、相容的web應(yīng)用系統(tǒng)。

6、MDC Web

Material Components for the web(MDC Web)，Google為Web設(shè)計(jì)的全新前端框架。 MDC Web幫助開(kāi)發(fā)人員執(zhí)行Material Design，元件由Google的核心工程師團(tuán)隊(duì)和UX設(shè)計(jì)人員開(kāi)發(fā)。這些元件可以建立可靠的開(kāi)發(fā)工作流程以建立美觀且功能強(qiáng)大的Web專案。

7、Pure

#

Bootstrap，Patternfly和MDC Web功能非常強(qiáng)大的CSS框架，但非常繁瑣複雜。如想要一個(gè)輕量級(jí)的CSS框架建議嘗試Pure.css，本身更接近CSS編程，但又可以幫助建立一個(gè)不錯(cuò)的網(wǎng)頁(yè)。 Pure是具有最小佔(zhàn)用空間的輕量級(jí)CSS框架由Yahoo開(kāi)發(fā)根據(jù)BSD許可是開(kāi)源。

8、Foundation

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

9、Bulma

Bulma基於Flexbox的開(kāi)源框架可根據(jù)MIT許可證開(kāi)源。一個(gè)非常輕量級(jí)的框架，只需要一個(gè)CSS檔案。 Bulma擁有簡(jiǎn)潔明了的文件可輕鬆選擇想要的主題。還具有許多Web元件可以在設(shè)計(jì)中使用它們。

10、Skeleton

輕量級(jí)框架Skeleton。 Skeleton庫(kù)只有大約400行，且該框架僅提供一些基本的CSS框架組件。 Skeleton也提供了詳細(xì)的文件來(lái)幫助快速上手。

11、Materialize

Materialize 是基於Material Design風(fēng)格的現(xiàn)代化的響應(yīng)式前端框架，解決了最繁重的工作，結(jié)合的自訂元件為提供預(yù)設(shè)的樣式。 Materialize的文件頁(yè)面非常全面且容易遵循。其組件頁(yè)麵包括按鈕，卡片，導(dǎo)航等。

12、Bootflat

Bootflat是從Twitter的Bootstrap衍生的開(kāi)源CSS框架。與Bootstrap相比Bootflat更簡(jiǎn)單更輕量級(jí)。大部分都是圖像沒(méi)有太多的文字。

13、PatternFly

PatternFly是Red Hat的開(kāi)源CSS框架，和Bootstrap不同的是Bootstrap是為那些想要建立漂亮網(wǎng)站的人而設(shè)計(jì)，而PatternFly主要專注於企業(yè)應(yīng)用程式開(kāi)發(fā)人員提供諸如條形圖、圖表、導(dǎo)航之類的元件，實(shí)際上Red Hat就是使用它創(chuàng)建了OpenShift。除了靜態(tài)HTML，PatternFly還支援ReactJS框架，這是Facebook開(kāi)發(fā)的熱門JavaScript框架。 PatternFly具有許多適用於企業(yè)級(jí)應(yīng)用程式的高階元件，如長(zhǎng)條圖，圖表，模式和佈局。

14、flex

Flex目前仍在孵化階段，還不是Apache的正式項(xiàng)目，F(xiàn)lex4.8也不是正式的Apache版本。 ，這個(gè)版本標(biāo)誌著Flex新時(shí)代的開(kāi)始，F(xiàn)lex的未來(lái)將由社群來(lái)驅(qū)動(dòng)而不是由一家公司驅(qū)動(dòng)。開(kāi)發(fā)者可以透過(guò)貢獻(xiàn)程式碼來(lái)幫助改進(jìn)Flex，如修復(fù)bug、增加功能等。

以上就是小千分享的Web前端開(kāi)發(fā)常用的一些框架。程式設(shè)計(jì)師可以根據(jù)自己的業(yè)務(wù)需求選擇簡(jiǎn)潔直覺(jué)、功能強(qiáng)大的前端開(kāi)發(fā)框架，讓自己的工作更快速簡(jiǎn)單，並提升開(kāi)發(fā)的效率。

15、SUI

「SUI 是一套基於bootstrap開(kāi)發(fā)的前端元件庫(kù)，同時(shí)它她也是一套設(shè)計(jì)規(guī)格。透過(guò)SUI，可以非常方便的設(shè)計(jì)和實(shí)現(xiàn)精美的頁(yè)面」。果然還是直接引用官方給的枯燥無(wú)味廣告要節(jié)省自己的腦細(xì)胞( 囧… )，當(dāng)然了就像廣告說(shuō)的，如果你之前用過(guò)Bootstrap， 那麼可以輕鬆轉(zhuǎn)向SUI，這可能就是淘寶給前端屌絲們的福利了。 。

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

官網(wǎng)：http://sui.taobao.org/sui/docs/index.html

（學(xué)習(xí)影片分享：web前端）

以上是web前端有哪些框架的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！