一、MV* 框架和庫(kù)

1、 Angular JS

Angular JS (Angular.JS) 是一組用來(lái)開發(fā) Web 頁(yè)面的框架、模板以及數(shù)據(jù)綁定和豐富 UI 組件。它支持整個(gè)開發(fā)進(jìn)程，提供 web 應(yīng)用的架構(gòu)，無(wú)需進(jìn)行手工 DOM 操作。 AngularJS 很小，只有 60K，兼容主流瀏覽器，與 jQuery 配合良好。

DEMO：

2、 React.js

React.js（React）是 Facebook 推出的一個(gè)用來(lái)構(gòu)建用戶界面的 JavaScript 庫(kù)。已經(jīng)應(yīng)用于構(gòu)建 Instagram 網(wǎng)站及 Facebook 部分網(wǎng)站。

DEMO： 

3、 Vue.js

Vue.js 是構(gòu)建 Web 界面的 JavaScript 庫(kù)，提供數(shù)據(jù)驅(qū)動(dòng)的組件，還有簡(jiǎn)單靈活的 API，使得 MVVM 更簡(jiǎn)單。

DEMO： 

4、 Ember.js

Ember 是一個(gè)雄心勃勃的 Web 應(yīng)用程序，消除了樣板，并提供了一個(gè)標(biāo)準(zhǔn)的應(yīng)用程序架構(gòu)的 JavaScript 框架。

DEMO： 

5、 Backbone.js

Backbone.js 是一種重量級(jí) javascript  MVC 應(yīng)用框架，通過(guò) Models 進(jìn)行 key-value 綁定及 custom 事件處理，通過(guò) Collections 提供一套豐富的 API 用于枚舉功能，通過(guò) Views 來(lái)進(jìn)行事件處理及與現(xiàn)有的 Application 通過(guò) RESTful JSON 接口進(jìn)行交互。

DEMO：

6、 Meteor

Meteor 是一組新的技術(shù)用于構(gòu)建高質(zhì)量的 Web 應(yīng)用，提供很多現(xiàn)成的包，可直接在瀏覽器或者云平臺(tái)中運(yùn)行。

DEMO： 

7、 regularJS

看到 regular 的名字就能感受到撲面而來(lái)的山寨味，但 regularjs 的出現(xiàn)絕不僅僅是作者造輪子情緒泛濫的結(jié)果。在 angular 大行其道的時(shí)期也激勵(lì)產(chǎn)生了很多優(yōu)秀框架，如vue.js、 avalon.js 、reactive等，而 regular 正是在這種百花齊放的時(shí)候產(chǎn)生，最終在實(shí)現(xiàn)上采取了angular的數(shù)據(jù)更新策略，提倡極致的聲明式和裸數(shù)據(jù)操作, 依賴于基于字符串的模板描述結(jié)構(gòu)結(jié)合更規(guī)范性的類式繼承的組件體系來(lái)定義數(shù)據(jù)層的業(yè)務(wù)邏輯。

DEMO： //regularjs.github.io/

8、 T3.js

T3js（t3.js）與 MVC 框架不同，T3 是建立在可伸縮 JavaScript 應(yīng)用體系結(jié)構(gòu)的概念之上來(lái)創(chuàng)建松耦合、少模型的系統(tǒng)，以此來(lái)創(chuàng)建大型 JavaScript 應(yīng)用。

DEMO： //t3js.org/

9、 Knockout.js

Knockout 是個(gè)JavaScript library，幫助創(chuàng)建豐富的顯示和編輯器 UI，通過(guò)干凈的底層數(shù)據(jù)模型。你可以在任何時(shí)候動(dòng)態(tài)更新 UI 的選擇部分。

DEMO： //knockoutjs.com/

10、Spine.js

Spine.js 是一個(gè)用于構(gòu)建 JavaScript Web 應(yīng)用的輕量級(jí)框架 。 Spine 可讓你使用 MVC 的框架思路來(lái)開發(fā)Web應(yīng)用。

