如今的前端已經不再像以前一樣就是簡單的寫寫頁面和調調樣式而已，現在的前端越來越複雜，知識點越來越豐富。

要做WEB前端，就需要知道前端到底是什麼，需要學習那些知識；前端至少要懂的三個部分：HTML，CSS，JavaScript（簡稱JS），那首先先明確這三個概念：

HTML負責結構，網頁想要表達的內容由html書寫。

CSS負責樣式，網頁的美與醜由它來控制

JS負責互動，使用者和網頁產生的互動由它來控制。

web前端發展至今，演變出了無數的庫和框架；說到庫第一時間想到的是不是jquery？在小編剛接觸庫的時候也是從jQuery開始的；今天我們就來說說前端發展到現在都有哪些好用的庫框架。

2016年開始應該是網際網路飛速發展的幾年，同時也是Web前端開發非常火爆的一年，Web 前端技術發展速度讓人感覺幾乎不是繼承式的迭代，而是一次次的變革和創造。這一年中有很多熱門的前端開發框架，下面原始碼時代web小編為大家總結2016年至今最受歡迎的幾款前端框架。

在這網際網路飛速發展的資訊時代，技術的更新迭代也在加快。目前看來，火了十幾年的Java技術現在仍然是棵常青樹。回想兩年前初來咋到，也是想好好當一名java程式設計師，五年計劃都行想好了，最後還是陰差陽錯搞了前端。前端目前來看還是非常火的，隨著IT技術的百花齊放，新的前端框架不斷推出，但大多都還在狂吼的階段。其實一直以來對技術的理解是技術服務於業務和產品，產品又在不同程度的推進著技術的演進。Web、無線、物聯網、VR、PC從不同方向推進著技術的融合與微創新。程式設計師在不同業務場景下的角色互換。而隨著Node.js的出現語言的角色也在發生著轉變，js扮演了越來越重要的角色。也就有了茶餘飯後也把了解到的知識整理一下。

前端UI框架元件庫：

說到前端框架我第一印象中想起React、Vue和Angular，不知道你是否與我一樣想到這些，現在常用的有：Bootstrap、jQuery UI、BootMetro、AUI常用的還有很多、就不一一跟大家舉例出來了，因為很多朋友認為在不同專案開發中用到的前端框架不一樣，其實也有一款可以適用於多種專案開發的前端框架，只是沒發現。

用前端框架開發專案的原因？

這個應該是最好解決的問題，首先就是減少造輪子的想法，能夠快速的開發一款web應用對於公司來說都是非常願意開到的，在時間和成本之間就能夠節約很多的時間，這是其中一點，另外一點就是使用前端框架的元件功能，只要元件功能強大，什麼樣的專案都能夠開發（前提是：要熟悉前端框架的功能！），時間成本問題就能夠輕鬆解決。

沒有設計師也能做出精美頁面效果的前端框架

雖然市場中有很多的前端框架，但部分UI框架是屬於元件庫，然而QUICK UI跟當下流行的三大底層框架React、Vue和Angular不同，QUICK UI提供了一整套前端解決方案，包括前後端分離的開發框架、100多種功能強大的UI控制元件、幾十套精美的皮膚模板和近16萬字的開發文件，滿足你所以開發專案都不是問題。

前端框架庫：

1.Node.Js

地址：http://www.runoob.com/nodejs/nodejs-tutorial.html (中文網)
描述：Node.js是一個Javascript執行環境(runtime)。實際上它是對Google V8引擎進行了封裝。V8引 擎執行Javascript的速度非常快，效能非常好。Node.js對一些特殊用例進行了優化，提供了替代的API，使得V8在非瀏覽器環境下執行得更好。
　　Node.js是一個基於Chrome JavaScript執行時建立的平臺， 用於方便地搭建響應速度快、易於擴充套件的網路應用。Node.js 使用事件驅動， 非阻塞I/O 模型而得以輕量和高效，非常適合在分散式裝置上執行資料密集型的實時應用。

　　簡單的說 node.js 就是執行在服務端的 JavaScript。

　　Node.js 是一個基於Chrome javascript 執行時建立的一個平臺。

