首先這些年關(guān)于前端技術(shù)層出不窮，從最早的只用js做簡(jiǎn)單驗(yàn)證，到現(xiàn)在發(fā)現(xiàn)好像大前端已經(jīng)無(wú)所不能了的感覺(jué)。特別是為了降低前端開(kāi)發(fā)復(fù)雜度，涌現(xiàn)了一大批 的MVC/MVVM模式的前端框架，不停了刷新我們的代碼組織結(jié)構(gòu)及開(kāi)發(fā)模式，比如：BackboneJS、EmberJS、KnockoutJS、 AvalonJS(國(guó)產(chǎn))、AngularJS、ReactJS等等。
Layui
Layui 是一款帶著濃烈情懷的國(guó)產(chǎn)前端UI框架，她追求極簡(jiǎn)，又不失豐盈的內(nèi)在，說(shuō)她是史上最輕量的結(jié)晶，似乎并不為過(guò)。一切都源自于她對(duì)原生態(tài)的執(zhí)著，對(duì)前端社區(qū)的那些噪雜聲音的過(guò)濾，以及她本身的精心雕琢。
amaze UI
Amaze UI 是中國(guó)首個(gè)開(kāi)源 HTML5 跨屏前端框架，Amaze UI 是一個(gè)輕量級(jí)、Mobile first的前端框架，基于開(kāi)源社區(qū)流行前端框架編寫(xiě)。
Ant Design
Ant Design 是一個(gè)致力于提升『用戶』和『設(shè)計(jì)者』使用體驗(yàn)的中臺(tái)設(shè)計(jì)語(yǔ)言。它模糊了產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師、前端工程師、開(kāi)發(fā)工程師等角色邊界，將進(jìn)行 UE 設(shè)計(jì)和 UI 設(shè)計(jì)人員統(tǒng)稱(chēng)為『設(shè)計(jì)者』，利用統(tǒng)一的規(guī)范進(jìn)行設(shè)計(jì)賦能，全面提高中臺(tái)產(chǎn)品體驗(yàn)和研發(fā)效率。
Element
Element，一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的組件庫(kù)，提供了配套設(shè)計(jì)資源，幫助你的網(wǎng)站快速成型。由餓了么公司前端團(tuán)隊(duì)開(kāi)源。
Vue.js
Vue.js 是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，同時(shí)擁有非常容易上手的API，讓編寫(xiě)動(dòng)態(tài)的UI界面變得輕松簡(jiǎn)單。Vue.js的作者為Evan You（尤雨溪），任職于Google Creative Lab，雖然是Vue是一個(gè)個(gè)人項(xiàng)目，但在發(fā)展前景上個(gè)人認(rèn)為絕不輸于Google的AngularJs，Vue的主要特點(diǎn)：
（1） 簡(jiǎn)潔 （2） 輕量 （3）快速 （4） 數(shù)據(jù)驅(qū)動(dòng) （5） 模塊友好 （6） 組件化
Vue.js 中文入門(mén)
Vue.js官網(wǎng)
React.js
React.js是facebook在2013年5月開(kāi)源的一個(gè)前端框架，React不是一個(gè)MVC框架，它是構(gòu)建易于可重復(fù)調(diào)用的web組件，側(cè)重于UI, 也就是view層， React為了更高超的性能而使用虛擬DOM作為其不同的實(shí)現(xiàn)。 它同時(shí)也可以由服務(wù)端Node.js渲染 － 而不需要過(guò)重的瀏覽器DOM支持， React實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡(jiǎn)單。因其新穎獨(dú)特， 目前在國(guó)內(nèi)還沒(méi)有很多的應(yīng)用。但是其性能出眾，代碼邏輯簡(jiǎn)單，近來(lái)越來(lái)越火。
React中，把一切東西都看成組件，每個(gè)組件都有其狀態(tài)。一個(gè)組件與多種有限狀態(tài)，但同時(shí)只能有一個(gè)狀態(tài)。學(xué)術(shù)上這叫有限狀態(tài)機(jī)。對(duì)于HTML而言，React拋棄了他。拋棄HTML，另起爐灶的原因之一是性能問(wèn)題：DOM操作十分緩慢。因此React引入了虛擬DOM（Virtual Dom）的概念，React在必要的時(shí)候，才把他們渲染到真正的DOM中
React主要的原理
Virtual DOM 虛擬DOM
傳統(tǒng)的web應(yīng)用，操作DOM一般是直接更新操作的，但是我們知道DOM更新通常是比較昂貴的。而React為了盡可能減少對(duì)DOM的操作，提供了一種不同的而又強(qiáng)大的方式來(lái)更新DOM，代替直接的DOM操作。就是Virtual DOM,一個(gè)輕量級(jí)的虛擬的DOM，就是React抽象出來(lái)的一個(gè)對(duì)象，描述dom應(yīng)該什么樣子的，應(yīng)該如何呈現(xiàn)。通過(guò)這個(gè)Virtual DOM去更新真實(shí)的DOM，由這個(gè)Virtual DOM管理真實(shí)DOM的更新。
為什么通過(guò)這多一層的Virtual DOM操作就能更快呢？ 這是因?yàn)镽eact有個(gè)diff算法，更新Virtual DOM并不保證馬上影響真實(shí)的DOM，React會(huì)等到事件循環(huán)結(jié)束，然后利用這個(gè)diff算法，通過(guò)當(dāng)前新的dom表述與之前的作比較，計(jì)算出最小的步驟更新真實(shí)的DOM。
BootStrap
2011年，twitter的“一小撮”工程師為了提高他們內(nèi)部的分析和管理能力，用業(yè)余時(shí)間為他們的產(chǎn)品構(gòu)建了一套易用、優(yōu)雅、靈活、可擴(kuò)展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所設(shè)計(jì)和建立，在github上開(kāi)源之后，迅速成為該站上最多人watch&fork的項(xiàng)目。大量工程師踴躍為該項(xiàng)目貢獻(xiàn)代碼，社區(qū)驚人地活躍，代碼版本進(jìn)化非?？焖?，官方文檔質(zhì)量極其高(可以說(shuō)是優(yōu)雅)，同時(shí)涌現(xiàn)了許多基于Bootstrap建設(shè)的網(wǎng)站：界面清新、簡(jiǎn)潔;要素排版利落大方。
GitHub上這樣介紹 bootstrap：簡(jiǎn)單靈活可用于架構(gòu)流行的用戶界面和交互接口的html,css,javascript工具集?；?strong>html5、css3的bootstrap，具有大量的誘人特性：友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計(jì)，12列格網(wǎng)，樣式向?qū)臋n，自定義JQuery插件，完整的類(lèi)庫(kù)，基于Less等。
Bootstrap框架屬于UI框架，這個(gè)和jQuery不太一樣，其實(shí)準(zhǔn)確的描述Bootstrap框架屬于css框架而非javascript框架，但是它本身也使用javascript來(lái)完善Bootstrap框架的視覺(jué)效果。此外，Bootstrap框架十分超前，在支持html5和css3的瀏覽器上表現(xiàn)特別好，而且對(duì)移動(dòng)終端的瀏覽器支持也是相當(dāng)優(yōu)秀。
一個(gè)完整的Bootstrap框架包含如下四個(gè)部分：
- 腳手架（不知道官網(wǎng)為啥這么翻譯）：用于重置背景、鏈接樣式、柵格系統(tǒng)等，并包含兩個(gè)簡(jiǎn)單的布局結(jié)構(gòu)。Bootstrap的樣式使用了lesscss技術(shù)，比如重置背景這樣的操作，這些比較簡(jiǎn)單我就不展開(kāi)敘述了，腳手架里最出彩的是柵格系統(tǒng)和布局。柵格系統(tǒng)是將頁(yè)面寬度分成12列，柵格系統(tǒng)分為兩種類(lèi)型，一種是默認(rèn)柵格系統(tǒng)，這時(shí)候柵格系統(tǒng)是按940px像素進(jìn)行等分，我們可以使用span1，span4這樣的class屬性操作默認(rèn)柵格布局，另一種是流式柵格系統(tǒng)，這個(gè)時(shí)候分列的寬度就不是固定，而是根據(jù)你可視頁(yè)面進(jìn)行12等分，同樣可以使用span1，span4操作流式柵格。這個(gè)系統(tǒng)非常之好，做css最難的就是div布局，使用柵格系統(tǒng)可以大大簡(jiǎn)化div的布局操作。另外一個(gè)就是做布局操作了，布局也分為固定和流式，讓不太精通css布局也能輕松操作布局。
- 基本的css樣式。Bootstrap給出了一樣常用的HTML元素的樣式，例如：按鈕、表單和文字等等。大部分做網(wǎng)站的人都不是美工出身，做出賞心悅目的網(wǎng)頁(yè)是件很困難的事情，css提供的樣式很專(zhuān)業(yè)很精美，能讓我們輕松開(kāi)發(fā)出一套精美的網(wǎng)站
- Css組件：Bootstrap還提供一些常用的css組件，同樣很優(yōu)秀很棒。
- Javascript插件：Bootstrap是個(gè)開(kāi)放的系統(tǒng)，我們可以隨意擴(kuò)展Bootstrap，特別是javascript的框架，這樣Bootstrap就會(huì)更加專(zhuān)業(yè)。
jQuery EasyUI
jQuery EasyUI是一組基于jQuery的UI插件集合，而jQuery EasyUI的目標(biāo)就是幫助web開(kāi)發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。開(kāi)發(fā)者不需要編寫(xiě)復(fù)雜的javascript，也不需要對(duì)css樣式有深入的了解，開(kāi)發(fā)者需要了解的只有一些簡(jiǎn)單的html標(biāo)簽。jQuery EasyUI為我們提供了大多數(shù)UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。
jQuery
jQuery是一個(gè)兼容多瀏覽器的javascript庫(kù)，核心理念是write less,do more(寫(xiě)的更少,做的更多)。 jQuery在2006年1月由美國(guó)人John Resig在紐約的barcamp發(fā)布，吸引了來(lái)自世界各地的眾多javascript高手加入，現(xiàn)在由Dave Methvin率領(lǐng)團(tuán)隊(duì)進(jìn)行開(kāi)發(fā)。如今， jQuery已經(jīng)成為最流行的javascript庫(kù)，在世界前10000個(gè)訪問(wèn)最多的網(wǎng)站中，有超過(guò)55%在使用jQuery 。
在線文檔
jQuery UI
jQuery UI是以jQuery 為基礎(chǔ)的、開(kāi)源的javaScript網(wǎng)頁(yè)用戶界面代碼庫(kù)。包含底層用互交互、動(dòng)畫(huà)、特效和可更換主題的可視控件。我們可以真接用它來(lái)構(gòu)建具有很好交互性的web應(yīng)用程序。所有插件測(cè)試能兼容IE6.0+，F(xiàn)irefox 3+,Safari3.1+,Opera 9.6+和Google Chrome。
jQuery UI實(shí)際上是jQuery插件，專(zhuān)指由jQuery官方維護(hù)的UI方向的插件
** jQuery UI 與 jquery 的主要區(qū)別是 **：
- jQuery是一個(gè)js庫(kù)，主要提供的功能是選擇器，屬性修改和事件綁定等等。
- jQuery UI則是在jQuery的基礎(chǔ)上，利用jQuery的擴(kuò)展性，設(shè)計(jì)的插件。提供了一些常用的界面元素，諸如對(duì)話框、拖動(dòng)行為、改變大小行為等等。
- jQuery本身注重于后臺(tái)，沒(méi)有漂亮的界面，而jQuery UI則補(bǔ)充了前者的不足，他提供了華麗的展示界面，使人更容易接受。既有強(qiáng)大的后臺(tái)，又有華麗的前臺(tái)。
