JavaScript 資源大全中文版

我想不少程序員應該記得 GitHub 上有一個 Awesome - XXX 系列的資源整理。 awesome-javascript 是 sorrycc 發起維護的 JS 資源列表，內容包括：包管理器、加載器、測試框架、運行器、QA、MVC框架和庫、模板引擎、數據可視化、時間軸、編輯器等等。

---

包管理器

管理着 JavaScript 庫，並提供讀取和打包它們的工具。

• npm：npm 是 JavaScript 的包管理器。官網
• Bower：一個 web 應用的包管理器。官網
• component：能構建更好 web 應用的客戶端包管理器。官網
• spm：全新的靜態包管理器。官網
• jam：一個專一於瀏覽器端和兼容 RequireJS 的包管理器。官網
• jspm：流暢的瀏覽器包管理器。官網
• Ender：沒有庫文件的程序庫。官網
• volo：以項目模板、添加依賴項與自動化生成的方式建立前端項目。官網 
• Duo：一個整合 Component、Browserify 和 Go 官網的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。

加載器

JavaScript 的模塊或加載系統。

• RequireJS：JavaScript 文件和模塊的加載器。官網
• browserify：在瀏覽器端以 node.js 的方式 require()。官網
• SeaJS：用於 Web 的模塊加載器。官網
• HeadJS：HEAD 的惟一腳本。官網
• curl：小巧、快速且易擴展的模塊加載器，它能處理 AMD、CommonJS Modules/1.一、CSS、HTML/text 和歷史腳本。官網
• lazyload：小巧且無依賴的異步 JavaScript 和 CSS 加載器。官網
• script.js：異步 JavaScript 加載器和依賴管理器。官網
• systemjs：AMD、CJS（commonJS） 和符合 ES6 規範的模塊加載器。官網
• LodJS：基於 AMD 的模塊加載器。官網
• ESL：瀏覽器端的模塊加載器，支持延遲定義和 AMD。官網
• modulejs：輕量的 JavaScript 模塊系統。官網

打包工具

• browserify ：Browserify 讓你能在瀏覽器端使用 require('modules') ，打包全部依賴。官網
• webpack：爲瀏覽器打包 CommonJs/AMD 模塊。官網
• gulp：用自動化構建工具加強你的工做流程！官網

測試框架

框架

• mocha：適用於 node.js 和瀏覽器、簡易、靈活、有趣的 JavaScript 測試框架。官網
• jasmine：簡單無 DOM 的 JavaScript 測試框架。官網
• qunit：一個易於使用的 JavaScript 單元測試框架。官網
• jest：簡單的 JavaScript 單元測試框架。官網
• prova：基於 Tape 和 Browserify 的測試運行器，它適用於 Node & 瀏覽器。官網
• DalekJS：自動化且跨瀏覽器的 JavaScript 功能測試框架。官網

斷言

• chai：適用於 node.js 和瀏覽器的 BDD / TDD 斷言框架，並能搭配其它測試框架使用。官網
• Sinon.JS：對 JavaScript 進行 spies、stubs 和 mock 測試。官網
• expect.js：簡約的、適用於 Node.js 和瀏覽器端的 BDD 式斷言工具。官網
• should.js：適用於 Node.js 的 BDD 式斷言工具。官網

覆蓋率

• istanbul：另外一個 JS 代碼覆蓋率檢測工具。官網
• blanket：一個簡單的代碼覆蓋率檢測庫。它的設計理念是易於安裝和使用，且可用於瀏覽器端和 node.js。官網
• JSCover：JSCover 是一個檢測 JavaScript 程序代碼覆蓋率的工具。官網

運行器

• phantomjs：腳本化的 Headless WebKit。官網
• slimerjs：一個內核爲 Gecko 的相似 PhantomJS 工具。官網
• casperjs：基於 PhantomJS 和 Slimer JS 的導航腳本和測試工具。官網 
• zombie：基於 node.js 、快速、全棧且無圖形界面的瀏覽器的測試工具。官網
• totoro：一個簡單可靠且能跨瀏覽器運行的測試工具。官網
• karma：一個優秀的的 JavaScript 測試運行器。官網
• nightwatch：基於 node.js 和 selenium webdriver 的圖形界面自動化測試框架。官網
• intern：下一代 JavaScript 代碼測試棧。官網
• yolpo：在瀏覽器逐句執行的 JavaScript 解釋器。官網

QA 工具

• JSHint：JSHint 是一個有助於發現 JavaScript 代碼錯誤和潛在問題的工具。官網
• jscs：JavaScript 代碼風格檢測工具。官網
• jsfmt：格式化、搜索和改寫 JavaScript。官網
• jsinspect：檢測複製粘貼和結構相似的代碼。官網
• buddy.js：發現 JavaScript 代碼裏的 魔術數字。官網
• ESLint：徹底插件化的工具，能在 JavaScript 中識別和記錄模式。官網
• JSLint ：高標準、嚴格和執拗的代碼質量工具，旨在只保持語言的優良部分。官網

MVC 框架和庫

