【必須知道的JavaScript庫】 - 解決95%問題的工具外掛/庫 - 1

wlove發表於2022-02-19
JavaScript

前言

在研發週期緊張的背景下,切記要避免時間開銷在無用工作上 (比如造輪子) 如何有效確認是否已有輪子,本篇文章做一個list來幫助大家。只需要記住下面的庫就可以解決工作中95%日常問題。

以下所有連結均為原始碼倉庫 。

- ---

編輯器

  • ace：Ace ，即 Ajax.org Cloud9 Editor。
  • CodeMirror：一個瀏覽器端的程式碼編輯器，用 JS 實現。
  • 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 製作，適用於每天寫作的富文字編輯器。
  • Trumbowyg：一款輕量且驚人的所見即所得 JavaScript 編輯器
  • Draft.js：用於構建文字編輯器的 React 框架。
  • bootstrap-wysihtml5：一款簡單漂亮的所見即所得編輯器。
  • wysihtml5：基於 HTML5 ，漸進增強的開源富文字編輯器，利用非常嚴苛的規則旨在生成符合 HTML5 規範的標籤，避免生成非規範標籤和同行樣式。
  • raptor-editor：Raptor，一款 HTML5 所見即所得內容編輯器！
  • popline：Popline 是一款 HTML5 富文字工具欄。
  • Summernote：一個極簡的所見即所得編輯器。

文件

  • DevDocs：一款多合一介面文件閱讀器，介面統一、高效、排版精良。
  • dexy：一款格式自由且文藝的文件工具，可用於編寫任何包含程式碼的技術文件。
  • docco：一款快且髒、百來行、文藝範的文件生成器，用 Literate CoffeeScript 實現。
  • styledocco：根據樣式表生成風格規範文件。
  • Ronn：構建手冊。把對人類閱讀友好的簡單文字檔案轉換成 roff 格式檔案，便於終端顯示，也可以轉換為 HTML ，便於 Web 端顯示。
  • dox：一款 Node.js 開發的 JavaScript 文件生成器。Dox 不會生成結構樣式嚴苛的文件，而是採用 JSON 表示法，以實現 markdown 和 JSDoc 風格標籤。
  • jsdox：一款將 JSDoc3 轉換成 markdown 的文件生成器。
  • ESDoc：一款為 JavaScript 設計的優秀文件生成器。
  • YUIDoc：一款提取原始碼註釋生成介面文件的 Node.js 應用，功能類似 Javadoc and Doxygen 。
  • coddoc：一款 jsdoc 解析庫。Coddoc 與其他工具相比)的不同之處在於，它很容易擴充套件，通過 coddoc.addTagHandler 和 coddoc.addCodeHandler 來新增標籤和程式碼解析器。 Coddoc 還可以解析原始碼生成介面文件。
  • sphinx：一款讓建立智慧且漂亮文件更加簡單的工具。
  • Using JSDoc
  • Beautiful docs：一款 markdown 格式文件閱讀器。
  • documentation.js：支援 ES2015+ 和流注釋的介面文件生成器。
  • jsduck：為 Sencha JavaScript 框架開發的介面文件生成器，當然其他框架也能用。
  • codecrumbs：一款用於學習和記錄程式碼庫的視覺化工具，通過在原始碼中插入麵包屑來實現功能。

檔案

  • Papa Parse：一款強大的 CSV 庫，支援解析 CSV 檔案/字串，也能匯出 CSV。
  • jBinary：對用宣告式語法描述檔案型別和資料結構的二進位制檔案，進行高階 I/O（載入、解析、操作、序列化、儲存）操作。
  • diff2html：git 差異輸出解析器，也是 HTML 美化器。
  • jsPDF：一款 JavaScript PDF 檔案生成器。
  • PDF.js：一個 JavaScript PDF 閱讀器，社群驅動，Mozilla 支援。

函數語言程式設計

  • underscore：JavaScript 的實用工具。
  • lodash：提供一致性、可定製、高效能和額外功能的實用庫。
  • Sugar：一個擴充套件了原生物件功能的 JavaScript 庫。
  • lazy.js：類似 Underscore，但效能更優越
  • ramda：一個針對 JavaScript 程式設計師的實用函式庫。
  • mout：模組化的 JavaScript 工具庫。
  • mesh：流資料同步工具。
  • preludejs：JavaScript 硬核函數語言程式設計。
  • rambda：Ramda 快速小巧的替代品。

