javascript功能外掛程式大集合，寫前端的親們記得收藏
【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。 awesome-javascript 是 sorrycc 發起維護的 JS 資源清單，內容包括：包管理器、載入器、測試框架、運行器、QA、MVC框架和庫、範本引擎、數據可視化、時間軸、編輯器等等。
轉載自：微信小程式之家 / 原文位址：javascriptt功能外掛程式大集合，寫前端的親們記得收藏_微信小程式之家
伯樂在線已在 GitHub 上發起「JavaScript 資源大全中文版」的整理。 歡迎擴散、歡迎加入。
包管理員
管理著 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.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應用的應用架構
數據可視化
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：一個基於 D3、用於構建自定義圖表和圖形的庫。 官網
- 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。
時間軸
編輯器
- ace：Ace（http://Ajax.org Cloud9 Editor）。 官網
- CodeMirror：瀏覽器端的代碼編輯器。 官網
- esprima：用於綜合分析的 ECMAScript 解析器。 官網
- quill：一個帶有 API 的跨瀏覽器富文字編輯器。 （官網）
- medium-editor：http://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 ，並且內置多種支援。 官網
類
控制流
- 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：可用於任何網頁上簡單音訊。 官網
語音命令
API
- bottleneck：強大的頻率限制器，使調節流量變得更容易。 官網
- oauth-signature-js：適用於 node 和 瀏覽器的 OAuth 1.0a 簽名生成器。 官網
- amygdala：為 Web 應用提供 RESTful HTTP 客戶端解決方案。 官網
- jquery.rest：一個讓 RESTful API 更易使用的 jQuery 外掛程式。 官網
視覺檢測
瀏覽器檢測
- bowser：一個瀏覽器檢測器。 官網
UI
代碼高亮
載入狀態
指示載入狀態的庫。
- 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，其支援多檔案選擇、檔案類型過濾、分塊請求、用戶端圖片縮放和根據不同的運行環境選擇 HTML5、Silverlight 和 Flash。
其它
- form：jQuery 表單外掛程式。 官網
- Garlic.js：自動在本地保存表單文本和選擇框的值，直到表單被提交。 官網
- Countable：對某個 HTML 元素包含文字的段落數、單詞數和字元數進行統計的 JavaScript 函數。 官網
- card：只需一行代碼，讓信用卡表單變得更友好。 官網
- stretchy：自適應大小的 form 元素，表單本應該是這樣的。 官網
- list.js：向表格、清單等 HTML 元素添加搜索、排序、過濾和自適應功能的庫。 在已有 HTML 上增加可視化。 List.js的官網
提示
- 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 套件。 官網
手勢
觸摸
地圖
- 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：讓 HTML5、 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條最佳實踐》