• angular.js：爲網絡應用加強 HTML。官網
• aurelia：一個適用於移動設備、桌面電腦和 web 的客戶端 JavaScript 框架。官網
• backbone：給你的 JS 應用加入帶有 Models、Views、Collections 和 Events 的 Backbone。官網
• batman.js：最適合 Rails 開發者的 JavaScript 框架。官網
• ember.js：一個旨在建立非凡 web 應用的 JavaScript 框架。官網
• meteor：一個超簡單的、數據庫無處不在的、只傳輸數據的純 JavaScript web 框架。官網
• ractive：新一代 DOM 操做。官網
• vue：一個用於構建可交互界面的、直觀快速和可組合的 MVVM 框架。官網 
• knockout：Knockout 用 JavaScript 讓建立響應式的富 UI 更加容易。官網 
• spine：構建 JavaScript 應用的輕量 MVC 庫。官網
• espresso.js：一個極小的、用於製做用戶界面的 JavaScript 庫。官網
• canjs：讓 JS 更好、更快、更簡單。官網
• react：用於建構用戶界面的庫。它是聲明式的、高效的和極度靈活的，並使用虛擬 DOM 做爲其不一樣的實現。官網
• react-native：一個用 React 構建原生應用的框架。官網
• riot：類 React 庫，但很輕量。官網
• thorax：增強你的 Backbone。官網
• chaplin：使用 Backbone.js 庫的 JavaScript 應用架構。官網
• marionette：一個 Backbone.js 的複合應用程序庫，旨在簡化大型 JavaScript 應用結構。官網
• ripple：一個小巧的、用於構建響應界面的基礎框架。官網
• rivets：輕量卻擁有強大的數據綁定和模板解決方案官網
• derby：讓編寫實時和協同應用更簡單的 MVC 框架，可以在 Node.js 和瀏覽器同時運行。官網
• derby-awesome：很棒的 derby 組件集合。官網
• way.js：簡單、輕量、持久化的雙向數據綁定。官網
• mithril.js：Mithril 是一個客戶端 MVC 框架（輕量、強大和快速）官網
• jsblocks：jsblocks 是一個更好的 MV-ish 框架。官網
• LiquidLava：易懂的、用於構建用戶界面的 MVC 框架。官網
• Electron：用Html、CSS和JavaScript構建跨平臺的客戶端應用程序。官網、GitHub

基於 Node 的 CMS 框架

• KeystoneJS：強大的 CMS 和 web 應用框架。官網
• Reaction Commerce：擁有實時的架構和設計的響應式（reactive） CMS。官網
• Ghost：簡單、強大的發佈平臺。官網
• Apostrophe：提供內容編輯和基本服務的 CMS。官網
• We.js：適用於實時應用、網站或博客的框架。官網
• Hatch.js：擁有社交特性的 CMS 平臺。官網
• TaracotJS：擁有快速、極簡風格特色且基於Node.js 的 CMS。官網
• Nodizecms：爲 CoffeeScript 愛好者準備的 CMS。官網
• Cody：擁有所見即所得的編輯器的 CMS。官網
• PencilBlue：CMS 和博客平臺。官網

模板引擎

模板引擎容許您執行字符串插值。

• mustache.js：是 JavaScript 中帶有 {{mustaches}} 的最簡模板。官網
• handlebars.js：是 Mustache 模板語言的擴展。官網
• hogan.js：是 Mustache 模板語言的編譯器。官網
• doT：最快速簡潔的 JavaScript 模板引擎，適用於 nodejs 和瀏覽器。官網
• dustjs：適用於瀏覽器和 node.js 的異步模板。官網
• eco：嵌入式的 CoffeeScript 模板。官網
• JavaScript-Templates：輕量（小於 1KB）、快速且無依賴的強大 JavaScript 模版引擎。官網
• t.js：小巧的 JavaScript 模板框架，壓縮後約爲 400 字節。官網
• Jade：健壯的、優雅且功能豐富的 nodejs 模板引擎。官網
• EJS：高效的 JavaScript 模板。官網
• xtemplate：可擴展的模板引擎，適用於 node 和瀏覽器。官網
• marko：快速輕量且基於 HTML 的模板引擎，支持異步、流、自定義標籤和 CommonJS 模編譯後輸出。適用於 Node.js 官網和瀏覽器。

Flux

Flux是Facebook用來構建客戶端Web應用的應用架構

• Reflux是根據React的flux建立的單向數據流類庫。官網
• Redux是可預測javascript應用程序狀態的容器。官網

數據可視化

Web 數據可視化工具

