JavaScript 資源大全中文版

jopen 9年前發布 | 151K 次閱讀 JavaScript開發 JavaScript

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

Awesome 系列雖然挺全,但基本只對收錄的資源做了極為簡要的介紹,如果有更詳細的中文介紹,對相應開發者的幫助會更大。這也是我們發起這個開源項目的初衷。


我們要做什么?

  • 基于 awesome-javascript 列表,我們將對其中的各個資源項進行編譯整理。此外還將從其他來源補充好資源。
  • 整理后的內容,將收錄在伯樂在線資源頻道。可參考已整理的內容:

    • jQWidgets:jQuery HTML5 UI組件框架
    • Bootstrap:Web前端開發框架
    • YUI Compressor:JS/CSS壓縮工具
    • </ul> </li> </ul>


      如何參與本項目?

      從下面的目錄來看,本項目的工作量小不了,所以非常期待能有更多程序員一起來參與。

      不過加入前,有幾個小要求:

      • 英文還不錯,能讀懂英文并用自己的話復述;
      • 在用 JavaScript;
      • </ul>

        如有興趣,請加 QQ:50872495。加 Q 時請注明「JS大全」


        本項目的參與者

        • 維護者:
        • 貢獻者:劉健超、MissNull、一兮、Mr. Somebody、Jason Lee
        • </ul>

          注:名單不分排名,不定期補充更新


          目錄

          • JavaScript資源大全中文版

            • 包管理器
            • 加載器
            • 打包工具
            • 測試框架
            • QA 工具
            • MVC 框架和庫
            • 基于 Node 的 CMS 框架
            • 模板引擎
            • 數據可視化

              • 時間軸
              • </ul> </li>

              • 編輯器
              • 工具

                • 文件
                • 函數式編程
                • 響應式編程
                • 數據結構
                • 日期
                • 字符串
                • 數字
                • 存儲
                • 顏色
                • 國際化和本地化
                • 控制流
                • 路由
                • 安全性
                • 日志
                • 正則表達式
                • 媒體
                • 語言命令
                • API
                • 視覺檢測
                • 瀏覽器檢測
                • </ul> </li>

                • UI

                  • 代碼高亮
                  • 加載狀態
                  • 驗證
                  • 鍵盤封裝器
                  • 瀏覽和引導
                  • 通知
                  • 幻燈片
                  • 滑塊控件
                  • 表單組件
                  • 提示
                  • 模態框和彈出框
                  • 滾動條
                  • 菜單
                  • 表格/柵格
                  • 框架
                  • </ul> </li>

                  • 移動

                    • 手勢
                    • </ul> </li>

                    • 地圖
                    • 視頻/音頻
                    • 動畫
                    • 圖片處理
                    • ES6
                    • SDK
                    • 大雜燴
                    • </ul> </li>

                    • 精品閱讀
                    • 資源

                      • 社區
                      • 有影響力的書
                      • 微博、微信公眾號
                      • 知名網站
                      • 博客
                      • </ul> </li> </ul>


                        包管理器

                        管理著 javascript 庫,并提供讀取和打包它們的工具。

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

                          加載器

                          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 模塊系統。
                          • </ul>

                            打包工具

                            • browserify - Browserify 讓你能在瀏覽器端使用 require('modules') ,打包所有依賴。
                            • webpack - 為瀏覽器打包 CommonJs/AMD 模塊。
                            • </ul>

                              測試框架

                              框架

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

                                斷言

                                • chai - 適用于 node.js 和瀏覽器的 BDD / TDD 斷言框架,并能搭配其它測試框架使用。
                                • Sinon.JS - 對 JavaScript 進行 spies、stubs 和 mock 測試。
                                • expect.js - 簡約的、適用于 Node.js 和瀏覽器端的 BDD 式斷言工具。
                                • </ul>

                                  覆蓋率

                                  • istanbul - 另一個 JS 代碼覆蓋率檢測工具。
                                  • blanket - 一個簡單的代碼覆蓋率檢測庫。它的設計理念是易于安裝和使用,且可用于瀏覽器端和 node.js。
                                  • JSCover - JSCover 是一個檢測 JavaScript 程序代碼覆蓋率的工具。
                                  • </ul>

                                    運行器

                                    • 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 解釋器。
                                    • </ul>

                                      QA 工具

                                      • JSHint - JSHint 是一個有助于發現 JavaScript 代碼錯誤和潛在問題的工具。
                                      • jscs - JavaScript 代碼風格檢測工具。
                                      • jsfmt - 格式化、搜索和改寫 JavaScript。
                                      • jsinspect - 檢測復制粘貼和結構類似的代碼。
                                      • buddy.js - 發現 JavaScript 代碼里的 魔術數字
                                      • ESLint - 完全插件化的工具,能在 JavaScript 中識別和記錄模式。
                                      • JSLint - 高標準、嚴格和固執的代碼質量工具,旨在只保持語言的優良部分。
                                      • </ul>

                                        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 組件集合。
                                          • </ul> </li>

                                          • way.js - 簡單、輕量、持久化的雙向數據綁定。
                                          • mithril.js - Mithril 是一個客戶端 MVC 框架(輕量、強大和快速)
                                          • jsblocks - jsblocks 是一個更好的 MV-ish 框架。
                                          • LiquidLava - 易懂的、用于構建用戶界面的 MVC 框架。
                                          • </ul>

                                            基于 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 和博客平臺。
                                            • </ul>

                                              模板引擎

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

                                              • 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 和瀏覽器。
                                              • </ul>

                                                數據可視化

                                                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 游戲的框架。
                                                • </ul>

                                                  也有一些很棒的收費庫,如 amchartplotly 和 highchart

                                                  時間軸

                                                  • TimelineJS -  一個用 JavaScript 編寫的可敘事時間軸庫。
                                                  • timesheet.js - 用于構建簡單的 HTML5 & CSS3 時間表的 JavaScript 庫。
                                                  • </ul>

                                                    編輯器

                                                    • 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 制作,適用于每天寫作的富文本編輯器。
                                                    • </ul>

                                                      文件

                                                      處理文件的庫。

                                                      • Papa Parse - 一款強大的 CSV 庫,支持解析 CSV 文件/字符串,也能導出 CSV。
                                                      • jBinary - 對用聲明式語法描述文件類型和數據結構的二進制文件,進行高級 I/O(加載、解析、操作、序列化、存儲)操作。
                                                      • </ul>

                                                        函數式編程

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

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

                                                          響應式編

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

                                                          • RxJs - 對 JavaScript 進行響應式擴展。
                                                          • Bacon - JavaScript 的 FPR(函數式響應式編程)庫。
                                                          • Kefir - 受 Bacon.js 和 RxJS 啟發的 FRP 庫,專注于高性能和低內存消耗。
                                                          • Highland - 對 JavaScript 實用工具的重新思考,Highland 能輕易地管理同步和異步信息,而且僅使用標準 JavaScript 和類 Node 流。
                                                          • Most.js - 高性能 FRP 庫。
                                                          • </ul>

                                                            數據結構

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

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

                                                              日期

                                                              日期庫。

                                                              • moment - 解析、驗證、操作和顯示日期。
                                                              • moment-timezone - 基于 moment.js 的時區庫。
                                                              • jquery-timeago - 一款支持自動更新模糊時間戳的 jQuery 插件(如:"4 分鐘之前")。
                                                              • timezone-js - 讓 JavaScript Date 對象擁有時區功能。使用 Olson zoneinfo 文件記錄著時區數據。
                                                              • date - 擁有人性化的 Date() 方法。
                                                              • ms.js - 小巧的毫秒轉換工具。
                                                              • </ul>

                                                                字符串

                                                                字符串庫。

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

                                                                  數字

                                                                  • Numeral-js - 對數字進行格式化和操作的庫。
                                                                  • odometer - 流暢的數字過渡效果。
                                                                  • accounting.js - 對數字、金錢、貨幣進行格式化的輕量庫——完全本地化和無依賴。
                                                                  • money.js - 一個小巧(1kb)的貨幣轉換庫,適用于 web 和 nodeJS。
                                                                  • Fraction.js - 一個有理數庫。
                                                                  • Complex.js -  一個復數庫。
                                                                  • Polynomial.js - 一個多項式庫。
                                                                  • </ul>

                                                                    存儲

                                                                    • 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 的、封裝了 IndexDB 的庫。
                                                                    • lawnchair.js - 簡單的客戶端 JSON 存儲。
                                                                    • </ul>

                                                                      顏色

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

                                                                        國際化和本地化(I18n And L10n)

                                                                        本地化和國際化 JavaScript 庫

                                                                        • i18next - JavaScript 最簡單的國際化(i18n)方法。
                                                                        • polyglot - 小巧的國際化助手庫。
                                                                        • babelfish - i18n 提供友好易懂的 API ,并且內置多種支持。
                                                                        • </ul>

                                                                          • ClassManager - 世界上最快、最方便的類系統之一。
                                                                          • klass - 用于創建極富表現力的類工具庫。
                                                                          • augment - 世界上最小且最快的一流 JavaScript 繼承模式。
                                                                          • </ul>

                                                                            控制流

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

                                                                              路由

                                                                              • director - 一個小巧的、與 URL 同構的路由器。
                                                                              • page.js - 受 Express router 啟發的小型客戶端路由器(約為1200字節)。
                                                                              • pathjs - 簡單、輕量的 web 路由器。
                                                                              • crossroads - JavaScript 路由。
                                                                              • davis.js - 使用 pushState、RESTful 風格和可降級的 JavaScript 路由器。
                                                                              • </ul>

                                                                                安全性

                                                                                • DOMPurify - 針對 HTML、MathML 和 SVG 的僅支持DOM、快速、高容錯的 XSS 過濾器。
                                                                                • js-xss - 通過白名單配置,即可過濾不信任的 HTML(防止 XSS 攻擊)。
                                                                                • </ul>

                                                                                  日志

                                                                                  • log - 帶有樣式的 Console.log。
                                                                                  • Conzole - 對 JavaScript 原生 console 對象方法和功能進行封裝的 debug 面板,使其顯示在頁面內。
                                                                                  • console.log-wrapper - 將日志清晰地記錄到 console,且兼容所有瀏覽器。
                                                                                  • loglevel - 最輕量的 JavaScript 日志記錄工具庫,向封裝后可用的 console.log 方法增加可靠的日志等級。
                                                                                  • minilog – 輕量的、用流式 API 顯示的、可用于客戶端和服務器端的日志記錄庫。
                                                                                  • </ul>

                                                                                    正則表達式

                                                                                    • RegEx101 - 在線的 JavaScript 正則表達式測試器和調試器。同時支持 Python、PHP 和 PCRE。
                                                                                    • RegExr - 用于創建、測試和學習正則表達式的 HTML/JS  工具。
                                                                                    • RegExpBuilder - 使用鏈式方法創建正則表達式。
                                                                                    • </ul>

                                                                                      媒體

                                                                                      • Ion.Sound - 可用于任何網頁上簡單音頻。
                                                                                      • </ul>

                                                                                        語音命令

                                                                                        • annyang - 向網站添加語音命令的語音識別庫。
                                                                                        • voix.js - 向網站、app 或游戲添加語音命令的 JavaScript 庫。
                                                                                        • </ul>

                                                                                          API

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

                                                                                            視覺檢測

                                                                                            • tracking.js - 在 web 上實現計算視覺的一種現代方法。
                                                                                            • ocrad.js - 通過 Emscripten 用 JavaScript 實現 OCR(光學字符識別)。
                                                                                            • </ul>

                                                                                              瀏覽器檢測

                                                                                              • bowser - 一個瀏覽器檢測器。
                                                                                              • </ul>

                                                                                                UI

                                                                                                代碼高亮

                                                                                                • Highlight.js - JavaScript 語法高亮器。
                                                                                                • PrismJS - 輕量、健壯和優雅的語法高亮器。
                                                                                                • </ul>

                                                                                                  加載狀態

                                                                                                  指示加載狀態的庫。

                                                                                                  • 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 動畫的旋轉加載指示器的集合。
                                                                                                  • </ul>

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

                                                                                                    驗證

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

                                                                                                      鍵盤封裝器

                                                                                                      • mousetrap - 處理鍵盤快捷鍵的 JavaScript 庫。
                                                                                                      • keymaster - 定義和調度鍵盤快捷鍵的小型庫。
                                                                                                      • Keypress - 鍵入捕捉工具庫,任何鍵都可以成為一個修飾健。
                                                                                                      • KeyboardJS - 一個用于綁定鍵盤組合的 JavaScript 庫,讓你脫離快捷鍵和快捷鍵組合沖突的痛苦。
                                                                                                      • jquery.hotkeys - jQuery Hotkeys 能讓你在代碼任何的地方監聽鍵盤事件,并幾乎支持所有按鍵組合。
                                                                                                      • jwerty - 令人驚嘆的鍵盤事件處理庫。
                                                                                                      • </ul>

                                                                                                        瀏覽和引導

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

                                                                                                          通知

                                                                                                          • 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 彈框系統。
                                                                                                          • </ul>

                                                                                                            幻燈片

                                                                                                            • 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 插件。
                                                                                                            • jQuery.adaptive-slider - 帶有自適應顏色標題和導航的幻燈片 jQuery 插件。
                                                                                                            • slidr - 可添加一些幻燈片效果。
                                                                                                            • Flickity - 可觸摸的、響應式的和可輕彈的畫廊。
                                                                                                            • </ul>

                                                                                                              滑塊控件

                                                                                                              • Ion.RangeSlider - 強大的、易于自定義的范圍滑塊選擇庫,支持很多配置和皮膚。
                                                                                                              • jQRangeSlider - 支持日期的滑塊選擇庫。
                                                                                                              • noUiSlider - 輕量無冗余的、高度定制化的滑塊選擇庫。
                                                                                                              • rangeslider.js - HTML5  input 區域滑塊元素。
                                                                                                              • </ul>

                                                                                                                表單組件

                                                                                                                輸入

                                                                                                                • 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 庫,支持多種皮膚。
                                                                                                                • </ul>

                                                                                                                  日歷

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

                                                                                                                    選擇

                                                                                                                    • selectize.js - Selectize 是文本框和選擇框的混合體。它基于jQuery,擁有自動完成和鍵盤感應下拉列表功能,可用于標簽、聯系人列表等。
                                                                                                                    • select2 - 它基于 jQuery,是選擇框(select box)的替代品。支持搜索、遠程數據集和無限滾動。
                                                                                                                    • chosen - 可以讓冗長不便的選擇框更友好的庫。
                                                                                                                    • </ul>

                                                                                                                      文件上傳

                                                                                                                      • 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。
                                                                                                                      • </ul>

                                                                                                                        其它

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

                                                                                                                          提示

                                                                                                                          • tipsy - 基于 jQuery 的 Fackbook 風格的提示工具(tooltip)。
                                                                                                                          • opentip - 開源且基于 prototype 框架的 JavaScript 工具提示庫。
                                                                                                                          • qTip2 - 非常強大的工具提示庫。
                                                                                                                          • tooltipster - 一個工具提示 jQuery 插件。
                                                                                                                          • simptip - 用 Sass 制作的、簡單的工具提示。
                                                                                                                          • jquery-popup-overlay - 是一個響應式的和可訪問性強的模態框(modal)和工具提示框 jQuery 插件。
                                                                                                                          • </ul>

                                                                                                                            模態框和彈出框

                                                                                                                            • Magnific-Popup - 專注于性能、輕量、響應式的燈箱(lightbox)腳本。
                                                                                                                            • jquery-popbox - jQuery 提示框插件。
                                                                                                                            • jquery.avgrund.js - 一種新的定于彈出的模態框 jQuery 插件。
                                                                                                                            • vex - 新的、擁有高度可配置和易于改變樣式功能的對話框庫。
                                                                                                                            • bootstrap-modal - 對 Bootstrap 默認的模態框類進行擴展。其支持響應式、可堆疊和 ajax 等。
                                                                                                                            • css-modal - 純 CSS 打造的模態框。
                                                                                                                            • jquery-popup-overlay - 是一個響應式的和可訪問性強的模態框和工具提示框(tooltips)jQuery 插件。
                                                                                                                            • </ul>

                                                                                                                              滾動

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

                                                                                                                                菜單

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!