一、MV* 框架和庫

1、 Angular JS

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

DEMO：

2、 React.js

React.js（React）是 Facebook 推出的一個用來構建用戶界面的 JavaScript 庫。已經應用于構建 Instagram 網站及 Facebook 部分網站。

DEMO： 

3、 Vue.js

Vue.js 是構建 Web 界面的 JavaScript 庫，提供數據驅動的組件，還有簡單靈活的 API，使得 MVVM 更簡單。

DEMO： 

4、 Ember.js

Ember 是一個雄心勃勃的 Web 應用程序，消除了樣板，并提供了一個標準的應用程序架構的 JavaScript 框架。

DEMO： 

5、 Backbone.js

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

DEMO：

6、 Meteor

Meteor 是一組新的技術用于構建高質量的 Web 應用，提供很多現成的包，可直接在瀏覽器或者云平臺中運行。

DEMO： 

7、 regularJS

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

DEMO： //regularjs.github.io/

8、 T3.js

T3js（t3.js）與 MVC 框架不同，T3 是建立在可伸縮 JavaScript 應用體系結構的概念之上來創建松耦合、少模型的系統，以此來創建大型 JavaScript 應用。

DEMO： //t3js.org/

9、 Knockout.js

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

DEMO： //knockoutjs.com/

10、Spine.js

Spine.js 是一個用于構建 JavaScript Web 應用的輕量級框架 。 Spine 可讓你使用 MVC 的框架思路來開發Web應用。

DEMO： //spinejs.com/

二、UI 庫

1、 Bootstrap

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

DEMO： //getbootstrap.com/

2、 Semantic UI

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

DEMO： //semantic-ui.com/

3、 ZUI

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

DEMO： //zui.sexy/

4、 Layui

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

DEMO： //www.layui.com/

５、 Amaze UI

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

DEMO： //www.amazeui.org/

6、 Flat UI

Flat UI 是一套精美的扁平風格 UI 工具包，基于Twitter Bootstrap實現。這套界面工具包含許多基本的和復雜的 UI 部件，例如按鈕，輸入框，組合按鈕，復選框，單選按鈕，標簽，菜單，進度條和滑塊，導航元素等等。

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

7、 Masonry

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

DEMO： //masonry.desandro.com/

8、 qooxdoo

qooxdoo 是一個用于開發 Ajax 應用程序的 GUI 框架，使用它可以開發出類似于 Window 桌面風格的 Web 應用程序。

DEMO： //qooxdoo.org/

三、編輯器

1、 Editor.md

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

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

2、 CodeMirror

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

DEMO： //codemirror.net/

3、 TinyMCE

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

DEMO： //www.tinymce.com/

4、 Summernote

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

DEMO： //summernote.org/

5、 CKEditor

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

DEMO： //ckeditor.com/

6、 ContentTools

ContentTools 是一個用于構建 HTML 內容的 WYSIWYG 編輯器的 JS 庫。

DEMO： //getcontenttools.com

四、測試工具

1、 Mocha

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

DEMO： //mochajs.org/

2、 Karma

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

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

3、 CasperJS

CasperJS 是一個開源的導航腳本和測試工具，使用 JavaScript 基于PhantomJS編寫，用于測試 Web 應用功能，Phantom JS是一個服務器端的 JavaScript API 的 WebKit。其支持各種Web標準： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。

DEMO： //casperjs.org/

4、 Jasmine

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

DEMO： //jasmine.github.io/

5、 Selenium

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

DEMO： //www.seleniumhq.org/

6、 Chai

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

DEMO： //chaijs.com/

7、 SlimerJS

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

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

8、 Phantom JS

Phantom JS 是一個服務器端的 JavaScript API 的 WebKit。其支持各種 Web 標準： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。

DEMO： //www.phantomjs.org/

五、CMS 

1、 DoraCMS

DoraCMS 是基于 Nodejs+express+mongodb 編寫的一套內容管理系統，其結構清晰、模塊簡單，上手很容易。

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

2、 Cody

Cody 結合了 Nodejs 和 CMS，是基于 JavaScript 的內容管理系統。作者有超過15年的CMS開發經驗，在用戶體驗和性能上都做得很好，有很大的潛力。

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

3、 Apostrophe

Apostrophe 是一個基于 Node.js 開發的內容管理系統，核心模塊提供了豐富的內容編輯功能，提供一個必須的服務用來跟你的 Express 應用綁定。

DEMO： //apostrophenow.org/

4、 Ghost

Ghost 是一個開源的博客平臺, 可以把他看作 WordPress 的一個挑戰者。Ghost 基于 JavasSript 的 Node.js 進行開發，在可預見的未來里，JS 無疑比 PHP 有著更多的優勢。

DEMO： //ghost.org/

5、 KeystoneJS

KeystoneJS 是以 Express 和 MongoDB 為基礎搭建的 Node.js CMS 和 Web 應用程序平臺。

DEMO： //keystonejs.com/zh/

六、表格/網格

1、 DataTables

DataTables 是一個 jQuery 的表格插件。這是一個高度靈活的工具，依據的基礎逐步增強，這將增加先進的互動控制，支持任何 HTML 表格。

DEMO： //www.datatables.net/

2、 jqGrid

jqGrid 是一個用來顯示網格數據的jQuery插件，文檔比較全面，附帶中文版本。

DEMO： //www.trirand.com/

3、 jTable

jTable   是一個 jQuery   插件用來創建基于 Ajax 的 CRUD 表格，無需進行 HTML 和 JavaScript 編碼。

DEMO： //www.jtable.org/

4、 ParamQuery

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

本文轉自（）

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

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