• d3：一個對 HTML 和 SVG 進行可視化的 JavaScript 庫。官網
• metrics-graphics：更簡潔和擁有更規範的數據圖表佈局優化算法的庫。官網
• pykcharts.js：通過精心設計後，去除 d3.js 複雜性的 d3.js 圖表庫。官網
• three.js：JavaScript 3D 庫。官網
• Chart.js：簡單的、基於 canvas 標籤的 HTML5 圖表庫。官網
• paper.js：是矢量圖形腳本中的瑞士軍刀 —— 使用 HTML5 Canvas 將 Scriptographer  移植到 JavaScript 官網和瀏覽器。
• fabric.js：JavaScript Canvas 庫，SVG 與 Canvas 能夠相互解析。官網
• peity：進度條、線狀和餅狀圖。官網
• raphael：JavaScript 矢量庫。官網
• echarts：商業產品圖表。官網
• vis：動態的、基於瀏覽器的可視化庫。官網
• two.js：一個渲染器無關的適用於 web 的二維繪圖 api 。官網
• g.raphael：基於 Raphaël 圖表庫。官網
• sigma.js：一個致力於圖形繪畫的 JavaScript 庫。官網
• arbor：一個使用 web workers 和 jQuery 的圖形可視化庫。官網
• cubism：可視化時間序列的 D3 插件。官網
• dc.js：與 crossfilter 無縫合做的多維圖表繪製庫，使用 d3.js 渲染。官網
• vega：一套可視化語法。官網
• processing.js：Processing.js 基於 Web 標準使數據可視化，而無需任何插件。官網
• envisionjs：動態的 HTML5 可視化。官網
• rickshaw：用於構建交互式實時圖表的 JavaScript 工具包。官網
• flot：吸引人的、基於 jQuery 的 JavaScript 圖表庫。官網
• morris.js：漂亮的時間序列線框圖。官網
• nvd3：一個爲 D3.js 構建可複用圖表和圖表組件的庫。官網
• svg.js：一個輕量的、用於操做和添加 SVG 動畫的庫。官網
• heatmap.js：基於 HTML5 canvas 的熱力圖 JavaScript 庫。官網
• jquery.sparkline：一個直接在瀏覽器端生成小型走勢圖的 jQuery 插件。官網
• xCharts：一個基於 D三、用於構建自定義圖表和圖形的庫。官網
• trianglify：基於 d3.js 的低多邊形（low poly）風格背景圖片生成器。官網
• d3-cloud：建立詞雲（word cloud）效果的 JavaScript 庫。官網
• d4：一個基於 D3 、友好、可複用的 DSL 圖表庫 。官網
• dimple.js：基於 d3 的簡易商業分析圖表庫。官網
• chartist-js：簡單的響應式圖表。官網
• epoch：一個通用的實時圖表庫。官網
• c3：基於 D3 的可複用圖表庫。官網
• BabylonJS：一個運用 HTML5 和 WebGL 構建 3D 遊戲的框架。官網
• jquery.raty.js：一個星級評分插件。官網

也有一些很棒的收費庫，如 amchart、plotly 和 highchart。

時間軸

• TimelineJS： 一個用 JavaScript 編寫的可敘事時間軸庫。官網
• timesheet.js：用於構建簡單的 HTML5 & CSS3 時間表的 JavaScript 庫。官網

編輯器

• ace：Ace（Ajax.org Cloud9 Editor）。官網
• CodeMirror：瀏覽器端的代碼編輯器。官網
• esprima：用於綜合分析的 ECMAScript 解析器。官網
• quill：一個帶有 API 的跨瀏覽器富文本編輯器。(官網)
• medium-editor：Medium.com 所見即所得編輯器的克隆版。官網
• pen：享受在線編輯（支持 markdown）。官網
• jquery-notebook：一個易用的、簡潔優雅的文本編輯器。靈感來源於 Medium 的魅力。官網
• bootstrap-wysiwyg：小巧的、兼容 bootstrap 的所見即所得的富文本編輯器。官網
• ckeditor-releases：適用於每一個人的 web 文本編輯器。官網
• editor：一個 markdown 編輯器，但仍在開發中。官網
• EpicEditor：一個可嵌入的 JavaScript Markdown 官網的編輯器，擁有全屏編輯、即時預覽、自動保存草稿和離線支持等功能。
• jsoneditor：查看、編輯和格式化 JSON 的 web 工具。官網
• vim.js： 擁有持久化 ~/.vimrc 的 Vim 編輯器的 JavaScript 移植版本。官網
• Squire：HTML5 富文本編輯器。官網
• TinyMCE：JavaScript 富文本編輯器。官網
• trix：由 Basecamp 製做，適用於天天寫做的富文本編輯器。官網

文件

處理文件的庫。

• Papa Parse：一款強大的 CSV 庫，支持解析 CSV 文件/字符串，也能導出 CSV。官網
• jBinary：對用聲明式語法描述文件類型和數據結構的二進制文件，進行高級 I/O（加載、解析、操做、序列化、存儲）操做。官網

函數式編程

函數式編程庫擴展了 JavaScript 的能力。

• underscore：JavaScript 的實用工具。官網
• lodash：提供一致性、可定製、高性能和額外功能的實用庫。官網
• Sugar：一個擴展了原生對象功能的 JavaScript 庫。官網
• lazy.js：相似 Underscore，但性能更優越官網
• ramda：一個針對 JavaScript 程序員的實用函數庫。官網
• mout：模塊化的 JavaScript 工具庫。官網
• mesh：流數據同步工具。官網

響應式編程

響應式程序庫擴展了 JavaScript 的能力。

• RxJs：對 JavaScript 進行響應式擴展。官網
• Bacon：JavaScript 的 FPR（函數式響應式編程）庫。官網
• Kefir：受 Bacon.js 和 RxJS 啓發的 FRP 庫，專一於高性能和低內存消耗。官網
• Highland：對 JavaScript 實用工具的從新思考，Highland 能輕易地管理同步和異步信息，並且僅使用標準 JavaScript 和類 Node 流。官網
• Most.js：高性能 FRP 庫。官網

數據結構

數據結構庫用於構建一個更復雜的應用。