DEMO： //spinejs.com/

二、UI 庫(kù)

1、 Bootstrap

Bootstrap 是快速開發(fā) Web 應(yīng)用程序的前端工具包。它是一個(gè) CSS，HTML 和 JS 的集合，使用了最新的瀏覽器技術(shù)，給你的 Web 開發(fā)提供了時(shí)尚的版式，表單，buttons，表格，網(wǎng)格系統(tǒng)等等。

DEMO： //getbootstrap.com/

2、 Semantic UI

Semantic UI — 完全語(yǔ)義化的前端界面開發(fā)框架，跟Bootstrap比起來(lái)，還是有些不同的，在功能特性上、布局設(shè)計(jì)上、用戶體驗(yàn)上均存在很多差異。

DEMO： //semantic-ui.com/

3、 ZUI

ZUI 是禪道項(xiàng)目管理軟件團(tuán)隊(duì)在完善自己產(chǎn)品過(guò)程中形成的一個(gè)開源前端實(shí)踐方案，它具有簡(jiǎn)單美觀，易于使用，輕快獨(dú)立穩(wěn)定等特點(diǎn)，比較適合中文環(huán)境。

DEMO： //zui.sexy/

4、 Layui

Layui 是一款帶著濃烈情懷的國(guó)產(chǎn)前端UI框架，她追求極簡(jiǎn)，又不失豐盈的內(nèi)在，說(shuō)她是史上最輕量的結(jié)晶，似乎并不為過(guò)。一切都源自于她對(duì)原生態(tài)的執(zhí)著，對(duì)前端社區(qū)的那些噪雜聲音的過(guò)濾，以及她本身的精心雕琢。

DEMO： //www.layui.com/

５、 Amaze UI

Amaze UI 是中國(guó)首個(gè)開源 HTML5 跨屏前端框架，旨在幫助開發(fā)者提高開發(fā)效率，提升網(wǎng)頁(yè)效果，即用最短的時(shí)間做出最贊的網(wǎng)頁(yè)，使更多的前端開發(fā)者不再受前端復(fù)雜代碼困擾。

DEMO： //www.amazeui.org/

6、 Flat UI

Flat UI 是一套精美的扁平風(fēng)格 UI 工具包，基于Twitter Bootstrap實(shí)現(xiàn)。這套界面工具包含許多基本的和復(fù)雜的 UI 部件，例如按鈕，輸入框，組合按鈕，復(fù)選框，單選按鈕，標(biāo)簽，菜單，進(jìn)度條和滑塊，導(dǎo)航元素等等。

DEMO： //designmodo.com/flat-free/

7、 Masonry

Masonry 是一 個(gè)用來(lái)布局的 jQuery 插件，看了下面這張對(duì)比圖你就知道它的用途：

DEMO： //masonry.desandro.com/

8、 qooxdoo

qooxdoo 是一個(gè)用于開發(fā) Ajax 應(yīng)用程序的 GUI 框架，使用它可以開發(fā)出類似于 Window 桌面風(fēng)格的 Web 應(yīng)用程序。

DEMO： //qooxdoo.org/

三、編輯器

1、 Editor.md

Editor.md   是一個(gè)可嵌入的開源 Markdown 在線編輯器組件，你可以很方便用在瀏覽器、NW.js（Node-webkit）等地方，基于CodeMirror、jQuery 和 Marked 構(gòu)建。

DEMO： //pandao.github.io/editor.md/

2、 CodeMirror

CodeMirror 是一款“Online Source Editor”，基于Javascript，短小精悍，實(shí)時(shí)在線代碼高亮顯示，他不是某個(gè)富文本編輯器的附屬產(chǎn)品，他是許多大名鼎鼎的在線代碼編輯器的基礎(chǔ)庫(kù)。

DEMO： //codemirror.net/

3、 TinyMCE

