「首席架構師推薦」一系列很棒的的瀏覽器端JavaScript庫資源

  • 2019 年 10 月 5 日
  • 筆記

包管理器

託管JavaScript庫並提供用於獲取和打包它們的工具。

  • npm – npm是JavaScript的包管理器。
  • Bower – 網路包管理器。
  • component – 用於構建更好的Web應用程式的客戶端包管理。
  • spm – 全新的靜態包管理器。
  • jam – 使用以瀏覽器為中心且與RequireJS兼容的存儲庫的包管理器。
  • jspm – 無摩擦瀏覽器包管理。
  • 恩德 – 無庫圖書館。
  • volo – 從模板創建前端項目,添加依賴項並自動生成項目。
  • Duo – 下一代軟體包管理器,融合了Component,Browserify和Go的最佳創意,使組織和編寫前端程式碼快速而輕鬆。
  • yarn – 快速,可靠,安全的依賴管理。

載入器 (Loaders)

  • JavaScript的模組或載入系統。
  • RequireJS – JavaScript的文件和模組載入器。
  • browserify – 瀏覽器端require()node.js方式。
  • SeaJS – Web的模組載入器。
  • HeadJS – HEAD中唯一的腳本。
  • curl – 一個小型,快速,可擴展的模組載入器,可處理AMD,CommonJS模組/ 1.1,CSS,HTML /文本和舊腳本。
  • lazyload – 微小的,無依賴的非同步JavaScript和CSS載入器。
  • script.js – 非同步JavaScript載入器和依賴項管理器。
  • systemjs – 符合AMD,CJS和ES6規範的模組載入器。
  • LodJS – 基於AMD的模組載入器。
  • ESL – 模組載入器瀏覽器首先,支援懶惰定義和AMD。
  • modulejs – 輕量級JavaScript模組系統。

Bundlers

  • browserify – Browserify允許您通過捆綁所有依賴項來在瀏覽器中(「模組」)。
  • webpack – 為瀏覽器打包CommonJs / AMD模組。
  • Rollup – 下一代ES6模組捆綁器。
  • Brunch – 具有簡單聲明配置的快速前端Web應用程式構建工具。
  • Parcel – 快速,零配置Web應用程式捆綁器。

測試框架

構架

  • mocha – 簡單,靈活,有趣的node.js和瀏覽器JavaScript測試框架。
  • jasmine – DOM-less簡單的JavaScript測試框架。
  • qunit – 一個易於使用的JavaScript單元測試框架。
  • jest – 無痛的JavaScript單元測試。
  • prova – 基於Tape和Browserify的節點和瀏覽器測試運行器
  • DalekJS – 使用JavaScript實現自動跨瀏覽器功能測試
  • Protractor – Protractor是AngularJS應用程式的端到端測試框架。
  • tape – 用於節點和瀏覽器的Tap生成測試工具。
  • TestCafe – 針對現代Web開發堆棧的自動瀏覽器測試。
  • ava – 未來的JavaScript測試運行器

斷言

  • chai – node.js的BDD / TDD斷言框架和可以與任何測試框架配對的瀏覽器。
  • Enzyme – Enzyme是React的JavaScript測試實用程式,可以更容易地斷言,操作和遍歷React Components的輸出。
  • 反應測試庫 – 簡單而完整的React DOM測試實用程式,可以鼓勵良好的測試實踐。
  • Sinon.JS – 測試JavaScript的間諜,存根和模擬。
  • expect.js – Node.JS和瀏覽器的簡約BDD風格斷言。

覆蓋

  • istanbul – 又一個JS程式碼覆蓋工具。
  • blanket – 一個簡單的JavaScript程式碼覆蓋庫。瀏覽器和nodejs易於安裝和使用。
  • JSCover – JSCover是一個測量JavaScript程式程式碼覆蓋率的工具。

Runner

  • phantomjs – Scriptable Headless WebKit。
  • slimerjs – 運行Gecko的類似PhantomJS的工具。
  • casperjs – PhantomJS和SlimerJS的導航腳本和測試實用程式。
  • zombie – 使用node.js進行瘋狂快速,全棧,無頭瀏覽器測試
  • totoro – 一個簡單而穩定的跨瀏覽器測試工具。
  • karma – JavaScript的壯觀測試賽跑者。
  • nightwatch – 基於node.js和selenium webdriver的UI自動化測試框架。
  • nightwatch – UI – JavaScript的下一代程式碼測試堆棧。
  • yolpo – 瀏覽器中的語句JavaScript解釋器。

品質檢查工具

  • prettier – Prettier是一個自以為是的程式碼格式化程式。
  • JSHint – JSHint是一個有助於檢測JavaScript程式碼中的錯誤和潛在問題的工具。
  • jscs – JavaScript程式碼樣式檢查器。
  • jsfmt – 用于格式化,搜索和重寫JavaScript。
  • jsinspect – 檢測複製粘貼和結構相似的程式碼。
  • buddy.js – JavaScript的幻數檢測。
  • ESLint – 一種完全可插入的工具,用於識別和報告JavaScript中的模式。
  • JSLint – 高標準,嚴格和固定的程式碼品質工具,旨在保持語言的優秀部分。
  • JavaScript標準樣式 – 意見,無配置樣式指南,樣式檢查器和格式化程式