　　Node.js是一個事件驅動I/O服務端JavaScript環境，基於Google的V8引擎，V8引擎執行Javascript的速度非常快，效能非常好。

用途：
　　1. RESTful API（目前比較流行的介面開發風格）

　　這是NodeJS最理想的應用場景，可以處理數萬條連線，本身沒有太多的邏輯，只需要請求API，組織資料進行返回即可。它本質上只是從某個資料庫中查詢一些值並將它們組成一個響應。由於響應是少量文字，入站請求也是少量的文字，因此流量不高，一臺機器甚至也可以處理最繁忙的公司的API需求。

　　2. 統一Web應用的UI層

　　目前MVC的架構，在某種意義上來說，Web開發有兩個UI層，一個是在瀏覽器裡面我們最終看到的，另一個在server端，負責生成和拼接頁面。

不討論這種架構是好是壞，但是有另外一種實踐，面向服務的架構，更好的做前後端的依賴分離。如果所有的關鍵業務邏輯都封裝成REST呼叫，就意味著在上層只需要考慮如何用這些REST介面構建具體的應用。那些後端程式設計師們根本不操心具體資料是如何從一個頁面傳遞到另一個頁面的，他們也不用管使用者資料更新是通過Ajax非同步獲取的還是通過重新整理頁面。

　　3. 大量Ajax請求的應用

例如個性化應用，每個使用者看到的頁面都不一樣，快取失效，需要在頁面載入的時候發起Ajax請求，NodeJS能響應大量的併發請求。　　總而言之，NodeJS適合運用在高併發、I/O密集、少量業務邏輯的場景。

 

2.angular.Js（比較厲害，github排名也比較高）

地址：http://www.runoob.com/angularjs/angularjs-tutorial.html (中文網)
描述：AngularJS[1]  誕生於2009年，由Misko Hevery 等人建立，後為Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVVM、模組化、自動化雙向資料繫結、語義化標籤、依賴注入等等。
用途：通過描述我們應該就能很好的明白AngularJS的真實用途了，MVVM，模組化，自動化雙向資料繫結等等。除了簡單的dom操作外，更能體現Js程式設計的強大。當然應用應該視場合而定。
它的出現比較早，也是曾經比較流行的前端js框架，但是今年來隨著reactJS與VueJS的出現，它的熱度在慢慢降低。
 

3.JQuery Mobile

地址：http://www.w3school.com.cn/jquerymobile/    (中文網)
描述：Query Mobile是jQuery 在手機上和平板裝置上的版本。jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫，而且會釋出一個完整統一的jQuery移動UI框架。支援全球主流的移動平臺。jQuery Mobile開發團隊說：能開發這個專案，我們非常興奮。移動Web太需要一個跨瀏覽器的框架，讓開發人員開發出真正的移動Web網站。
用途：jQuery Mobile 是建立移動 web 應用程式的框架。
　　　　　　jQuery Mobile 適用於所有流行的智慧手機和平板電腦。

　　　　　　jquery Mobile 使用 HTML5 和 CSS3 通過儘可能少的指令碼對頁面進行佈局。

 

4.requirejs

地址：http://www.requirejs.cn/
描述：RequireJS的目標是鼓勵程式碼的模組化，它使用了不同於傳統<script>標籤的指令碼載入步驟。可以用它來加速、優化程式碼，但其主要目的還是為了程式碼的模組化。它鼓勵在使用指令碼時以module ID替代URL地址。
RequireJS以一個相對於baseUrl的地址來載入所有的程式碼。 頁面頂層<script>標籤含有一個特殊的屬性data-main，require.js使用它來啟動指令碼載入過程，而baseUrl一般設定到與該屬性相一致的目錄。

用途：模組化動態載入。
 

5.Vue.js(目前市場上的主流)

地址：http://cn.vuejs.org/
描述：Vue.js 是用於構建互動式的 Web  介面的庫。它提供了 MVVM 資料繫結和一個可組合的元件系統，具有簡單、靈活的 API。從技術上講， Vue.js 集中在 MVVM 模式上的檢視模型層，並通過雙向資料繫結連線檢視和模型。實際的 DOM 操作和輸出格式被抽象出來成指令和過濾器。相比其它的 MVVM 框架，Vue.js 更容易上手。
目前市場上比較流行的前後端分離的開發模式，大多前端都是vueJS做的，具體的優點請大家看官方文件。
 