TinyMCE 是一個(gè)輕量級(jí)的基于瀏覽器的所見即所得編輯器，支持目前流行的各種瀏覽器，由 JavaScript 寫成。功能配置靈活簡(jiǎn)單（兩行代碼就可以將編輯器嵌入網(wǎng)頁(yè)中），支持 AJAX。另一特點(diǎn)是加載速度非常快，如果你的服務(wù)器采用的腳本語(yǔ)言是 PHP，那還可以進(jìn)一步優(yōu)化。

DEMO： //www.tinymce.com/

4、 Summernote

Summernote 是一個(gè)簡(jiǎn)單靈活的所見即所得的 HTML 在線編輯器，基于 jQuery 和 Bootstrap 構(gòu)建，支持快捷鍵操作，提供大量可定制的選項(xiàng)。

DEMO： //summernote.org/

5、 CKEditor

CKEditor 是新一代的FCKeditor，是一個(gè)重新開發(fā)的版本。CKEditor 是全球最優(yōu)秀的網(wǎng)頁(yè)在線文字編輯器之一，因其驚人的性能與可擴(kuò)展性而廣泛的被運(yùn)用于各大網(wǎng)站。

DEMO： //ckeditor.com/

6、 ContentTools

ContentTools 是一個(gè)用于構(gòu)建 HTML 內(nèi)容的 WYSIWYG 編輯器的 JS 庫(kù)。

DEMO： //getcontenttools.com

四、測(cè)試工具

1、 Mocha

Mocha 是一個(gè)簡(jiǎn)單、靈活有趣的 JavaScript 測(cè)試框架，用于Node.js和瀏覽器上的 JavaScript 應(yīng)用測(cè)試。Mocha 是具有豐富特性的 JavaScript 測(cè)試框架，可以運(yùn)行在 Node.js 和瀏覽器中，使得異步測(cè)試更簡(jiǎn)單更有趣。Mocha 可以持續(xù)運(yùn)行測(cè)試，支持靈活又準(zhǔn)確的報(bào)告，當(dāng)映射到未捕獲異常時(shí)轉(zhuǎn)到正確的測(cè)試示例。

DEMO： //mochajs.org/

2、 Karma

Karma 是一個(gè)簡(jiǎn)單的 javascript 測(cè)試工具，它允許在多個(gè)真正的瀏覽器執(zhí)行 JavaScript 代碼。

DEMO： //karma-runner.github.io/

3、 CasperJS

CasperJS 是一個(gè)開源的導(dǎo)航腳本和測(cè)試工具，使用 JavaScript 基于PhantomJS編寫，用于測(cè)試 Web 應(yīng)用功能，Phantom JS是一個(gè)服務(wù)器端的 JavaScript API 的 WebKit。其支持各種Web標(biāo)準(zhǔn)： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。

DEMO： //casperjs.org/

4、 Jasmine

Jasmine 是一個(gè)簡(jiǎn)易的JS單元測(cè)試框架。Jasmine 不依賴于任何瀏覽器、DOM、或者是任何 JavaScript 而存在。它適用于所有網(wǎng)站、Node.js 項(xiàng)目，或者是任何能夠在 JavaScript 上面運(yùn)行的程序。

DEMO： //jasmine.github.io/

5、 Selenium

Selenium (SeleniumHQ) 是 thoughtworks 公司的一個(gè)集成測(cè)試的強(qiáng)大工具，現(xiàn)在存在2個(gè)版本，一個(gè)叫  selenium-core, 一個(gè)叫 selenium-rc 。

DEMO： //www.seleniumhq.org/

6、 Chai

Chai 是一個(gè)針對(duì)Node.js和瀏覽器的行為驅(qū)動(dòng)測(cè)試和測(cè)試驅(qū)動(dòng)測(cè)試的診斷庫(kù)，可與任何 JavaScript 測(cè)試框架集成。

DEMO： //chaijs.com/

7、 SlimerJS