MVC框架和庫

  • angular.js – 針對網路應用增強的HTML。
  • aurelia – 適用於移動,桌面和Web的JavaScript客戶端框架。
  • backbone – 為您的JS應用程式提供模型,視圖,集合和事件的一些骨幹。
  • 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。
  • hyperapp – 用於構建前端應用程式的1kb JavaScript庫。
  • preact – 使用相同的ES6 API快速3kb React替代方案。組件和虛擬DOM。
  • nativescript – 使用JavaScript構建真正的原生跨平台iOS和Android應用程式。
  • react-native – 使用React構建本機應用程式的框架。
  • riot – 類似React的庫,但體積非常小。
  • thorax – 加強你的骨幹。
  • chaplin – 使用Backbone.js庫的JavaScript應用程式的體系結構。
  • marionette – Backbone.js的複合應用程式庫,旨在簡化大型JavaScript應用程式的構建。
  • ripple – 構建反應性視圖的微小基礎。
  • rivets – 輕量級和強大的數據綁定+模板解決方案。
  • derby – MVC框架,可以輕鬆編寫在Node.js和瀏覽器中運行的實時協作應用程式。
  • derby-awesome – 一系列令人敬畏的德比組件
  • way.js – 簡單,輕量,持久的雙向數據綁定。
  • mithril.js – Mithril是一個客戶端MVC框架(輕量級,健壯,快速)。
  • jsblocks – jsblocks是更好的MV-ish框架。
  • LiquidLava – 用於構建用戶介面的透明MVC框架。
  • feathers – 明天應用程式的極簡主義實時JavaScript框架。
  • Keo – 具有Shadow DOM支援的功能無狀態React組件。
  • atvjs – 使用純JavaScript快速開發Apple TV應用程式

基於Node的CMS框架

  • KeystoneJS – 功能強大的CMS和Web應用程式框架。
  • Reaction Commerce – 反應式CMS,實時架構和設計。
  • Ghost – 簡單,強大的發布平台。
  • Apostrophe – CMS內容編輯和基本服務。
  • We.js – 實時應用程式,網站或部落格的框架。
  • Hatch.js – 具有社交功能的CMS平台。
  • TaracotJS – 基於Node.js的快速簡約CMS。
  • Nodizecms – 適用於CoffeeScript愛好者的CMS。
  • Cody – CMS與WSYWYG編輯器。
  • PencilBlue – CMS和部落格平台。

模板引擎

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

  • mustache.js – JavaScript中{{mustaches}}的最小模板。
  • handlebars.js – Mustache模板語言的擴展。
  • nunjucks – 來自Mozilla的JavaScript豐富而強大的模板語言。
  • hogan.js – Mustache模板語言的編譯器。
  • doT – nodejs和瀏覽器的最快+簡潔的JavaScript模板引擎。
  • dustjs – 瀏覽器和node.js的非同步模板。
  • eco – 嵌入式CoffeeScript模板。
  • JavaScript-Templates – <1KB輕量級,快速且功能強大的JavaScript模板引擎,具有零依賴性。
  • t.js – 一個小的JavaScript模板框架,約400位元組gzip壓縮。
  • Pug – 用於nodejs的強大,優雅,功能豐富的模板引擎。(以前稱為玉)
  • EJS – 有效的JavaScript模板。
  • xtemplate – 節點和瀏覽器的可擴展模板引擎庫
  • marko – 一個快速,輕量級,基於HTML的模板引擎,用於Node.js和瀏覽器,具有非同步,流,自定義標籤和CommonJS模組作為編譯輸出。
  • swig – 一個簡單,功能強大且可擴展的Node.js和基於瀏覽器的JavaScript模板引擎。

數據可視化

用於Web的數據可視化工具。

  • d3 – 用於HTML和SVG的JavaScript可視化庫。
  • metrics-graphics – 針對簡潔,有原則的數據圖形和布局進行優化的庫。
  • pykcharts.js – 精心設計的d3.js圖表,沒有d3.js的複雜性。
  • three.js – JavaScript 3D庫。
  • Chart.js – 使用標記的簡單HTML5圖表。
  • paper.js – 瑞士軍刀矢量圖形腳本 – 使用HTML5 Canvas移植到JavaScript和瀏覽器的Scriptographer。
  • fabric.js – JavaScript Canvas Library,SVG-to-Canvas(&canvas-to-SVG)Parser。
  • peity – 漸進式條形圖,折線圖和餅圖。
  • raphael – JavaScript矢量庫。
  • echarts – 企業圖表。
  • vis – 基於瀏覽器的動態可視化庫。
  • two.js – 用於網路的渲染器不可知的二維繪圖api。
  • g.raphael – Raphaël的圖表。
  • sigma.js – 專用於圖形繪製的JavaScript庫。
  • arbor – 使用Web worker和jQuery的圖形可視化庫。
  • cubism – 用於可視化時間序列的D3插件。
  • dc.js – 多維圖表,可與使用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畫布的熱圖的JavaScript庫。
  • jquery.sparkline – jQuery JavaScript庫的插件,可直接在瀏覽器中生成小的迷你圖表。
  • xCharts – 基於D3的庫,用於構建自定義圖表和圖形。
  • trianglify – 低聚風格背景發生器與d3.js.
  • d3-cloud – 在JavaScript中創建單詞雲。
  • d4 – D3的友好可重用圖表DSL。
  • dimple.js – 由d3支援的簡單業務分析圖表。
  • chartist-js – 簡單的響應式圖表。
  • epoch – 通用實時圖表庫。
  • c3 – 基於D3的可重用圖表庫。
  • BabylonJS – 使用HTML 5和WebGL構建3D遊戲的框架。
  • recharts – 使用React和D3構建的重新定義的圖表庫。
  • GraphicsJS – 一個輕量級JavaScript圖形庫,具有基於SVG / VML技術的直觀API。
  • mxGraph – 圖表庫,可以快速創建互動式圖形和圖表應用程式,這些應用程式可以在其供應商支援的任何主要瀏覽器中本機運行。
  • 還有一些很棒的商業庫,如amchart,anychart,plotly和highchart。

時間線

  • TimelineJS v3 – 用JavaScript構建的講故事時間軸。
  • timesheet.js – 簡單HTML5和CSS3時間表的JavaScript庫。

電子表格

  • HANDSONTABLE – Handsontable是面向開發人員的JavaScript / HTML5電子表格庫