6.backbone.js

地址：http://www.css88.com/doc/backbone/
描述：Backbone 為複雜Javascript應用程式提供模型(models)、集合(collections)、檢視(views)的結構。其中模型用於繫結鍵值資料和自定義事件；集合附有可列舉函式的豐富API； 檢視可以宣告事件處理函式，並通過RESTful JSON介面連線到應用程式。
 

7.React.js（gihub排名僅次於vue.js）

地址：http://reactjs.cn/react/docs/why-react.html
描述：React 是一個 Facebook 和 Instagram 用來建立使用者介面的 JavaScript 庫。很多人認為 React 是 MVC 中的 V（檢視）。我們創造 React 是為了解決一個問題：構建隨著時間資料不斷變化的大規模應用程式。為了達到這個目標，React 採用下面兩個主要的思想。

8.Amaze UI

Amaze UI是輕量級的前端應用框架，是國內比較流行的框架，比較適用於移動端響應式開發框架，可以按照專案要求生成專屬的UI框架庫進行使用，元件非常豐富，可以構建出漂亮的web頁面。

官網地址：http://amazeui.org/

三、視覺化元件

1.Echarts

地址：http://echarts.baidu.com/
描述：ECharts，一個純 Javascript 的圖表庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫ZRender，提供直觀，生動，可互動，可高度個性化定製的資料視覺化圖表。
 

2.tableau(收費)

地址：http://www.yuandingit.com/special/tableau/index.html
描述：Tableau 是桌面系統中最簡單的商業智慧工具軟體，Tableau 沒有強迫使用者編寫自定義程式碼，新的控制檯也可完全自定義配置。在控制檯上，不僅能夠監測資訊，而且還提供完整的分析能力。Tableau控制檯靈活，具有高度的動態性。
 

四、前端構建工具

1.gulp

地址：http://www.gulpjs.com.cn/
描述：易於使用
　　　　　　通過程式碼優於配置的策略，Gulp 讓簡單的任務簡單，複雜的任務可管理。

　　　　　　構建快速

　　　　　　利用 Node.js 流的威力，你可以快速構建專案並減少頻繁的 IO 操作。

　　　　　　外掛高質

　　　　　　Gulp 嚴格的外掛指南確保外掛如你期望的那樣簡潔高質得工作。

　　　　　　易於學習

　　　　　　通過最少的 API，掌握 Gulp 毫不費力，構建工作盡在掌握：如同一系列流管道。

2、ES or webPackage

1.Bootstrap中文網

先分享下，如果有想一起學習web前端，HTML5及JavaScript的可以來一下我的前端群733581373，好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的炫酷特效，及前端直播課程學習

Bootstrap，讓你的頁面更簡潔、直觀、強悍、移動裝置優先的前端開發框架,讓web開發更迅速、更簡單。它還提供了更優雅的HTML和CSS規範，它即是由動態CSS語言Less寫成。有著豐富的網格佈局系統以及豐富的可重用元件，還有強大的支援十幾的JavaScript、jQuery外掛以及元件定製等。

Bootstrap中文網地址：http://www.bootcss.com/

2. Layui

layer是一款口碑極佳的web彈層元件，是一款採用自身模組規範編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。layui 首個版本釋出於2016年秋，她區別於那些基於 MVVM 底層的 UI 框架，從核心程式碼到 API 的每一處細節都經過精心雕琢，非常適合介面的快速開發。

Layui官網地址：https://www.layui.com/

3.ElementUI

Element-Ul是餓了麼前端團隊推出的一款基於Vue.js 2.0 的桌面端UI框架，手機端有對應框架是Mint UI 。適合於Vue的UI框架；

官網地址：http://element-cn.eleme.io/#/zh-CN

4.Mint UI

Mint UI 是 由餓了麼前端團隊推出的 一個基於 Vue.js 的移動端元件庫，Mint UI 包含豐富的 CSS 和 JS 元件，能夠滿足日常的移動端開發需要。通過它，可以快速構建出風格統一的頁面，提升開發效率。

官網地址：http://mint-ui.github.io/

5.angular

