一、MV* 框架和庫

1、 Angular JS

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

DEMO：

2、 React.js

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

DEMO： 

3、 Vue.js

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

DEMO： 

4、 Ember.js

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

DEMO： 

5、 Backbone.js

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

DEMO：

6、 Meteor

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

DEMO： 

7、 regularJS

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

DEMO： //regularjs.github.io/

8、 T3.js

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

DEMO： //t3js.org/

9、 Knockout.js

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

DEMO： //knockoutjs.com/

10、Spine.js

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

DEMO： //spinejs.com/

二、UI 庫

1、 Bootstrap

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

DEMO： //getbootstrap.com/

2、 Semantic UI

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

DEMO： //semantic-ui.com/

3、 ZUI

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

DEMO： //zui.sexy/

4、 Layui

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

DEMO： //www.layui.com/

５、 Amaze UI

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

DEMO： //www.amazeui.org/

6、 Flat UI

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

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

7、 Masonry

Masonry 是一 個用來布局的 jQuery 插件，看了下面這張對比圖你就知道它的用途：

DEMO： //masonry.desandro.com/

8、 qooxdoo

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

DEMO： //qooxdoo.org/

三、編輯器

1、 Editor.md

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

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

2、 CodeMirror

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

DEMO： //codemirror.net/

3、 TinyMCE

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

DEMO： //www.tinymce.com/

4、 Summernote

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

DEMO： //summernote.org/

5、 CKEditor

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

DEMO： //ckeditor.com/

6、 ContentTools

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

DEMO： //getcontenttools.com

四、測試工具

1、 Mocha

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

DEMO： //mochajs.org/

2、 Karma

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

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

3、 CasperJS

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

DEMO： //casperjs.org/

4、 Jasmine

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

DEMO： //jasmine.github.io/

5、 Selenium

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

DEMO： //www.seleniumhq.org/

6、 Chai

Chai 是一個針對Node.js和瀏覽器的行為驅(qū)動測試和測試驅(qū)動測試的診斷庫，可與任何 JavaScript 測試框架集成。

DEMO： //chaijs.com/

7、 SlimerJS

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

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

8、 Phantom JS

Phantom JS 是一個服務(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)清晰、模塊簡單，上手很容易。

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

2、 Cody

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

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

3、 Apostrophe

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

DEMO： //apostrophenow.org/

4、 Ghost

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

DEMO： //ghost.org/

5、 KeystoneJS

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

DEMO： //keystonejs.com/zh/

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

1、 DataTables

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

DEMO： //www.datatables.net/

2、 jqGrid

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

DEMO： //www.trirand.com/

3、 jTable

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

DEMO： //www.jtable.org/

4、 ParamQuery

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

本文轉(zhuǎn)自（）

【年末回饋最后一波，全場六折起，豪禮升級，還送公開課入場券，趕緊搶！】

活動時間：12月1日-12月31日