前端經常使用js插件

時間 2019-11-09

標籤前端經常使用插件欄目 JavaScript 简体版

原文原文鏈接

JavaScript 資源大全中文版javascript

包管理器

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

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

加載器

JavaScript 的模塊或加載系統。html

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：用自動化構建工具加強你的工做流程！官網
rollup: JavaScript 模塊打包器! 官網中文

測試框架

框架

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 字節。官網
pug：健壯的、優雅且功能豐富的 nodejs 模板引擎。官網
EJS：高效的 JavaScript 模板。官網
xtemplate：可擴展的模板引擎，適用於 node 和瀏覽器。官網
marko：快速輕量且基於 HTML 的模板引擎，支持異步、流、自定義標籤和 CommonJS 模編譯後輸出。適用於 Node.js 官網和瀏覽器。

Flux

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

Reflux是根據React的flux建立的單向數據流類庫。官網
Redux是可預測javascript應用程序狀態的容器。官網
Mobx是經過透明的函數響應式編程實現簡單，可擴展的狀態管理庫。官網
Dva是基於Redux, Redux-saga 和 react-router@2.x的輕量級的框架。官網

數據可視化

Web 數據可視化工具html5

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。java

時間軸

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 製做，適用於天天寫做的富文本編輯器。官網

文件

處理文件的庫。node

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

函數式編程

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

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

響應式編程

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

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的可嵌套路由。官網
react-router: Declarative routing for React 官方
vue-router: Declarative routing for Vue 官方

安全性

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：一個瀏覽器檢測器。官網

性能分析

easy-monitor：一個輕量級實時 Node.js 項目的內核性能分析工具。官網

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 插件，它提供了快速簡易的方式去管理日期輸入框。官網
flatpickr： flatpickr 是一個輕量、強大、無依賴的日曆和時間選擇器插件，支持移動端，並支持React、Ember、Angular和Vue。官網

選擇

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 等。