總結100+前端優質庫,讓你成為前端百事通

語言: CN / TW / HK

❝ 1年多時間, 陸陸續續整理了一些常用且實用的開源專案, 方便大家更高效的學習和工作.

js相關庫

js 常用工具類

  1. 「lodash」 一個一致性、模組化、高效能的 JavaScript 實用工具庫。
  2. 「xijs」 一款面向複雜業務場景的 javascript 工具庫
  3. 「ramda」 一個很重要的庫,提供了許多有用的方法,每個 JavaScript 程式設計師都應該掌握這個工具
  4. 「day.js」 一個輕量的處理時間和日期的 JavaScript 庫,和 Moment.js 的 API 設計保持完全一樣, 體積只有 2kb
  5. 「big.js」 一個小型,快速的 JavaScript 庫,用於任意精度的十進位制算術運算
  6. 「qs」 一個 url 引數轉化 (parse 和 stringify)的輕量級 js 庫
  7. 「decimal.js」 實現 JavaScript 的任意精度的十進位制型別庫

表單校驗

  1. 「Validator.js」 一個強大的 js 表單校驗庫
  2. 「Validate.js」 致力於提供一種驗證資料的跨框架和跨語言方式的 js 庫, 已通過 100%程式碼覆蓋率的單元測試

dom 庫

  1. 「JQuery」 封裝了各種 dom/事件操作, 設計思想值得研究借鑑
  2. 「zepto」 jquery 的輕量級版本, 適合移動端操作
  3. 「fastclick」 一個簡單易用的庫,它消除了移動端瀏覽器上的物理點選和觸發一個 click 事件之間的 300ms 的延遲。目的就是在不干擾你目前的邏輯的同時,讓你的應用感覺不到延遲,反應更加靈敏。

檔案處理

  1. 「file-saver」 一個在客戶端儲存檔案的解決方案,非常適合在客戶端上生成檔案的 Web 應用程式
  2. 「js-xlsx」 一個強大的解析和編寫 excel 檔案的庫

網路請求

  1. 「Axios」 一個基於 Promise 的 HTTP 庫,可用在 Node.js 和瀏覽器上發起 HTTP 請求,支援所有現代瀏覽器,甚至包括 IE8+
  2. 「Superagent」 基於 Ajax 的優化, 可以與 Node.js HTTP 客戶端搭配使用
  3. 「fly.js」 一個基於 promise 的 http 請求庫, 可以用在 node.js, Weex, 微信小程式, 瀏覽器, React Native 中

動畫庫

  1. 「Anime.js」 一個 JavaScript 動畫庫,可以處理 CSS 屬性,單個 CSS 轉換,SVG 或任何 DOM 屬性以及 JavaScript 物件
  2. 「Velocity」 一個高效的 Javascript 動畫引擎,與 jQuery 的 $.animate() 有相同的 API, 同時還支援彩色動畫、轉換、迴圈、畫架、SVG 支援和滾動等效果
  3. 「Vivus」 一個零依賴的 JavaScript 動畫庫,可以讓我們用 SVG 製作動畫,使其具有被繪製的外觀
  4. 「GreenSock JS」 一個 JavaScript 動畫庫,用於建立高效能、零依賴、跨瀏覽器動畫,已在超過 400 萬個網站上使用, 並且可以在 React、Vue、Angular 專案中使用
  5. 「Scroll Reveal」 零依賴,為 web 和移動瀏覽器提供了簡單的滾動動畫,以動畫的方式顯示滾動中的內容
  6. 「Kute.js」 一個強大高效能且可擴充套件的原生 JavaScript 動畫引擎,具有跨瀏覽器動畫的基本功能
  7. 「Typed.js」 一個輕鬆實現打字效果的 js 外掛
  8. 「fullPage.js」 一個可輕易建立全屏滾動網站的 js 滾動動畫庫, 相容性無可替代
  9. 「iscroll」 移動端使用的一款輕量級滾動外掛
  10. 「swiper.js」 一款強大的 js 跨端觸控滑動外掛
  11. 「MixItUp」 是用於 DOM 操作的高效能,無依賴庫,使您能夠使用精美的動畫過濾,排序,新增和刪除 DOM 元素的 js 動畫庫
  12. 「Lottie」 一個用於 Android,iOS,Web 和 Windows 的庫,用於解析使用 Bodymovin 匯出為 json 的 Adobe After Effects 動畫,並在移動裝置和網路上呈現它們

滑鼠/鍵盤相關

  1. 「KeyboardJS」 一個在瀏覽器中使用的庫(與 node.js 相容).它使開發人員可以輕鬆設定鍵繫結和使用組合鍵來設定複雜的繫結.
  2. 「SortableJS」 功能強大的 JavaScript 拖拽庫

圖形/影象處理庫

  1. 「html2canvas」 一個強大的使用 js 開發的瀏覽器網頁截圖工具
  2. 「dom-to-image」 一個可以將任意 DOM 節點轉換為用 JavaScript 編寫的向量(SVG)或光柵(PNG 或 JPEG)影象的庫
  3. 「pica」 一個在瀏覽器中調整影象大小,而不會出現畫素失真,處理速度非常快的圖片處理庫
  4. 「Lena.js」 一個輕量級的可以給你影象加各種濾鏡的 js 庫
  5. 「Compressor.js」 一個使用本地 canvas.toBlob API 進行影象有失真壓縮的 js 庫
  6. 「Fabric.js」 一個易於使用的基於 HTML5 canvas 元素的圖片編輯器
  7. 「merge-images」 一個將多張圖片合併成一張圖的 js 外掛
  8. 「cropperjs」 一款強大的圖片裁切庫, 支援靈活的圖片裁切方式
  9. 「Grade」 一個基於影象中的前 2 種主要顏色生成互補漸變背景的庫