AngularJS誕生於2009年,由Misko Hevery 等人建立,後為Google所收購。是一款優秀的前端JS框架,已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是MVW（Model-View-Whatever）、模組化、自動化雙向資料繫結、語義化標籤、依賴注入等等。

官網地址：http://www.angularjs.net.cn/

6.React

React 可以非常輕鬆地建立使用者互動介面。為你應用的每一個狀態設計簡潔的檢視,在資料改變時 React 也可以高效地更新渲染介面。React 起源於 Facebook 的內部專案，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設Instagram 的網站。做出來以後，發現這套東西很好用，就在2013年5月開源了。

官網地址：http://react-china.org/

7.vue.js

近幾年最火的前端框架當屬Vue.js了，Vue.js是一個構建資料驅動的 web 介面的漸進式框架。Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。很多使用過vue的程式設計師這樣評價它，“vue.js兼具angular.js和react.js的優點，並剔除了它們的缺點”。授予了這麼高的評價的vue.js，也是開源世界華人的驕傲，因為它的作者是位中國人--尤雨溪
 

幾款常用的高質量web前端框架

Web前端框架就是為了節約開發成本和時間，一般開發一個專案都會用到前端框架（除非自己有前端開發團隊），根據我經驗找的幾款web前端框架做出了分析。都是個人意見，仁者見仁智者見智。

QUICK UI

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

QUICK UI優勢：

①功能最為強大

QUICKUI經歷了7年的迭代更新，不斷從客戶的各種業務中對元件的需求進行歸納和抽離，從而打造新的元件和功能。現在最新的4.0版本框架包含了一百多種元件，一千多個應用場景示例。可以說在前端框架領域中，QUICKUI擁有功能最強大元件庫。

②執行最為穩定

　　很多其他的第三方UI控制元件在簡單場合使用OK，到了複雜的場景中就會出現很多問題，這種現象很常見，因為在元件設計時無法預料到所有的應用場合。而QUICKUI在7年間經歷了數千個專案實際檢驗，在各種複雜場景都應用過，並根據客戶的反饋不斷完善和調整。目前的第四代可以說是最穩定、最完美的版本。

③豐富精美的介面皮膚

　　跟其他web前端框架僅僅是一套元件庫不同，QUICKUI是一整套前端解決方案，擁有豐富的外觀介面解決方案。採用現今流行的扁平化設計理念，推出了包括登入、響應式web、工作桌面、地圖類、門戶風格、大屏展示風格等等幾百套製作精美、使用者體驗優秀的介面。這些介面是以QUICKUI皮膚包的形式釋出，使用和更換都非常方便。

④事無鉅細的開發文件

QUICKUI擁有16萬字+的開發文件，框架和元件的每一個功能點都有詳細的講解和程式碼示例，用於開發過程中隨時查閱。除了框架機制講解和元件使用教程，文件還涉及web前端開發的很多知識。仔細閱讀並結合框架使用的話，你很快就能成為web開發的高手。

⑤上手開發非常容易

QUICKUI採用元件化思想來構建元件，一個元件就是一兩句html的標籤，使用起來非常簡單。將開發人員從繁瑣的JS編碼中解脫出來，很大程度減少前臺編碼的出錯率；保留了HTML的佈局方式，從而快速進行頁面佈局。對開發者前臺技術要求也非常低，只需要瞭解html語法和一些簡單的JS即可，從而把更多精力放在業務功能的實現上，極大地提高開發效率。

⑥瀏覽器相容性非常好

QUICKUI4.0使用了很多HTML5，CSS3技術用於提高表現力和使用者體驗，這些新的特性在現代瀏覽器中會有很好的效果。但是，國內依然有大量的使用者在使用IE7、IE8等舊時代的瀏覽器，為照顧這部分使用者，框架採用了漸進式思想，確保低版本瀏覽器也能正常使用。所以，QUICKUI相容IE7以上所有主流瀏覽器。

flex

 

Apache基金會今天釋出了Flex4.8版本，這是Adobe將Flex捐獻給Apache基金會後釋出的第一個版本。

　　需要注意的是，Flex目前還在孵化階段，還不是Apache的正式專案，Flex4.8也不是一個正式的Apache版本。