編輯器

  • ace – Ace(Ajax.org Cloud9編輯器)。
  • CodeMirror – 瀏覽器內程式碼編輯器。
  • esprima – 用於多功能分析的ECMAScript解析基礎設施。
  • quill – 帶有API的跨瀏覽器的富文本編輯器。
  • medium-editor – Medium.com WYSIWYG編輯器克隆。
  • pen – 享受現場編輯(+Markdown)。
  • jquery-notebook – 一個簡單,乾淨,優雅的文本編輯器。靈感來自Medium的精彩。
  • bootstrap-wysiwyg – 與Tiny bootstrap兼容的WYSIWYG富文本編輯器。
  • ckeditor-releases – 適合所有人的最佳網路文本編輯器。
  • editor – Markdown編輯。仍處於發展階段。
  • EpicEditor – 一個可嵌入的JavaScript Markdown編輯器,具有分屏全螢幕編輯,實時預覽,自動草稿保存,離線支援等功能。
  • jsoneditor – 一個基於Web的工具,用於查看,編輯和格式化JSON。
  • vim.js – 帶有持久性〜/ .vimrc的Vim的JavaScript埠。
  • Squire – HTML5富文本編輯器。
  • TinyMCE – JavaScript Rich Text編輯器。
  • trix – 用於日常寫作的富文本編輯器。通過Basecamp。
  • Trumbowyg – 一個輕量級且令人驚嘆的WYSIWYG JavaScript編輯器。
  • Draft.js – 用於構建文本編輯器的React框架。
  • bootstrap-wysihtml5 – 簡單,漂亮的所見即所得的編輯器
  • wysihtml5 – 基於HTML5的開源富文本編輯器和漸進增強方法。使用複雜的安全性概念,旨在通過防止不可維護的標籤湯和內聯樣式來生成完全有效的HTML5標記。
  • raptor-editor – Raptor,HTML5 WYSIWYG內容編輯器!
  • popline – Popline是一個HTML5富文本編輯器工具欄。

文檔

  • DevDocs是一個一體化的API文檔閱讀器,具有快速,有條理和一致的介面。
  • dexy是一種自由形式的文化文檔工具,用於編寫包含程式碼的任何類型的技術文檔。
  • docco是一個快速,骯髒,百行,文化編程風格的文檔生成器。
  • styledocco從樣式表生成文檔和樣式指南文檔。
  • Ronn製作手冊。它將簡單的,人類可讀的文本文件轉換為roff用於終端顯示,也轉換為HTML用於Web。
  • dox是一個用節點編寫的JavaScript文檔生成器。Dox不再為您的文檔生成固定的結構或樣式,它只是為您提供JSON表示,允許您使用markdown和JSDoc樣式的標記。
  • jsdox是一個JSDoc3到Markdown文檔生成器。
  • ESDoc是一個很好的JavaScript文檔生成器。
  • YUIDoc是一個Node.js應用程式,它使用類似於Javadoc和Doxygen等工具的語法,從源程式碼中的注釋生成API文檔。
  • coddoc是一個jsdoc解析庫。Coddoc的不同之處在於,它允許用戶通過使用coddoc.addTagHandler和coddoc.addCodeHandler添加標記和程式碼解析器,從而可以輕鬆擴展。coddoc還解析了在API中使用的源程式碼。
  • sphinx是一款可輕鬆創建智慧和精美文檔的工具
  • 使用JSDoc
  • Beautiful docs是一個基於markdown文件的文檔查看器。
  • documentation.js – 支援ES2015 +和流程注釋的API文檔生成器。
  • jsduck – 為Sencha JavaScript框架製作的API文檔生成器,但也可用於其他框架。

文件

用於處理文件的庫。

  • Papa Parse – 一個功能強大的CSV庫,支援解析CSV文件/字元串並導出為CSV。
  • jBinary – 具有聲明性語法的二進位文件的高級I / O(載入,解析,操作,序列化,保存),用於描述文件類型和數據結構。
  • diff2html – Git diff輸出解析器和漂亮的HTML生成器。
  • jsPDF – JavaScript PDF生成。
  • PDF.js – JavaScript中的PDF閱讀器。

函數編程

函數式編程庫,用於擴展JavaScript的功能。

  • underscore – JavaScript的實用程式_腰帶。
  • lodash – 提供一致性,訂製,性能和附加功能的實用程式庫。
  • Sugar – 用於處理本機對象的JavaScript庫。
  • lazy.js – 像下劃線,但更懶。
  • ramda – JavaScript程式設計師的實用函數庫。
  • mout – 模組化JavaScript實用程式。
  • mesh – Streamable數據同步實用程式。
  • preludejs – JavaScript的硬核函數式編程。

反應式編程

反應式編程庫,以擴展JavaScript的功能。

  • RxJs – JavaScript的反應性擴展。
  • Bacon – 用於JavaScript的FRP(功能反應式編程)庫。
  • Kefir – 針對JavaScript的FRP庫,受到Bacon.js和RxJS的啟發,專註於高性能和低記憶體消耗。
  • Highland – 重新思考JavaScript實用程式帶,Highland輕鬆管理同步和非同步程式碼,僅使用標準JavaScript和類似Node的Streams。
  • Most.js – 高性能FRP庫。
  • MobX – 用於簡單,可擴展狀態管理的TFRP庫。
  • Cycle.js – 一個功能強大且反應靈敏的JavaScript庫,用於更清晰的程式碼。

數據結構

數據結構庫構建更複雜的應用程式。

  • immutable-js – 不可變數據集合,包括序列,範圍,重複,映射,OrderedMap,Set和稀疏向量。
  • mori – 一個庫,用於使用ClojureScript的持久數據結構,並從舒適的vanilla JavaScript中支援API。
  • 存儲桶 – 用JavaScript編寫的完整,經過全面測試和記錄的數據結構庫。
  • hashmap – 支援任何類型密鑰的簡單hashmap實現。

日期

日期庫。

  • moment – 在JavaScript中解析,驗證,操作和顯示日期。
  • moment-timezone – 時區支援moment.js。
  • jquery-timeago – 一個jQuery插件,可以輕鬆支援自動更新模糊時間戳(例如「4分鐘前」)。
  • timezone-js – 啟用時區的JavaScript Date對象。使用Olson zoneinfo文件獲取時區數據。
  • date – 人類的日期()。
  • ms.js – 微小的毫秒轉換實用程式。
  • countdown.js – 超級簡單的倒計時。
  • timeago.js – 簡單的庫(小於2kb)用于格式化日期與*** time ago語句。
  • fecha – 輕量級日期格式化和解析(~2KB)。意味著要取代moment.js的解析和格式化功能。
  • date-fns – 現代JavaScript日期實用程式庫。
  • map-countdown – 基於Google地圖構建的瀏覽器倒計時

