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」 一個在瀏覽器中調整圖像大小，而不會出現像素失真，處理速度非?？斓膱D片處理庫
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 一個基于 redux 和 redux-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 百度地圖

優秀國產項目集合

可視化編輯器

1. h5-dooring
2. dooringx
3. v6.dooring
4. mitu
5. watermark-pro

vue 后臺模版

1. vue3.0-template-admin
2. vue-admin-box
3. ant-simple-pro

文檔工具

• html2md

H5 活動插件

• lucky-canvas

視頻播放器

• JoL-player

好啦, 今天的分享就到這里啦, 如果你有好用的庫推薦, 歡迎在評論區反饋~ 后續會在 趣談前端 中持續總結復盤, 讓技術工作更高效。

本文轉載自微信公眾號「趣談前端」