• immutable-js：不可變的數據集合，包括 Sequence、Range、Repeat、Map、OrderedMap、Set 和 sparse Vector。官網
• mori：使用 ClojureScript 持久化數據結構和支持原生 JavaScript API 的庫。官網
• buckets：完整的、通過充分測試和記錄數據結構的 JavaScript 庫。官網
• hashmap：簡單的 hashmap 實現，支持任何類型的鍵值。官網

日期

日期庫。

• moment：解析、驗證、操做和顯示日期。官網
• moment-timezone：基於 moment.js 的時區庫。官網
• jquery-timeago：一款支持自動更新模糊時間戳的 jQuery 插件（如："4 分鐘以前"）。官網
• timezone-js：讓 JavaScript Date 對象擁有時區功能。使用 Olson zoneinfo 文件記錄着時區數據。官網
• date：擁有人性化的 Date() 方法。官網
• ms.js：小巧的毫秒轉換工具。官網
• timeago.js：一個很是輕量級(~1.7 Kb)的用於將時間轉化成xxx時間前格式，例如：8分鐘前。官網

字符串

字符串庫。

• selecting：一個容許你獲取用戶選定文本的庫。官網
• underscore.string：擴展了 Underscore.js 的字符串操做。官網
• string.js：額外的 JavaScript 字符串方法。官網
• he：健壯的 HTML 實體編碼/解碼器。官網
• multiline：多行字符串。官網
• query-string：解析和字符串化 URL 查詢字符串。官網
• URI.js：URL 操做庫。官網 
• jsurl：輕量的 URL 操做庫。官網
• sprintf.js：實現字符串格式化。官網
• url-pattern：讓 url 和其它字符串進行比正則表達式匹配更簡單。字符串和數據可相互轉化。官網

數字

• Numeral-js：對數字進行格式化和操做的庫。官網
• odometer：流暢的數字過渡效果。官網
• accounting.js：對數字、金錢、貨幣進行格式化的輕量庫——徹底本地化和無依賴。官網
• money.js：一個小巧（1kb）的貨幣轉換庫，適用於 web 和 nodeJS。官網
• Fraction.js：一個有理數庫。官網
• Complex.js： 一個複數庫。官網
• Polynomial.js：一個多項式庫。官網

存儲

• store.js：爲全部瀏覽器封裝了 LocalStorage，而沒有使用 cookies 和 flash。隱祕地使用 localStorage、globalStorage 和用戶數據。官網
• localForage：改善後的離線存儲。其封裝了 IndexedDB、WebSQL 和 localStorage，擁有操做簡單和強大的 API。官網
• jStorage：jStorage 是一個簡單的鍵值對數據庫，用於在瀏覽器端存儲數據。官網
• cross-storage：得到權限後，能跨域名本地存儲。官網
• basket.js：用 localStorage 加載和緩存腳本的資源加載器。官網
• bag.js：能夠緩存腳本和加載資源，與 basket.js 類似，但增長了鍵值對接口和對 localStorage / websql / 官網undexedDB 的支持。
• basil.js：智能的 JavaScript 數據持久層庫。官網
• jquery-cookie：輕量簡單的、用於讀取、編輯和刪除 cookie 的 jQuery 插件。官網
• Cookies：客戶端 Cookie 操做庫。官網
• DB.js：基於 Promise 的、封裝了 IndexedDB 的庫。官網
• lawnchair.js：簡單的客戶端 JSON 存儲。官網

顏色

• randomColor：JavaScript 顏色生成器。官網
• chroma.js：擁有各類各樣顏色操做的 JavaScript 庫。官網
• color：JavaScript 顏色轉換和操做庫。官網
• colors：更智能的默認 web 顏色。官網
• PleaseJS：隨機建立出賞心悅目的顏色和配色方案。官網
• TinyColor：快速、輕巧的顏色操做和轉換庫。官網
• Vibrant.js：從圖像提取主要顏色。官網

國際化和本地化（I18n And L10n）

本地化和國際化 JavaScript 庫

• i18next：JavaScript 最簡單的國際化（i18n）方法。官網
• polyglot：小巧的國際化助手庫。官網
• babelfish：i18n 提供友好易懂的 API ，而且內置多種支持。官網

類

• ClassManager：世界上最快、最方便的類系統之一。官網
• klass：用於建立極富表現力的類工具庫。官網
• augment：世界上最小且最快的一流 JavaScript 繼承模式。官網

控制流

• async：適用於 node 和瀏覽器的異步工具庫。官網
• q：實現異步的 promise JavaScript 庫。官網
• step：讓邏輯順序合理化的異步控制流庫。官網
• contra：利用函數風格實現的異步流控制。官網
• Bluebird：專一於革新功能和性能的，功能齊全的 promoise 庫。官網
• when：快速可靠的、Promises/A+ 規範的 when() 實現，並且擁有異步其它的優秀特性。官網
• ObjectEventTarget：提供增長了事件監聽的原型（與 DOMElement 的 EventTarget 在瀏覽器行爲一致）。官網

路由

• director：一個小巧的、與 URL 同構的路由器。官網
• page.js：受 Express router 啓發的小型客戶端路由器（約爲1200字節）。官網
• pathjs：簡單、輕量的 web 路由器。官網
• crossroads：JavaScript 路由。官網
• davis.js：使用 pushState、RESTful 風格和可降級的 JavaScript 路由器。官網
• angular-ui-router：基於AngularJS的可嵌套路由。官網