字元串

字元串庫。

  • voca – 終極JavaScript字元串庫
  • selecting – 允許您訪問用戶選擇的文本的庫。
  • underscore.string – Underscore.js JavaScript庫的字元串操作擴展。
  • string.js – 額外的JavaScript字元串方法。
  • he – 用JavaScript編寫的強大的HTML實體編碼器/解碼器。
  • multiline – JavaScript中的多行字元串。
  • query-string – 解析和字元串化URL查詢字元串。
  • URI.js – JavaScript URL變異庫。
  • jsurl – 使用JavaScript進行輕量級URL操作。
  • sprintf.js – sprintf實現。
  • url-pattern – 比url和其他字元串的正則表達式字元串匹配模式更容易。將字元串轉換為數據或數據為字元串。

數字

  • Numeral-js – 用于格式化和操作數字的JavaScript庫。
  • chance.js – JavaScript中的隨機生成器助手。可以生成數字,字元串等。
  • odometer – 輕鬆過渡數字。
  • accounting.js – 用於數字,貨幣和貨幣格式的輕量級JavaScript庫 – 完全可本地化,零依賴性。
  • money.js – 一個小的(1kb)JavaScript貨幣轉換庫,用於web和nodeJS。
  • Fraction.js – JavaScript的有理數字型檔。
  • Complex.js – JavaScript的複數庫。
  • Polynomial.js – JavaScript的多項式庫。

存儲

  • store.js – 所有瀏覽器的LocalStorage包裝器,不使用cookie或flash。使用localStorage,globalStorage和userData行為。
  • localForage – 改進的離線存儲。使用簡單但功能強大的API包裝IndexedDB,WebSQL或localStorage。
  • jStorage – jStorage是一個簡單的鍵/值資料庫,用於在瀏覽器端存儲數據。
  • cross-storage – 跨域本地存儲,具有許可權。
  • basket.js – 用於使用localStorage快取和載入腳本的腳本和資源載入器。
  • bag.js – 一個快取腳本和資源載入器,類似於basket.js,但具有額外的k / v介面和localStorage / websql / indexedDB支援。
  • basil.js – 缺少的JavaScript智慧持久層。
  • jquery-cookie – 一個簡單,輕量級的jQuery插件,用於讀取,寫入和刪除cookie。
  • js-cookie – 用於處理瀏覽器cookie的簡單輕量級JavaScript API。
  • Cookie – JavaScript客戶端Cookie操作庫。
  • DB.js – 基於Promise的IndexDB Wrapper庫。
  • lawnchair.js – 簡單的客戶端JSON存儲。
  • sql.js – 通過Emscripten編譯為JavaScript的SQLite。

Color(顏色)

  • randomColor – JavaScript的顏色生成器。
  • chroma.js – 用於各種顏色操作的JavaScript庫。
  • color – JavaScript顏色轉換和操作庫。
  • colors – 網路上顏色的更智慧默認值。
  • PleaseJS – 用於創建隨機賞心悅目的顏色和配色方案的JavaScript庫。
  • TinyColor – 快速,小巧的顏色處理和JavaScript轉換。
  • Vibrant.js – 從影像中提取突出的顏色。

I18n和L10n

本地化(l10n)和國際化(i18n)JavaScript庫。

  • i18next – 使用JavaScript輕鬆實現國際化(i18n)。
  • polyglot – tiny i18n helper library。
  • babelfish – i18n具有人性化的API並內置複數支援。
  • ttag – 基於ES6標記模板和良好的舊GNU gettext的現代javascript i18n本地化庫。

控制流

  • async – 節點和瀏覽器的非同步實用程式。
  • q – 用於在JavaScript中創建和編寫非同步promise的工具。
  • step – 一個非同步控制流庫,可以輕鬆地逐步執行邏輯。
  • contra – 具有功能性的非同步流量控制。
  • Bluebird – 功能齊全的承諾庫,專註於創新功能和性能。
  • when – 一個可靠,快速的Promises / A +和when()實現,以及其他非同步好東西。
  • ObjectEventTarget – 提供一個原型,為事件偵聽器添加支援(在瀏覽器上可用的DOMElements中具有相同的EventTarget行為)。

路由

  • director – 一個用於JavaScript的小而同構的URL路由器。
  • page.js – 受Express路由器啟發的微客戶端路由器(~1200位元組)。
  • pathjs – 用於Web瀏覽器的簡單輕量級路由。
  • crossroads- JavaScript路線。
  • davis.js – 使用pushState的RESTful可降級JavaScript路由。

安全

  • DOMPurify – 用於HTML,MathML和SVG的僅限DOM,超快速,超級容忍的XSS清理程式。
  • js-xss – 使用白名單指定的配置清理不受信任的HTML(以防止XSS)。
  • xss-filters – 雅虎安全的XSS過濾器。

日誌

  • log – 帶有樣式的Console.log。
  • Conzole – 一個用JavaScript構建的調試面板,它在頁面內顯示的面板中包裝JavaScript本機控制台對象方法和功能。
  • console.log-wrapper – 在任何瀏覽器中清楚地記錄到控制台。
  • loglevel – JavaScript的最小輕量級日誌記錄,添加可靠的日誌級別方法來包裝任何可用的console.log方法。
  • minilog – 使用Stream-API後端的輕量級客戶端和伺服器端日誌記錄。
  • storyboard – 通用日誌庫+ Chrome擴展;它允許您在一個位置查看由用戶操作觸發的所有客戶端和伺服器任務。

正則表達式

  • RegEx101 – 用於JavaScript的在線正則表達式測試器和調試器。還支援Python,PHP和PCRE。
  • RegExr – 基於HTML / JS的工具,用於創建,測試和學習正則表達式。
  • RegExpBuilder – 使用鏈式方法創建正則表達式。

語音控制

  • annyang – 一個JavaScript庫,用於使用語音識別向您的站點添加語音命令。
  • voix.js – 一個JavaScript庫,用於為您的網站,應用或遊戲添加語音命令。