響應式程式設計

  • RxJs：對 JavaScript 進行響應式擴充套件。
  • Bacon：JavaScript 的 FPR（函式式響應式程式設計）庫。
  • Kefir：受 Bacon.js 和 RxJS 啟發的 FRP 庫，專注於高效能和低記憶體消耗。
  • Highland：對 JavaScript 實用工具的重新思考，Highland 能輕易地管理同步和非同步資訊，而且僅使用標準 JavaScript 和類 Node 流。
  • Most.js：高效能 FRP 庫。
  • Cycle.js：一款用於可預測程式碼的函式式和響應式 JavaScript 框架。
  • concent：絕對是 ❤️ 最簡單卻 ⚡️ 最強大的 react 狀態管理開發框架，可預測、漸進式、高效能。

資料結構

資料結構庫用於構建一個更復雜的應用。

  • immutable-js：不可變的資料集合，包括 Sequence、Range、Repeat、Map、OrderedMap、Set 和 sparse Vector。
  • mori：使用 ClojureScript 持久化資料結構和支援原生 JavaScript API 的庫。
  • buckets：完整的、經過充分測試和文件完備的資料結構的 JavaScript 庫。
  • hashmap：簡單的雜湊對映實現，支援任何型別的鍵值。

日期

日期庫。

  • moment：解析、驗證、操作和顯示日期。
  • moment-timezone：基於 moment.js 的時區庫。
  • jquery-timeago：一款支援自動更新模糊時間戳的 jQuery 外掛（如："4 分鐘之前"）。
  • timezone-js：讓 JavaScript Date 物件擁有時區功能。使用 Olson zoneinfo 檔案記錄時區資料。
  • date：對人類友好的 Date()。
  • ms.js：小巧的毫秒轉換工具。
  • countdown.js：超小倒數計時。
  • timeago.js：一個非常輕量級（~1.7 Kb）的用於將時間轉化成 xxx時間前 格式的庫。
  • fecha：輕量級日期格式化和解析庫（約 2kb）。可以用來替換 moment.js 格式化和解析日期功能（moment.js 體積比較大——譯者注）。
  • date-fns：現代 JavaScript 日期功能庫。
  • map-countdown：構建在 Google 地圖上的瀏覽器倒數計時。
  • dayjs：Day.js 是一款擁有和 Moment.js 一樣的現代化介面的日期庫，但它僅僅有 2kb 大小，可以用來替換 Moment.js。

字串

  • voca：一款超級好用的 JavaScript 字串庫。
  • selecting：一個允許你獲取使用者選定文字的庫。
  • underscore.string：Underscore.js 的字串操作擴充套件。
  • string.js：額外的 JavaScript 字串方法。
  • he：健壯的 HTML 實體編碼/解碼器。
  • multiline：多行字串。
  • query-string：解析和字串化 URL 查詢字串。
  • URI.js：URL 操作庫。
  • jsurl：輕量的 URL 操作庫。
  • sprintf.js：實現字串格式化。
  • url-pattern：比正規表示式匹配 url 或其它字串更簡單，字串和資料可相互轉化。
  • plexis：低保真、強大、社群驅動的字串操作庫。

數字

  • Numeral-js：對數字進行格式化和操作的庫。
  • chance.js：JavaScript 隨機生成器，可以生成數字、字串等。
  • odometer：流暢的數字過渡效果。
  • accounting.js：對數字、金錢、貨幣進行格式化的輕量庫，完全本地化和無依賴。
  • money.js：一個小巧（1kb）的貨幣轉換庫，適用於 web 和 nodeJS。
  • Fraction.js：一個有理數庫。
  • Complex.js：一個複數庫。
  • Polynomial.js：一個多項式庫。
  • Quaternion.js：一款適用於 JavaScript 的四元數操作庫。

儲存

  • 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 / indexedDB 的支援。
  • basil.js：智慧的 JavaScript 資料持久層庫。
  • jquery-cookie：輕量簡單的、用於讀取、編輯和刪除 cookie 的 jQuery 外掛。
  • js-cookie：一款簡單、輕量的 cookies 讀寫刪 jQuery 外掛。
  • Cookies：一個客戶端 Cookie 操作庫。
  • DB.js：基於 Promise 的、封裝了 IndexedDB 的庫。
  • lawnchair.js：簡單的客戶端 JSON 儲存。
  • sql.js：基於 Emscripten 將 SQLite 編譯成 JavaScript。
  • crumbsjs：一款輕量級原生 ES6 cookies 和本地儲存 JavaScript 庫。
  • awesome-web-storage：你必須知道的所有客戶端儲存知識。

顏色

  • randomColor：JavaScript 顏色生成器。
  • chroma.js：擁有各種各樣顏色操作的 JavaScript 庫。
  • color：JavaScript 顏色轉換和操作庫。
  • colors：更智慧的預設 web 顏色。
  • PleaseJS：隨機建立出賞心悅目的顏色和配色方案的 JavaScript 庫。
  • TinyColor：快速、輕巧的顏色操作和轉換庫。
  • Vibrant.js：從影像提取主要顏色。