安全性

• DOMPurify：針對 HTML、MathML 和 SVG 的僅支持DOM、快速、高容錯的 XSS 過濾器。官網
• js-xss：經過白名單配置，便可過濾不信任的 HTML（防止 XSS 攻擊）。官網

日誌

• log：帶有樣式的 Console.log。官網
• Conzole：對 JavaScript 原生 console 對象方法和功能進行封裝的 debug 面板，使其顯示在頁面內。官網
• console.log-wrapper：將日誌清晰地記錄到 console，且兼容全部瀏覽器。官網
• loglevel：最輕量的 JavaScript 日誌記錄工具庫，向封裝後可用的 console.log 方法增長可靠的日誌等級。官網
• minilog：輕量的、用流式 API 顯示的、可用於客戶端和服務器端的日誌記錄庫。官網

正則表達式

• RegEx101：在線的 JavaScript 正則表達式測試器和調試器。同時支持 Python、PHP 和 PCRE。官網
• RegExr：用於建立、測試和學習正則表達式的 HTML/JS  工具。官網
• RegExpBuilder：使用鏈式方法建立正則表達式。官網

媒體

• Ion.Sound：可用於任何網頁上簡單音頻。官網

語音命令

• annyang：向網站添加語音命令的語音識別庫。官網
• voix.js：向網站、app 或遊戲添加語音命令的 JavaScript 庫。官網

API

• bottleneck：強大的頻率限制器，使調節流量變得更容易。官網
• oauth-signature-js：適用於 node 和 瀏覽器的 OAuth 1.0a 簽名生成器。官網
• amygdala：爲 Web 應用提供 RESTful HTTP 客戶端解決方案。官網
• jquery.rest：一個讓 RESTful API 更易使用的 jQuery 插件。官網

視覺檢測

• tracking.js：在 web 上實現計算視覺的一種現代方法。官網
• ocrad.js：經過 Emscripten 用 JavaScript 實現 OCR（光學字符識別）。官網

瀏覽器檢測

• bowser：一個瀏覽器檢測器。官網

UI

代碼高亮

• Highlight.js：JavaScript 語法高亮器。官網
• PrismJS：輕量、健壯和優雅的語法高亮器。官網

加載狀態

指示加載狀態的庫。

• Mprogress.js：建立谷歌 Material 設計風格的線性進度條。官網
• NProgress：在 Ajax'y 應用顯示細長型進度條官網
• Spin.js：一個旋轉的進度指示器。官網
• progress.js：爲頁面任何對象建立和管理進度條。官網
• progressbar.js：用 SVG path 動畫製做的、漂亮和響應式的進度條。官網
• pace：自動向你的網站添加一個進度條。官網
• topbar：小巧漂亮的、與網站同寬的進度指示器。官網
• nanobar：很是輕量的進度條。不依賴 jQuery。官網
• PageLoadingEffects：使用 SVG 動畫展示新內容的現代方式。官網
• SpinKit：運用 CSS 動畫的加載指示器集合。官網
• Ladda：內置在按鈕的加載指示器。官網
• css-loaders：運用 CSS 動畫的旋轉加載指示器的集合。官網

除了上述這些庫，還有收藏在 Codepen 的，另外還有 Ajaxload，Preloaders 和 CSSLoad 這些生成器。

驗證

• Parsley.js：不用寫一行 JavaScript 代碼便可在前端驗證表單。官網
• jquery-validation：jQuery 驗證插件。官網
• validator.js：字符串驗證和過濾（在使用用戶輸入以前清理用戶輸入中的有害或危險字符的操做）。官網
• validate.js：受 CodeIgniter 啓發的輕量表單驗證 JavaScript 庫。官網
• validatr：跨瀏覽器的 HTML5 表單驗證庫。官網
• BootstrapValidator：是驗證表單域中最好的 jQuery 插件。要與 Bootstrap 3 一塊兒使用。官網
• is.js：檢查類型、正則表達式、是否存在、時間等。官網
• FieldVal：多用途驗證庫。同時支持同步和異步驗證。官網

鍵盤封裝器

• mousetrap：處理鍵盤快捷鍵的 JavaScript 庫。官網
• keymaster：定義和調度鍵盤快捷鍵的小型庫。官網
• Keypress：鍵入捕捉工具庫，任何鍵均可以成爲一個修飾健。官網
• KeyboardJS：一個用於綁定鍵盤組合的 JavaScript 庫，讓你脫離快捷鍵和快捷鍵組合衝突的痛苦。官網
• jquery.hotkeys：jQuery Hotkeys 能讓你在代碼任何的地方監聽鍵盤事件，並幾乎支持全部按鍵組合。官網
• jwerty：使人驚歎的鍵盤事件處理庫。官網

瀏覽和引導

• intro.js：這是一個介紹新功能的很好方式，能一步步地引導用戶瀏覽你的網站和項目。官網
• shepherd：經過引導讓用戶瀏覽你的應用程序。官網
• bootstrap-tour：應用 Twitter Bootstrap 彈出框對產品進行快速簡單的引導。官網
• tourist：簡單、靈活的應用引導介紹庫。官網
• chardin.js：簡單的應用遮罩層介紹。官網
• pageguide：使用 jQuery 和 CSS3 的 web 頁面元素交互引導庫。官網
• hopscotch：讓開發者更容易向其頁面產品添加引導的框架。官網
• joyride：基於 jQuery 的功能引導插件。官網
• focusable：經過向頁面其他部分添加遮罩層，使焦點彙集在特定 DOM 元素。官網