API

  • axios – 基於Promise的HTTP客戶端,用於瀏覽器和node.js.
  • bottleneck- 一種強大的速率限制器,可以輕鬆控制節流。
  • oauth-signature-js – 用於節點和瀏覽器的JavaScript OAuth 1.0a簽名生成器。
  • amygdala – 用於JavaScript驅動的Web應用程式的RESTful HTTP客戶端。
  • jquery.rest – 一個jQuery插件,可以輕鬆使用RESTful API。
  • Rails Ranger – Ruby on Rails API的固定REST客戶端。

流(Streaming)

  • Tailor – 前端微服務的流媒體布局服務,受Facebook的BigPipe啟發。

視覺檢測

  • tracking.js – 網路上電腦視覺的現代方法。
  • ocrad.js – 通過Emscripten在JavaScript中進行OCR。

機器學習

  • ConvNetJS – JavaScript中的深度學習。在您的瀏覽器中訓練卷積神經網路(或普通的)。
  • DN2A – 數字神經網路架構。
  • Brain.js – JavaScript中的神經網路。
  • Mind.js – 一個靈活的神經網路庫。
  • Synaptic.js – node.js和瀏覽器的免架構神經網路庫。
  • TensorFlow.js – 用於在瀏覽器和Node.js上訓練和部署ML模型的JavaScript庫。
  • ml5.js – 友好的網路機器學習。

瀏覽器檢測

  • bowser – 瀏覽器探測器。

基準

  • benchmark.js – 基準測試庫。正如在jsPerf.com上使用的那樣。
  • matcha – 以咖啡因為導向,簡單化的基準測試方法。

程式碼突出顯示

  • Highlight.js – JavaScript語法高亮顯示。
  • PrismJS – 輕巧,強大,優雅的語法高亮。

載入狀態

用於指示負載狀態的庫。

  • Mprogress.js – 創建Google Material Design進度線性欄。
  • NProgress – 用於Ajax'y應用程式的超薄進度條。
  • Spin.js – 旋轉活動指標。
  • progress.js – 為頁面上的每個對象創建和管理進度條。
  • progressbar.js – 具有動畫SVG路徑的美麗且響應迅速的進度條。
  • pace – 自動為您的網站添加進度條。
  • topbar – Tiny&beautiful全站點進度指示器。
  • nanobar – 非常輕量級的進度條。沒有jQuery。
  • PageLoadingEffects – 使用SVG動畫顯示新內容的現代方式。
  • SpinKit – 使用CSS動畫的載入指示符的集合。
  • Ladda – 帶內置裝載指示器的按鈕。
  • css-loaders – 使用CSS動畫載入微調器的集合
  • 除了庫之外,還有Codepen上的Collection,以及Ajaxload,Preloaders和CSSLoad等生成器。

驗證

  • Parsley.js – 無需編寫單行JavaScript即可驗證表單前端。
  • jquery-validation – jQuery Validation Plugin。
  • validator.js – 字元串驗證和清理。
  • validate.js – 受CodeIgniter啟發的輕量級JavaScript表單驗證庫。
  • validatr – 跨瀏覽器HTML5表單驗證。
  • FormValidation – 驗證表單欄位的最佳jQuery插件。以前的BootstrapValidator。
  • is.js – 檢查類型,正則表達式,狀態,時間等。
  • FieldVal – 多用途驗證庫。支援同步和非同步驗證。

鍵盤包裝

  • mousetrap – 用於處理JavaScript中鍵盤快捷鍵的簡單庫。
  • keymaster – 用於定義和分派鍵盤快捷鍵的簡單微庫。
  • Keypress – 鍵盤輸入捕獲實用程式,其中任何鍵都可以是修飾鍵。
  • KeyboardJS – 用於綁定鍵盤組合的JavaScript庫,沒有鍵碼和鍵組合衝突的痛苦。
  • jquery.hotkeys – jQuery Hotkeys讓您可以在程式碼中的任何位置查看鍵盤事件,幾乎可以支援任何組合鍵。
  • jwerty – 鍵盤事件的真棒處理。

旅遊和指南

  • intro.js – 為您的網站和項目提供新功能介紹和分步用戶指南的更好方法。
  • shepherd – 引導您的用戶瀏覽您的應用。
  • bootstrap-tour – 使用Twitter Bootstrap Popovers快速輕鬆地進行產品導覽。
  • tourist – – 為您的應用程式提供簡單靈活的旅遊。
  • chardin.js – 適用於您的應用的簡單疊加說明。
  • pageguide – 使用jQuery和CSS3的網頁元素的互動式指南。
  • hopscotch – 一個框架,使開發人員可以輕鬆地將產品導覽添加到他們的頁面。
  • joyride – jQuery feature tour插件。
  • focusable – 設置聚焦於DOM元素的聚光燈,將疊加層添加到頁面的其餘部分。

通知

  • iziToast – 優雅,響應靈活,輕量級的通知插件,沒有依賴關係。
  • messenger – 適用於您應用的Growl風格的提醒和消息。
  • noty – jQuery通知插件。
  • pnotify – Bootstrap,jQuery UI和Web Notifications Draft的JavaScript通知。
  • toastr – 簡單的JavaScript吐司通知。
  • humane-js – 一個簡單,現代的瀏覽器通知系統。
  • smoke.js – 針對JavaScript的框架無關的樣式警報系統。
  • notie – 沒有依賴關係的簡單通知和輸入。