國際化和本地化

  • i18next：用 JavaScript 實現國際化（i18n）簡單的方法。
  • polyglot：小巧的國際化助手庫。
  • babelfish：提供友好易懂 API 的 i18n 庫，並且內建多種支援。
  • ttag：基於 ES6 標籤模板和優秀的舊 GNU gettext ，新潮的 JavaScript 國際化、本地化庫。

控制流

  • async：適用於 node.js 和瀏覽器的非同步工具庫。
  • q：實現非同步 promise 的 JavaScript 工具。
  • step：一款可以使邏輯執行更簡單的非同步控制流庫。
  • contra：函式式風格實現的非同步流控制。
  • Bluebird：功能齊全的 promoise 庫，專注於功能革新和效能提升。
  • when：快速可靠的、Promises/A+ 規範的 when() 實現，而且擁有其它非同步操作的優秀特性。
  • ObjectEventTarget：為普通物件新增事件監聽原型（就如瀏覽器 DOMElement 的 EventTarget 一樣）。
  • sporadic：位於 promise 頂部的組合併發抽象（就像流、協程和類似 Go channels 一樣），支援 Node.js 和瀏覽器引擎。

路由

  • director：一個小巧的、與 URL 同構的路由。
  • page.js：受 Express router 啟發的小型客戶端路由器（約為1200位元組）。
  • pathjs：簡單、輕量的 web 路由。
  • crossroads：JavaScript 路由。
  • davis.js：基於 pushState 可降級 RESTful 風格的 JavaScript 路由。
  • navaid：一款瀏覽器端的導航輔助系統（也可以成為路由），體積才 850 位元組！

安全性

  • DOMPurify：針對 HTML、MathML 和 SVG 的僅支援 DOM 的超快速、高容錯的 XSS 過濾器。
  • js-xss：通過白名單配置，即可過濾不信任的 HTML（防止 XSS 攻擊）。
  • xss-filters：Yahoo 出品的安全 XSS 過濾器。

日誌

  • log：帶樣式的 Console.log。
  • Conzole：對 JavaScript 原生 console 物件方法和功能進行封裝的 debug 皮膚，並將皮膚顯示在頁面內。
  • console.log-wrapper：將日誌清晰地記錄到 console，相容所有瀏覽器。
  • loglevel：最輕量的 JavaScript 日誌記錄工具庫，向封裝後的 console.log 方法增加可靠的日誌等級。
  • minilog：輕量的、流式 API 顯示的、可用於客戶端和伺服器端的日誌記錄庫。
  • storyboard：通用日誌庫 + Chrome 擴充套件。提供一個單一入口檢視包含客戶端和服務端的任務觸發日誌。

正規表示式

  • RegEx101：線上的 JavaScript 正規表示式測試器和偵錯程式。同時也支援 Python、PHP 和 PCRE。
  • RegExr：用於建立、測試和學習正規表示式的 HTML/JS 工具。

語音命令

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

API

  • axios：基於 Promise 的 HTTP 客戶端，適用於 Node.js 和 瀏覽器。
  • bottleneck：強大的速度限制器，使調節流量變得更容易。
  • oauth-signature-js：適用於 node 和 瀏覽器的 OAuth 1.0a 簽名生成器。
  • amygdala：為 Web 應用提供 RESTful HTTP 客戶端解決方案。
  • jquery.rest：一個讓 RESTful API 更易用的 jQuery 外掛。
  • Rails Ranger：為 Ruby Tails 介面設計的嚴格的 REST 客戶端。
  • wretch：一款小巧的直覺語法系 fetch 功能封裝包。
  • FarFetch：簡單易用的現代 Fetch 介面封裝，簡化了檔案上傳。
  • Optic：Optic 用於對 API 自動測試和文件生成。
  • SWR：用於遠端資料拉取的 React Hooks 庫。

流媒體

  • Tailor：適用於前端微服務的流媒體佈局服務，靈感來自 Facebook BigPipe。

視覺檢測

  • tracking.js：在 web 上實現計算視覺的一種現代方法。
  • 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：友好的 Web 端機器學習庫。
  • Synapses：輕量級跨平臺神經網路庫。

瀏覽器檢測

  • bowser：一個瀏覽器檢測器，特點是小巧快速且 API 豐富。

基準測試

  • benchmark.js：jsPerf.com 使用的基準測試庫。
  • matcha：一款咖啡因驅動的基準測試簡單實現。

動畫

圖片處理

  • lena.js：具有濾鏡和實用功能的影像處理庫。
  • pica：高質量地調整圖片大小（使用快速、純 JS 實現的 Lanczos 濾鏡演算法）。
  • cropper：一個簡單的影像裁剪 jQuery 外掛。

最後

歷史文章

相關文章