js 小插件

avaScript 是一個在全球範圍內都很是受歡迎的腳本語言，由 Netscape 的 LiveScript 發展而來，可用於 Web 開發、移動應用開發、服務器端開發等。它因簡單、安全、動態和跨平臺等特色而受到新老開發者的追捧。本文整理了一些基於 Javascript 的開源功能插件和框架，但願能給你的開發帶來幫助。

1、MV* 框架和庫

一、Angular JS

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

DEMO：https://www.angularjs.org/

二、React.js

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

DEMO：https://facebook.github.io/react/

三、Vue.js

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

DEMO：http://vuejs.org/

四、Ember.js

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

DEMO：http://emberjs.com/

五、Backbone.js

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

DEMO：http://backbonejs.org/

六、Meteor

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

DEMO：https://www.meteor.com/

七、regularJS

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

DEMO：http://regularjs.github.io/

八、T3.js

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

DEMO：http://t3js.org/

九、Knockout.js

Knockout 是個JavaScript library，幫助建立豐富的顯示和編輯器 UI，經過乾淨的底層數據模型。你能夠在任什麼時候候動態更新 UI 的選擇部分。

DEMO：http://knockoutjs.com/

十、Spine.js

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

DEMO：http://spinejs.com/

2、UI 庫

一、Bootstrap

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

DEMO：http://getbootstrap.com/

二、Semantic UI

Semantic UI — 徹底語義化的前端界面開發框架，跟 Bootstrap 比起來，仍是有些不一樣的，在功能特性上、佈局設計上、用戶體驗上均存在不少差別。

DEMO：http://semantic-ui.com/

三、ZUI

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

DEMO：http://zui.sexy/

四、Layui 

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

DEMO：http://www.layui.com/

５、Amaze UI

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

DEMO：http://www.amazeui.org/

六、Flat UI

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

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

七、Masonry

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

DEMO：http://masonry.desandro.com/

八、qooxdoo

qooxdoo 是一個用於開發 Ajax 應用程序的 GUI 框架，使用它能夠開發出相似於 Window 桌面風格的 Web 應用程序。

DEMO：http://qooxdoo.org/

3、編輯器

一、Editor.md

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

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

二、CodeMirror

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

DEMO：http://codemirror.net/

三、TinyMCE

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

DEMO：https://www.tinymce.com/

四、Summernote 

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

DEMO：http://summernote.org/

五、CKEditor

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

DEMO：http://ckeditor.com/

六、ContentTools

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

DEMO：http://getcontenttools.com

4、測試工具

一、Mocha

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

DEMO：http://mochajs.org/

二、Karma

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

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

三、CasperJS

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

DEMO：http://casperjs.org/

四、Jasmine

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

DEMO：http://jasmine.github.io/

五、Selenium

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

DEMO：http://www.seleniumhq.org/

六、Chai

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

DEMO：http://chaijs.com/

七、SlimerJS

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

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

八、Phantom JS

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

DEMO：http://www.phantomjs.org/

5、CMS 

一、DoraCMS

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

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

二、Cody

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

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

三、Apostrophe

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

DEMO：http://apostrophenow.org/

四、Ghost

Ghost 是一個開源的博客平臺, 能夠把他看做 WordPress 的一個挑戰者。Ghost 基於 JavasSript 的 Node.js 進行開發，在可預見的將來裏，JS 無疑比 PHP 有着更多的優點。

DEMO：https://ghost.org/

五、KeystoneJS

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

DEMO：http://keystonejs.com/zh/

6、表格/網格

一、DataTables

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

DEMO：http://www.datatables.net/

二、jqGrid

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

DEMO：http://www.trirand.com/

三、jTable 

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

DEMO：http://www.jtable.org/

四、ParamQuery

ParamQuery 是一種輕量級的 jQuery 網格插件，基於用於用戶界面控制、具備一致 API 的優秀設計模式 jQueryUI Widget factory 建立，可以在網頁上展現各類相似於 Excel 和 Google Spreadsheet 效果的網格。

DEMO：http://paramquery.com/

轉自https://my.oschina.net/u/2903254/home