滑塊

  • Swiper – 移動觸摸滑塊和框架,帶有硬體加速轉換。
  • slick – 您需要的最後一個旋轉木馬。
  • slidesJs – 是一個響應式幻燈片插件,適用於JQuery(1.7.1+),具有觸摸和CSS3過渡等功能
  • FlexSlider – 一個非常棒的,完全響應的jQuery滑塊插件。
  • unslider – 最簡單的jQuery滑塊。
  • sly – 用於單向滾動的JavaScript庫,具有基於項目的導航支援。
  • vegas – 一個jQuery插件,可以為您的網頁添加漂亮的全螢幕背景。它甚至允許幻燈片播放。
  • Sequence – 用於創建響應式滑塊,演示文稿,橫幅和其他基於步驟的應用程式的CSS動畫框架。
  • reveal.js – 使用HTML輕鬆創建精美演示文稿的框架。
  • impress.js – 這是一個基於現代瀏覽器中CSS3轉換和轉換功能的演示框架,並受到prezi.com背後的想法的啟發。
  • bespoke.js – DIY演示微框架
  • Strut – Strut – 一個Impress.js和Bespoke.js演示編輯器
  • PhotoSwipe – 適用於移動和桌面的JavaScript影像庫,模組化,獨立於框架。
  • jcSlider – 一個帶有CSS動畫的響應式滑塊jQuery插件。
  • basic-jquery-slider – 使用簡單,主題簡單,易於訂製。
  • jQuery.adaptive-slider – 一個帶有自適應彩色figcaption和導航的滑塊的jQuery插件。
  • slidr – 添加一些幻燈片效果。
  • Flickity – 觸摸,響應,可滑動的畫廊。
  • Glide.js – 響應和觸摸友好的jQuery滑塊。它簡單,輕便,快速。
  • jQuery.adaptive-slider – 一個帶有自適應彩色figcaption和導航的滑塊的jQuery插件。
  • Embla Carousel – 用於Web的可擴展低級旋轉木馬,用TypeScript編寫。

範圍滑塊

  • Ion.RangeSlider – 功能強大且易於訂製的範圍滑塊,具有多種選項和皮膚支援。
  • jQRangeSlider – 支援日期的JavaScript滑塊選擇器。
  • noUiSlider – 輕量級,高度可訂製的範圍滑塊,無膨脹。
  • rangeslider.js – HTML5輸入範圍滑塊元素polyfill。

表單小部件

輸入

  • typeahead.js – 一個快速且功能齊全的自動完成庫。
  • tag-it – 用於處理多標記欄位以及標記建議/自動完成的jQuery UI插件。
  • At.js – 添加GitHub就像提到你的應用程式的自動完成一樣。
  • Placeholders.js – HTML5佔位符屬性的JavaScript polyfill。
  • fancyInput – 使用CSS3效果在輸入欄位中輸入樂趣。
  • jQuery-Tags-Input – 使用這個jQuery插件將一個簡單的文本輸入神奇地轉換為一個很酷的標籤列表。
  • vanilla-masker – 純JavaScript掩碼輸入。
  • Ion.CheckRadio – 用於樣式複選框和單選按鈕的jQuery插件。有皮膚支援。
  • awesomplete – 超輕量級,可用,美觀的自動完成,零依賴。-

日曆

  • pickadate.js – 移動友好,響應迅速,輕量級的jQuery日期和時間輸入選擇器。
  • bootstrap-datepicker – 來自Stefan Petre(eyecon.ro)的@twitter bootstrap的日期選擇器,由@eternicode改進。
  • Pikaday – 一個令人耳目一新的JavaScript Datepicker – 輕量級,無依賴關係,模組化CSS。
  • fullcalendar – 全尺寸拖放事件日曆(jQuery插件)。
  • rome – 可訂製的日期(和時間)選擇器。免費依賴,選擇加入UI。
  • datedropper – datedropper是一個jQuery插件,提供了一種快速簡便的方法來管理輸入欄位的日期。

選擇

  • selectize.js – Selectize是文本框和選擇框的混合體。這是基於jQuery的,它具有自動完成和本機感鍵盤導航;對標記,聯繫人列表等有用
  • select2 – 基於jQuery的選擇框替換。它支援搜索,遠程數據集和無限滾動結果。
  • chosen – 一個庫,用於製作更加友好的長而笨重的選擇框。

文件上傳器

  • jQuery-File-Upload – 文件上傳小部件,包含多個文件選擇,拖放支援,進度條,驗證和預覽影像,jQuery的音頻和影片。
  • dropzone – Dropzone是一個易於使用的拖放庫。它支援影像預覽並顯示很好的進度條。
  • flow.js – 一個JavaScript庫,通過HTML5 File API提供多個同步,穩定,容錯和可恢復/可重新啟動的文件上傳。
  • fine-uploader – 多文件上傳插件,帶有進度條,拖放,直接上傳到S3。
  • FileAPI – 一組用於處理文件的JavaScript工具。Multiupload,drag'n'drop和chunked文件上傳。影像:EXIF裁剪,調整大小和自動方向。
  • plupload – 用於處理文件上傳的JavaScript API,它支援多文件選擇,文件類型過濾,請求分塊,客戶端影像縮放等功能,並使用不同的運行時來實現此功能,如HTML 5,Silverlight和Flash。

其他

  • form – jQuery Form Plugin。
  • Garlic.js – 自動保留表單的文本並在本地選擇欄位值,直到提交表單。
  • Countable – 一個JavaScript函數,用於向HT添加實時段落,字和字元計數

模態和彈出窗口

  • Magnific-Popup – 輕巧且反應靈敏的燈箱腳本,專註於性能。
  • jquery-popbox – jQuery PopBox UI元素。
  • jquery.avgrund.js – 一個jQuery插件,帶有彈出窗口的新模態概念。
  • vex – 一個高度可配置且易於設計的現代對話庫。
  • bootstrap-modal – 擴展默認的Bootstrap Modal類。響應,可堆疊,ajax等。
  • css-modal – 由純CSS構建的模態。
  • jquery-popup-overlay – 用於響應和可訪問的模態窗口和工具提示的jQuery插件。
  • SweetAlert – JavaScript警報的絕佳替代品。
  • baguetteBox.js – 用純JavaScript編寫的簡單易用的lightbox腳本。
  • colorbox – 用於jQuery的輕量級可訂製燈箱插件。
  • fancyBox – 一種工具,為您的網頁上的影像,html內容和多媒體添加縮放功能提供了一種漂亮而優雅的方式。
  • swipebox – 可觸摸的jQuery燈箱
  • jBox – jBox是一個功能強大且靈活的jQuery插件,可以處理所有彈出窗口,工具提示,通知等。