SlimerJS 是一個(gè)提供給 Web 開發(fā)人員，可通過(guò)腳本編程控制的瀏覽器。它可以讓你使用  Javascrip t 腳本操縱一個(gè)網(wǎng)頁(yè)：打開一個(gè)網(wǎng)頁(yè)，點(diǎn)擊鏈接，修改的內(nèi)容等，這對(duì)于做功能測(cè)試，頁(yè)面自動(dòng)機(jī)，網(wǎng)絡(luò)監(jiān)控，屏幕捕獲等是非常有用的。

DEMO： //www.slimerjs.org/index.html

8、 Phantom JS

Phantom JS 是一個(gè)服務(wù)器端的 JavaScript API 的 WebKit。其支持各種 Web 標(biāo)準(zhǔn)： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。

DEMO： //www.phantomjs.org/

五、CMS 

1、 DoraCMS

DoraCMS 是基于 Nodejs+express+mongodb 編寫的一套內(nèi)容管理系統(tǒng)，其結(jié)構(gòu)清晰、模塊簡(jiǎn)單，上手很容易。

DEMO： //www.html-js.cn/

2、 Cody

Cody 結(jié)合了 Nodejs 和 CMS，是基于 JavaScript 的內(nèi)容管理系統(tǒng)。作者有超過(guò)15年的CMS開發(fā)經(jīng)驗(yàn)，在用戶體驗(yàn)和性能上都做得很好，有很大的潛力。

DEMO： //howest.cody-cms.org/en/

3、 Apostrophe

Apostrophe 是一個(gè)基于 Node.js 開發(fā)的內(nèi)容管理系統(tǒng)，核心模塊提供了豐富的內(nèi)容編輯功能，提供一個(gè)必須的服務(wù)用來(lái)跟你的 Express 應(yīng)用綁定。

DEMO： //apostrophenow.org/

4、 Ghost

Ghost 是一個(gè)開源的博客平臺(tái), 可以把他看作 WordPress 的一個(gè)挑戰(zhàn)者。Ghost 基于 JavasSript 的 Node.js 進(jìn)行開發(fā)，在可預(yù)見的未來(lái)里，JS 無(wú)疑比 PHP 有著更多的優(yōu)勢(shì)。

DEMO： //ghost.org/

5、 KeystoneJS

KeystoneJS 是以 Express 和 MongoDB 為基礎(chǔ)搭建的 Node.js CMS 和 Web 應(yīng)用程序平臺(tái)。

DEMO： //keystonejs.com/zh/

六、表格/網(wǎng)格

1、 DataTables

DataTables 是一個(gè) jQuery 的表格插件。這是一個(gè)高度靈活的工具，依據(jù)的基礎(chǔ)逐步增強(qiáng)，這將增加先進(jìn)的互動(dòng)控制，支持任何 HTML 表格。

DEMO： //www.datatables.net/

2、 jqGrid

jqGrid 是一個(gè)用來(lái)顯示網(wǎng)格數(shù)據(jù)的jQuery插件，文檔比較全面，附帶中文版本。

DEMO： //www.trirand.com/

3、 jTable

jTable   是一個(gè) jQuery   插件用來(lái)創(chuàng)建基于 Ajax 的 CRUD 表格，無(wú)需進(jìn)行 HTML 和 JavaScript 編碼。

DEMO： //www.jtable.org/

4、 ParamQuery

ParamQuery 是一種輕量級(jí)的 jQuery 網(wǎng)格插件，基于用于用戶界面控制、具有一致 API 的優(yōu)秀設(shè)計(jì)模式 jQueryUI Widget factory 創(chuàng)建，能夠在網(wǎng)頁(yè)上展示各種類似于 Excel 和 Google Spreadsheet 效果的網(wǎng)格。

本文轉(zhuǎn)自（）

【年末回饋?zhàn)詈笠徊ǎ珗?chǎng)六折起，豪禮升級(jí)，還送公開課入場(chǎng)券，趕緊搶！】

活動(dòng)時(shí)間：12月1日-12月31日