通知

• messenger：爲你的應用添加 Growl-style 彈框和信息（Crowl 是 Mac OS X 下的一個通知系統）。官網
• noty：jQuery 通知插件。官網
• pnotify：適用於 Bootstrap、jQuery UI 和 Web Notifications Draft 的 JavaScript 通知庫。官網
• toastr：用來顯示簡單的，會自動到期的信息窗口）簡單的彈出框通知（toast notifications官網
• humane-js：一個簡單、時髦的瀏覽器通知系統。官網
• smoke.js：與框架無關的、可以自定義樣式的 JavaScript 彈框系統。官網

幻燈片

• Swiper：使用硬件加速過渡的移動設備觸控滑塊框架。官網
• slick：你所須要的最後一個輪播插件。官網
• slidesJs：響應式的 jQuery（1.7.1+）幻燈片插件，具備觸摸、 CSS3 過渡等特性。官網
• FlexSlider：一款使人驚歎的、全響應式的幻燈片 jQuery 插件。官網
• unslider：最簡單的幻燈片 jQuery 插件。官網
• colorbox：輕量、可自定義的燈箱 jQuery 插件。官網
• fancyBox：提供了良好優雅的方式，爲頁面上的圖片、html 內容和多媒體添加縮放功能的工具。官網
• sly：基於項導航的、支持單向滾動的 JavaScript 庫。官網
• vegas：向頁面添加漂亮的全屏背景的 jQuery 插件，甚至容許幻燈片。官網
• Sequence：用於建立響應式的幻燈片、演示、旗幟廣告和以步驟爲基礎的應用的 CSS 動畫框架。官網
• baguetteBox.js：易於使用的、用純 JavaScript 實現的遮罩層腳本。官網
• reveal.js：用 HTML 建立漂亮演示控件的框架。官網
• PhotoSwipe：適用於移動設備和桌面電腦的、模塊化和不無依賴框架的 JavaScript 畫廊控件。官網
• jcSlider：用 CSS 動畫實現的響應式幻燈片 jQuery 插件。官網
• basic-jquery-slider：易於使用、指定主題和定製化。官網
• unslider： 這是最簡單的幻燈片 jQuery 插件。官網
• viewerjs：原生js實現的圖片查看器。官網
• jQuery.adaptive-slider：帶有自適應顏色標題和導航的幻燈片 jQuery 插件。官網
• slidr：可添加一些幻燈片效果。官網
• Flickity：可觸摸的、響應式的和可輕彈的畫廊。官網

滑塊控件

• Ion.RangeSlider：強大的、易於自定義的範圍滑塊選擇庫，支持不少配置和皮膚。官網
• jQRangeSlider：支持日期的滑塊選擇庫。官網
• noUiSlider：輕量無冗餘的、高度定製化的滑塊選擇庫。官網
• rangeslider.js：HTML5  input 區域滑塊元素。官網

表單組件

輸入

• typeahead.js：快速的、功能齊全的自動補全庫。官網
• tag-it：處理多標籤字段以及標籤建議/自動完成的 jQuery UI 插件。官網
• At.js：向你的應用添加相似 Github 的自動完成提示功能。官網
• Placeholders.js：JavaScript 補全 HTML5 佔位符的屬性。官網
• fancyInput：利用 CSS3 效果讓輸入更有趣。官網
• jQuery-Tags-Input：利用這個 jQuery 插件，可奇妙地將一個簡單的文本輸入轉換成一個酷酷的標籤列表。官網
• vanilla-masker：一個純 JavaScript 實現的輸入控制庫。官網
• Ion.CheckRadio：一個爲複選框和單選按鈕添加樣式的 jQuery 庫，支持多種皮膚。官網

日曆

• pickadate.js：對移動設備友好的、響應式的和輕量的 jQuery 日期 & 時間輸入選擇器。官網
• bootstrap-datepicker：基於 bootstrap 的日曆選擇器。官網
• Pikaday：一個嶄新的 JavaScript 日期選擇器 —— 輕量、無依賴和模塊化的 CSS。官網
• fullcalendar：全尺寸、支持拖放事件的日曆（jQuery 插件）。官網
• rome：可定製的日期（和時間）選擇器。無依賴，可選 UI。官網
• datedropper： datedropper 是一個 jQuery 插件，它提供了快速簡易的方式去管理日期輸入框。官網

選擇

• selectize.js：Selectize 是文本框和選擇框的混合體。它基於jQuery，擁有自動完成和鍵盤感應下拉列表功能，可用於標籤、聯繫人列表等。官網
• select2：它基於 jQuery，是選擇框（select box）的替代品。支持搜索、遠程數據集和無限滾動。官網
• chosen：可讓冗長不便的選擇框更友好的庫。官網

文件上傳