Apache稱，該版本標誌著Flex新時代的開始，Flex的未來將由社群來驅動，而不是由一個公司驅動。開發者可以通過貢獻程式碼，來幫助改進Flex，如修復bug、增加功能等。

 

　　從Macromedia賣給Adobe，然後又捐給apache，不知道搞什麼名堂。不過還好沒有經過大幅重構，否則就真的是悲哀了！

 

extjs

 

ExtJS是一種主要用於建立前端使用者介面，是一個基本與後臺技術無關的前端ajax框架。

　　功能豐富，無人能出其右。

　　無論是介面之美，還是功能之強，ext的表格控制元件都高居榜首。

　　華麗的介面，靈活的功能，還有開發工具都是配套的，但有個最大的問題，用就得花錢！

 

easyui

 

easyui幫助你構建你的web應用更加容易。

　　它是一個基於jquery的外掛，開發出來的一套輕量級的ui框架，非常小巧而且功能豐富。

　　但是她有一個最大的問題就是程式碼只能找到以前的開源的版本，到了1.2以後的版本原始碼都是經過混淆的，如果遇到問題修改起來會非常麻煩！不過一個比較大的優勢是開源免費，並且介面做的還說的過去！

 

jQueryUI

 

jQueryUI是一套jQuery的頁面UI外掛，包含很多種常用的頁面空間，例如Tabs（如本站首頁右上角部分）、拉簾效果（本站首頁左上角）、對話方塊、拖放效果、日期選擇、顏色選擇、資料排序、窗體大小調整等等非常多的內容。　　功能非常全面，介面也挺漂亮的，可以整體使用，也可以分開使用其中的幾個模組，免費開源！

 

MiniUI

 

　　又一個基於jquery的框架，開發的介面功能都很豐富。

jQueryMiniUI–快速開發WebUI。

　　它能縮短開發時間，減少程式碼量，使開發者更專注於業務和服務端，輕鬆實現介面開發，帶來絕佳的使用者體驗。

　　使用MiniUI，開發者可以快速建立Ajax無重新整理、B/S快速錄入資料、CRUD、Master-Detail、選單工具欄、彈出皮膚、佈局導航、資料驗證、分頁表格、樹、樹形表格等典型WEB應用系統介面。

 

　　介面做的挺不錯，功能也挺豐富，但是有兩個比較大的問題，一個是收費，一個是沒有原始碼，說白了，不開源！基於這個開發如果想對功能做擴充套件就需要找他們的團隊進行升級！

DWZ

DWZ富客戶端框架(jQueryRIAframework),是中國人自己開發的基於jQuery實現的AjaxRIA開源框架.

 

　　設計目標是簡單實用,快速開發,降低ajax開發成本。

　　歡迎大家提出建議，我們將在下一版本中進一步調整和完善功能．共同推進國內整體ajax開發水平。

　　畢竟是國產的，支援一下，而且原始碼完全公開，可以選擇一下！不過效能怎麼樣不敢確定！

YUI

Yahoo!UILibrary (YUI)是一個開放原始碼的JavaScript函式庫，為了能建立一個高互動的網頁，它採用了AJAX,DHTML和DOM等程式碼技術。它也包含了許多CSS資源。使用授權為 BSD許可證，基本上沒怎麼研究過！YUICompressor倒是挺出名的，這套UI庫不知道應用的情況怎麼樣！

 

Sencha

Sencha是由ExtJS、jQTouch以及Raphael三個專案合併而成的一個新專案。

 

　　大公司的框架，並且是幾樣庫的強強聯合，值得推薦！

OperaMasks-UI

OperaMasks-UI是OperaMasks團隊2011下半年打造的一款輕量級前端JS元件庫，旨在提供一款學習曲線低、定製性靈活、樣式統一，且多瀏覽器支援、覆蓋企業業務場景的前端JavaScriptUI元件庫。目前，該團隊已將這一產品以LGPL開源協議開放給社群。

 

　　文件豐富，功能齊全，而且很容易使用和開發！而且是國產的喲！

 

　　以上排序是整理時的排序，一起整理分析一下，下次用的時候就不用到處找了，我想同樣的問題應該也存在在很多程式設計師身上，任何一款UI框架，只要能夠容易入手就行。