滾動

  • scrollMonitor – 滾動時監視元素的簡單快速API。
  • eadroom – 給你的頁面一些空間。隱藏您的標題,直到您需要它。
  • onepage-scroll – 使用One Page Scroll插件創建類似Apple的單頁捲軸網站(iPhone 5S網站)。
  • iscroll – iScroll是一款高性能,佔用空間小,無依賴,多平台的JavaScript滾動條。
  • skrollr – 適用於移動設備(Android + iOS)和桌面的獨立視差滾動庫。沒有jQuery。
  • parallax – 對智慧設備方向作出反應的視差引擎。
  • stellar.js – 視差滾動變得容易。
  • plax – jQuery powered parallaxing。
  • jparallax – 用於創建互動式視差效果的jQuery插件。
  • fullPage – 一個簡單易用的插件,用於創建全螢幕滾動網站(也稱為單頁網站)。
  • ScrollMenu – 一個替換舊的無聊滾動條的新介面。
  • Clusterize.js – Tiny vanilla JS插件,可輕鬆顯示大型數據集。
  • simpleParallax – 簡單而小巧的JavaScript庫,可在任何影像上添加視差動畫

菜單

  • jQuery-menu-aim – 用戶游標瞄準特定下拉菜單項時觸發事件的jQuery插件。用於製作像亞馬遜這樣的響應式大型下拉菜單。
  • jQuery contextMenu – contextMenu manager。
  • Slideout – 用於移動網路應用的響應式觸摸滑動導航菜單。
  • 滑動和滑動 – 可與touchSwipe庫配合使用的滑動滑動菜單。

表/網格

  • jTable – 一個用於創建基於AJAX的CRUD表的jQuery插件。
  • DataTables – (jQuery插件)它是一個高度靈活的工具,基於漸進增強的基礎,並將為任何HTML表添加高級交互控制項。
  • Tabulator – (jQuery插件)一個非常靈活的庫,可以從任何JSON數據源或現有HTML表創建具有一系列交互功能的表。
  • Bootstrap表 – 對流行的Bootstrap框架的擴展,用於創建適合您站點樣式的表,而無需額外的標記。
  • floatThead – (jQuery插件)在正文中滾動時鎖定任何錶的標題。適用於任何錶,不需要自定義html或CSS。
  • Masonry – 級聯網格布局庫。
  • Packery – 使用bin-packing演算法的網格布局庫。可用於可拖動布局。
  • Isotope- 可過濾,可排序的網格布局庫。可以實現Masonry,Packery和其他布局。
  • flexboxgrid – 基於CSS3 flexbox的網格。

構架

  • 語義UI – 具有許多主題和元素的UI工具包。
  • w2ui – 一組用於數據驅動的Web應用程式前端開發的jQuery插件。
  • 流動性 – 世界上最小的完全響應的CSS框架。
  • Ink – SAPO使用的HTML5 / CSS3框架,用於快速有效的網站設計和原型設計。

Boilerplates

  • html5-boilerplate – 一個專業的前端模板,用於構建快速,健壯且適應性強的Web應用程式或站點。
  • mobile-boilerplate – 一個前端模板,可幫助您構建快速,現代的移動Web應用程式。
  • webplate – 一個非常棒的前端框架,讓您可以專註於構建您的網站或應用程式,同時保持非常好用。
  • Cerberus – 響應式HTML電子郵件的一些簡單但可靠的模式。甚至在Outlook中。
  • full-page-intro-and-navigation – 帶有全寬背景影像的介紹頁面,大膽的動畫菜單以及導航背後的類似iOS的模糊效果。
  • Fluid-Squares- 方形單元的流體網格。
  • Mobile-First-RWD – 移動優先響應式網頁設計的一個例子。
  • this-is-responsive – 這是響應。
  • npm run-scripts使用NPM運行腳本進行任務自動化。

手勢

  • hammer.js – 用於多點觸控手勢的JavaScript庫。
  • touchemulator – 模擬桌面上的觸摸輸入。
  • Dragula – 拖放這麼簡單就好疼。

地圖

  • Leaflet – 適用於移動設備的互動式地圖的JavaScript庫。
  • Cesium – 開源WebGL虛擬地球儀和地圖引擎。
  • gmaps – 使用Google地圖的最簡單方法。
  • polymaps – 一個免費的JavaScript庫,用於在現代Web瀏覽器中製作動態互動式地圖。
  • kartograph.js – Kartograph SVG地圖的開源JavaScript渲染器。
  • mapbox.js – Mapbox JavaScript API,一個Leaflet插件。
  • jqvmap – jQuery矢量地圖庫。
  • OpenLayers3 – 一個高性能,功能豐富的庫,可滿足您的所有映射需求。

影片/音頻

  • prettyembed.js – Prettier嵌入你的YouTubes – 具有很好的選項,如高解析度預覽影像,嵌入選項的高級自定義,以及可選的FitVids支援。
  • html5media – 在所有主流瀏覽器中啟用和標記。
  • Play-em JS – Play'em是一個JavaScript組件,它管理音樂/影片軌道隊列,並通過在HTML DIV(包括Youtube,Soundcloud和Vimeo)中嵌入多個玩家來播放一系列歌曲。
  • polyplayer – 使用一個API來規則YouTube,Soundcloud和Vimeo播放器。
  • flowplayer – 用於網路的HTML5影片播放器
  • mediaelement – HTML5或具有Flash和Silverlight填充程式的播放器,模仿HTML5 MediaElement API,在所有瀏覽器中實現一致的UI。http://mediaelementjs.com/
  • SoundJS – 一個可以更輕鬆地在網路上處理音頻的庫。它為在不同瀏覽器中播放音頻提供了一致的API。
  • video.js – Video.js – 開源HTML5和Flash影片播放器。
  • FitVids.js – 一個輕量級,易於使用的jQuery插件,用於流體寬度影片嵌入。
  • Ion.Sound – 任何網頁上的簡單聲音。
  • photobooth-js – 一個小部件,允許用戶在您的網站上拍攝他們的頭像。
  • clappr – 一個可擴展的網路媒體播放器http://clappr.io