• jQuery-File-Upload：File Upload 是一個支持多文件選擇、文件拖放、進度條、驗證和圖片、音頻、視頻預覽的 官網jQuery 插件。
• dropzone：Dropzone 是一個易於使用且支持多文件拖放的庫。其支持圖片預覽而且擁有很好的進度條效果。官網
• flow.js：一個經過 HTML5 的 File API ，提供多個同時連接的、穩定的、容錯的、可恢復的/可從新開始的文件上傳庫。官網
• fine-uploader：一個帶有進度條、拖放功能和支持直接上傳到 S3 （Amazon Simple Storage Service，亞馬遜簡易存儲服務）的多文件上傳插件。官網
• FileAPI：JavaScript 文件工具集合。支持多文件上傳、拖放和文件分塊上傳。對於圖像，支持裁剪、調整大小和根據 EXIF 自動調整方向。官網
• plupload：處理文件上傳的 JavaScript 官網API，其支持多文件選擇、文件類型過濾、分塊請求、客戶端圖片縮放和根據不一樣的運行環境選擇 HTML五、Silverlight 和 Flash。

其它

• form：jQuery 表單插件。官網
• Garlic.js：自動在本地保存表單文本和選擇框的值，直到表單被提交。官網
• Countable：對某個 HTML 元素包含文本的段落數、單詞數和字符數進行統計的 JavaScript 函數。官網
• card：只需一行代碼，讓信用卡表單變得更友好。官網
• stretchy：自適應大小的 form 元素，表單本應該是這樣的。官網
• list.js：向表格、列表等 HTML 元素添加搜索、排序、過濾和自適應功能的庫。在已有 HTML 上增長可視化。 官網

提示

• tipsy：基於 jQuery 的 Fackbook 風格的提示工具（tooltip）。官網
• opentip：開源且基於 prototype 框架的 JavaScript 工具提示庫。官網
• qTip2：很是強大的工具提示庫。官網
• tooltipster：一個工具提示 jQuery 插件。官網
• simptip：用 Sass 製做的、簡單的工具提示。官網
• jquery-popup-overlay：是一個響應式的和可訪問性強的模態框（modal）和工具提示框 jQuery 插件。官網

模態框和彈出框

• Magnific-Popup：專一於性能、輕量、響應式的燈箱（lightbox）腳本。官網
• jquery-popbox：jQuery 提示框插件。官網
• jquery.avgrund.js：一種新的定於彈出的模態框 jQuery 插件。官網
• vex：新的、擁有高度可配置和易於改變樣式功能的對話框庫。官網
• bootstrap-modal：對 Bootstrap 默認的模態框類進行擴展。其支持響應式、可堆疊和 ajax 等。官網
• css-modal：純 CSS 打造的模態框。官網
• jquery-popup-overlay：是一個響應式的和可訪問性強的模態框和工具提示框（tooltips）jQuery 插件。官網
• layer：國內最多人使用的web彈層組件。官網

滾動

• scrollMonitor：滾動發生時，能夠監聽元素的、簡單、快速的 API。官網
• headroom：除非你須要顯示頁面頭部（header），不然將隱藏它，以騰出頁面頭部空間。官網
• onepage-scroll：建立一個相似 Apple 的單頁面滾動網站（iPhone 5S  網站）。官網
• iscroll：高性能、輕量、無依賴、兼容多平臺的 JavaScript 滾動組件。官網
• skrollr：獨立（不依賴 jQuery） 的視差滾動庫，適用於移動設備（Android + iOS）和桌面電腦。官網
• parallax：面向智能設備的視差引擎。官網
• stellar.js：讓視差滾動變簡單。官網
• plax：基於 jQuery 的視差庫。官網
• jparallax：建立可交互視差效果的 jQuery 插件。官網
• fullPage：簡單和易於使用的、用於建立全屏滾動網站的插件（也被稱爲單頁面網站）。官網
• ScrollMenu：讓老舊無聊的滾動條面目一新。官網

菜單

• jQuery-menu-aim：當用戶光標放在特定下拉菜單項時觸發事件。可製做響應式的、大數據量的下拉菜單，如 Amazon 的。官網
• jQuery contextMenu：右鍵菜單（contextMenu） 管理工具。官網
• Slideout：爲移動設備的 web 應用製做出響應式的、可觸摸滑出的導航菜單。官網
• Slide and swipe：一個基於 touchSwipe 庫的滑出菜單插件。官網

表格/柵格

• jTable：基於 CRUD 表建立 AJAX 的 jQuery 插件。官網
• DataTables：這是一個很是靈活的工具，在漸進加強的基礎上，將高級的交互效果加到 HTML 表格。（jQuery 插件）官網 
• floatThead：（jQuery 插件）鎖定表格頭部，只容許表格內容滾動。適用於任何表格，並且不須要額外的 html 或 css。官網
• Masonry：瀑布流式的網格佈局庫。官網
• Packery：使用裝箱算法（bin-packing）的網格佈局庫。支持拖拽佈局。官網
• Isotope：可過濾和可排序的網格佈局的庫，它能實現 Masonry、Packery 等佈局。官網

框架

• Semantic UI：擁有大量主題和元素的 UI 套件。官網

手勢

• hammer.js：擁有多種觸摸手勢的 JavaScript 庫。官網
• touchemulator：在桌面電腦模仿觸摸輸入。官網
• Dragula：超級易於使用的拖拽庫。官網

觸摸