表單表格

  1. 「x-spreadsheet」 一個基於 web 的簡單易用的表格外掛

Css 相關庫

  1. hover.css 開箱即用的滑鼠懸停動畫
  2. animate.css 一個跨瀏覽器的簡單便捷的 CSS 動畫庫
  3. Magic 整合各種特殊動效的 css 動畫庫
  4. kite 一個相容性極好且靈活的佈局 css 庫
  5. csshake 一個能夠震動和晃動 DOM 元素的 CSSku 庫
  6. hint.css 一個用純 css 和 html 實現的提示庫

React相關庫

UI 庫

  1. Ant design 用於研發企業級中後臺產品的 UI 元件庫
  2. Ant design mobile 基於 Ant Design 設計體系的 React UI 移動端元件庫
  3. MaterialUI 世界最受歡迎的基於質感設計的 React UI 庫
  4. toolbox 一套使用 CSS 模組功能實現 Google 的 Material Design 規範的 React 元件
  5. Fabric UI 微軟開源的 UX 框架的集合,用於建立共享程式碼,設計和互動行為的精美的跨平臺應用程式
  6. React desktop 基於 React 的 JavaScript 庫,旨在將本機桌面體驗帶入網路,其中包含許多 macOS Sierra 和 Windows 10 元件。react-desktop 與 NW.js 和 Electron.js 完美結合,但是可以在任何 JavaScript 驅動的專案中使用
  7. Zent 有贊 PC 端 WebUI 規範的 React 實現,提供了一整套基礎的 UI 元件以及一些常用的業務元件
  8. react-icons 基於 React 封裝的豐富的圖示庫

狀態管理

  1. Redux JavaScript 狀態容器,提供可預測化的狀態管理
  2. Redux Thunk Redux 的非同步處理中介軟體
  3. MobX 通過函式響應式程式設計使得狀態管理變得簡單和可擴充套件
  4. Dva 一個基於 reduxredux-saga 的資料流方案

工具類

  1. React Virtualized 一個能渲染大型列表和表格的 React 解決方案
  2. react-file-viewer React 線上 PDF 預覽外掛
  3. react-copy-to-clipboard 基於 React 的複製到剪下板元件
  4. qrcode.react 基於 React 的生成二維碼的元件
  5. nprogress 適用於 YouTube,Medium 等的頂部進度條元件
  6. react-syntax-highlighter 基於 React 的程式碼高亮元件
  7. react-contextmenu 右鍵選單元件
  8. emoji-mart 基於 React 的表情庫
  9. react-highlight-words 基於 React 的關鍵字高亮
  10. WaterMark 水印元件

資料視覺化

  1. AntV 包含 G2、G6、F2、L7 以及一套完整的圖表使用和設計規範, 提供強大的資料視覺化需求
  2. G2Plot 基於 G2 封裝的開箱即用的視覺化元件庫
  3. recharts 使用 React 和 D3 構建的自定義的圖表庫
  4. Viser 支援多種主流框架的視覺化庫

拖拽/排序

  1. react-beautiful-dnd 漂亮,可移植性 列表拖拽庫
  2. react-dnd 可幫助我們構建複雜的拖放介面,同時保持元件的分離
  3. react-moveable 支援自由拖拽, 縮放, 參考線的靈活強大的拖拽庫
  4. react-grid-layout 強大的網格拖拽排序縮放庫
  5. mixitup 強大且高效能的列表卡片排序動畫庫

動畫/動效果

  1. Halogen 使用 React 的載入動畫集合
  2. react-loading 一款基於 react 的輕量級載入動畫庫, 支援按需匯入, 開箱即用
  3. react-move 漂亮的,資料驅動的 React 動畫庫
  4. react-spring 一個基於彈簧物理學的動畫庫
  5. react-text-loop-next 文字輪播動畫

影象處理

  1. react-image-crop 強大的圖片裁切庫
  2. react-sparklines 基於資料自動生成趨勢線
  3. dom-to-image 基於 dom 生成圖片的 canvas 庫
  4. react-img-editor 支援截圖編輯的圖片庫

編輯器相關

  1. braft-editor 富文字編輯器
  2. powerNice 文件編輯器
  3. mitu 圖片編輯器
  4. h5-dooring H5 頁面編輯器
  5. GGEditor 視覺化圖編輯器
  6. react-codemirror2 程式碼編輯器
  7. jsoneditor json 編輯器

地圖相關

  1. google-map-react 谷歌地圖外掛
  2. react-amap 高德地圖外掛
  3. react-baidu-map 百度地圖

優秀國產專案集合

視覺化編輯器

vue 後臺模版

文件工具

H5 活動外掛

影片播放器

好啦, 今天的分享就到這裡啦, 如果你有好用的庫推薦, 歡迎在評論區反饋~

後續會在趣談前端 中持續總結覆盤, 讓技術工作更高效.