活版印刷

  • FlowType.JS – 最好的Web排版:基於元素寬度的字體大小和行高。
  • BigText – jQuery插件,計算將一行文本與特定寬度匹配所需的字體大小和字間距。
  • circletype – 一個jQuery插件,可以讓你在網路上輸入曲線。
  • slabText – 一個jQuery插件,用於生成大膽,響亮的標題。
  • simple-text-rotator – 在您的網站上添加一個超級簡單的旋轉文本,幾乎沒有標記。
  • novacancy.js – 文本Neon Golden效果jQuery插件。
  • jquery-responsive-text – 使文本大小響應!
  • FitText.js – 用於膨脹Web類型的jQuery插件。
  • Lettering.js – 一個輕量級,易於使用的JavaScript <span>注入器,用於激進的Web排版。

動畫

  • velocity – 加速JavaScript動畫。
  • jquery.transit – jQuery的超級流暢的CSS3轉換和轉換。
  • impress.js – 在HTML文檔中使用CSS3轉換/轉換進行類似Prezi的演示。
  • bounce.js – 立即創建美味的CSS3動畫動畫。
  • GreenSock-JS – 適用於所有主流瀏覽器的高性能HTML5動畫。
  • TransitionEnd – TransitionEnd是一個不可知的跨瀏覽器庫,用於處理轉換事件。
  • Dynamic.js – 用於創建基於物理的CSS動畫的JavaScript庫。
  • the-cube – 多維數據集是CSS3過渡的實驗。
  • Effeckt.css – 一個高效的過渡和動畫庫
  • animate.css – CSS動畫的跨瀏覽器庫。因為易於使用易於使用。
  • textillate – CSS3文本動畫的簡單插件。
  • move.js – CSS3支援的JavaScript動畫框架。
  • animatable – 一個屬性,兩個值,無限可能。
  • shuffle-images – 以創造性的方式改變影像的最簡單方法
  • smoothState.js – 使用jQuery進行不顯眼的頁面轉換。
  • Anime.js – 一個JavaScript動畫引擎
  • Mo.js – 用於網路的運動圖形工具帶
  • particles.js – 用於創建粒子的輕量級JavaScript庫。

影像處理

  • lena.js – 具有過濾器和util函數的影像處理庫。
  • Pica – 高品質影像調整大小(使用快速Lanczos過濾器,在純JS中實現)。
  • cropper – 一個簡單的jQuery影像裁剪插件。

ES6

  • es6features – ECMAScript 6功能概述。
  • es6-features – ECMAScript 6:功能概述和比較。
  • es6-cheatsheet – ES2015 [ES6] cheatsheet包含提示,技巧,最佳實踐和程式碼片段。
  • ECMAScript 6兼容性表 – 適用於各種環境的所有ECMAScript 6功能的兼容性表。
  • Babel(以前為6to5) – 將ES6 +程式碼轉換為vanilla ES5,沒有運行時。
  • Traceur編譯器 – ES6功能> ES5。包括類,生成器,承諾,解構模式,默認參數等。

產生器

  • Gatsby.js – 基於React的靜態站點生成器。

SDK

  • javascript-sdk-design – 從工作和個人經驗中提取的JavaScript SDK設計指南
  • Spotify SDK – 面向實體的SDK,可與Spotify Web API配合使用。
  • Square Node.js SDK – 用於支付和其他Square API的JavaScript客戶端庫。

雜項

  • echo – 具有data- *屬性的延遲載入影像。
  • picturefill – 用於<picture>,srcset,sizes的響應式影像polyfill。
  • platform.js – 幾乎適用於所有JavaScript平台的平台檢測庫。
  • json3 – 與幾乎所有JavaScript平台兼容的現代JSON實現。
  • Logical Or Not – 關於JavaScript特性的遊戲。
  • BitSet.js – JavaScript Bit-Vector實現
  • spoiler-alert – SPOILER ALERT!一個快樂的小jquery插件,以隱藏您的網站上的劇透。
  • jquery.vibrate.js – Vibration API Wrappers
  • list.js – 為表,列表和各種HTML元素添加搜索,排序,過濾器和靈活性。構建為不可見並處理現有HTML。http://www.listjs.com
  • mixitup – MixItUp – 過濾和排序插件。
  • grid – 拖放庫,用於二維,可調整大小和響應式列表。
  • jquery-match-height – jQuery的響應性相等高度插件。
  • survey.js – JavaScript Survey Engine。它使用JSON進行調查元數據和結果。
  • Array Explorer和Object Explorer – 幫助確定在任何給定時間最適合使用本機JavaScript方法的資源
  • Clipboard.js – 「複製到剪貼板」沒有Flash或使用框架。
  • ky – 基於瀏覽器Fetch API的簡潔優雅的HTTP客戶端。

Podcast

  • JavaScript Air – 所有關於JavaScript和Web平台的實時影片廣播Podcast。
  • Web of Tomorrow – 為初學者播放有關JavaScript的Podcast。
  • JavaScript Jabber – 關於JavaScript的每周Podcast,包括Node.js,前端技術,職業,團隊等。

值得一讀

你不懂JS – 可能是用現代JavaScript編寫的最好的書,完全可以免費在線閱讀,或者可以買來支援作者。

  • braziljs / js-the-right-way – 一個易於閱讀的快速參考,用於JS最佳實踐,可接受的編碼標準以及Web上的鏈接。
  • JSbooks – 免費JavaScript電子書目錄。
  • Superhero.js – 有關創建,測試和維護大型JavaScript程式碼庫的資源集合。
  • SJSJ – 簡化的JavaScript術語是一個社區驅動的嘗試,用一些簡單的詞語解釋當前JavaScript生態系統的流行語。
  • 如何編寫開源JavaScript庫 – 通過一系列步驟發布JavaScript開源庫的綜合指南。
  • Jaavascript教程 – 通過各種用戶排名的在線教程在線學習Javascript。

原文:https://github.com/sorrycc/awesome-javascript

本文:https://pub.intelligentx.net/collection-awesome-browser-side-javascript-libraries-resources-and-shiny-things