• fastclick.js：去除觸屏用戶300ms點擊延誤。官網
• dropload.js：移動端下拉刷新，上拉加載更多。官網
• touchslide.js：觸屏滑動特效。官網

地圖

• Leaflet：對移動設備友好的、可交互的地圖 JavaScript 庫。官網
• Cesium：開源的、基於 WebGL 實現的虛擬地球儀和地圖引擎。官網
• gmaps：以最簡單的方式使用 Google 地圖。官網
• polymaps：一個免費的、兼容現代 web 瀏覽器的、用於製做動態可交互的地圖 JavaScript 庫。官網
• kartograph.js：開源的 Kartograph SVG 地圖渲染器。官網
• mapbox.js：Mapbox 的 API，Leaflet 的插件。官網
• jqvmap：矢量地圖 jQuery 插件。官網
• OpenLayers3：高性能的、功能豐富的庫，能知足你對地圖全部需求。官網

視頻/音頻

• prettyembed.js：更完美地嵌入 YouTube —— 擁有很好的選項，如高分辨率的預覽圖、嵌入選項的高級定製和可選的 官網FitVids 支持。
• html5media：能在全部主流瀏覽器播放多媒體標籤中定義的多媒體文件。官網
• Play-em JS：Play'em 是一個 JavaScript 組件，它能管理音樂/視頻播放順序，經過在一個 DIV 元素裏嵌入幾個播放器（Youtube、Soundcloud 和 Vimeo）來控制一系列歌曲的播放。官網
• polyplayer：將 YouTube、Soundcloud 和 Vimeo 播放器的 API 統一成一套。官網
• flowplayer： HTML5 視頻播放器 官網、Github
• mediaelement：讓 HTML五、 Flash 播放器和模仿 HTML5 媒介元素 API 的 Silverlight shim，在全部瀏覽器擁有一致的 UI。官網、Github
• SoundJS：讓音頻在 web 上運行更簡單的庫。它爲不一樣瀏覽器提供了一致的 API。官網

動畫

• velocity：加速 JavaScript 動畫。官網
• jquery.transit：擁有超級流暢的 CSS3 變換和過渡的 jQuery 插件。官網
• impess.js：在 HTML 文檔裏，運用 CSS3 變換和過渡製做相似 Prezi 的展示效果。官網
• bounce.js：能夠馬上建立有趣的 CSS3 動畫。官網
• GreenSock-JS：適用於全部主流瀏覽器的高性能 HTML5 動畫。官網
• TransitionEnd：TransitionEnd 是一個運用 transitonend 事件的、跨瀏覽器的庫。官網
• Dynamics.js：用於建立基於物理知識的 CSS 動畫庫。官網

圖片處理

• lena.js：擁有濾鏡和實用功能的圖像處理庫。官網
• pica：高質量地調整圖片大小（擁有快速的、純 JS 實現的 Lanczos 濾鏡算法）。官網
• cropper：一個簡單的圖像裁剪 jQuery 插件。官網
• AlloyImage：騰訊前端開源的基於HTML5的專業級圖像處理開源引擎。官網

ECMAScript 6

• es6features：ECMAScript 6 特性概述。官網
• es6-features：ECMAScript 6:  特性概述和比較。官網
• ECMAScript 6 compatibility table ：Compatibility tables 展現了各類平臺上全部 ECMAScript 6 特性的支持程度。官網
• Babel (Formerly 6to5)：將 ES6+ 代碼轉換成純 ES5。官網
• Traceur compiler：ES6 特性轉 ES5。包括 classes、generators、promises、destructuring 官網patterns、default parameters 等。

軟件開發工具包(SDK)

• javascript-sdk-design：從工做和我的經驗中提煉出來的 JavaScript SDK 設計指導。官網

大雜燴

• echo：利用 data-* 屬性延遲加載圖片。官網
• picturefill：響應式圖片顯示插件，使瀏覽器支持 srcset、size 屬性。官網
• platform.js：一個平臺檢測庫，幾乎適用於全部 JavaScript 平臺。官網
• json3：一個現代 JSON 實現庫，幾乎兼容全部 JavaScript 平臺。官網
• Logical Or Not：一個關於 JavaScript 特性的遊戲。官網
• BitSet.js：實現位向量的 JavaScript 庫。官網
• Edge.js：運行在一個進程中運行.NET和Node.js代碼。官網、GitHub

精品閱讀

• braziljs/js-the-right-way：官網
• JSbooks：官網
• Superhero.js：關於建立、測試和維護一個大型 JavaScript 代碼庫的資源集。官網
• 《前端開發者都應知道的 jQuery 小技巧》
• 《經常使用的 Javascript 設計模式》
• 《10 個 jQuery 圖表插件推薦》
• 《理解 JavaScript 原型》
• 《只有20行Javascript代碼！手把手教你寫一個頁面模板引擎》
• 《編寫快速、高效的JavaScript代碼》
• 《45個實用的JavaScript技巧、竅門和最佳實踐》
• 《爲現代JavaScript開發作好準備》
• 《給JavaScript初學者的24條最佳實踐》
• 《ECMAScript 6 入門》
• 《JavaScript實例大全》

資源

有影響力的書

具備普遍影響且值得閱讀的前端經典書籍。

• 《Limu：JavaScript 的那些書》
• 《你不知道的Javascript》：英文版 "You Don't Know JS"