總結100+前端優(yōu)質(zhì)庫,讓你成為前端百事通
作者：徐小夕
1年多時間, 陸陸續(xù)續(xù)整理了一些常用且實用的開源項目, 方便大家更高效的學習和工作.
1年多時間, 陸陸續(xù)續(xù)整理了一些常用且實用的開源項目, 方便大家更高效的學習和工作.
js相關庫
js 常用工具類
- 「lodash」 一個一致性、模塊化、高性能的 JavaScript 實用工具庫。
- 「xijs」 一款面向復雜業(yè)務場景的 javascript 工具庫
- 「ramda」 一個很重要的庫，提供了許多有用的方法，每個 JavaScript 程序員都應該掌握這個工具
- 「day.js」 一個輕量的處理時間和日期的 JavaScript 庫，和 Moment.js 的 API 設計保持完全一樣, 體積只有 2kb
- 「big.js」 一個小型，快速的 JavaScript 庫，用于任意精度的十進制算術運算
- 「qs」 一個 url 參數(shù)轉(zhuǎn)化 (parse 和 stringify)的輕量級 js 庫
- 「decimal.js」 實現(xiàn) JavaScript 的任意精度的十進制類型庫
表單校驗
- 「Validator.js」 一個強大的 js 表單校驗庫
- 「Validate.js」 致力于提供一種驗證數(shù)據(jù)的跨框架和跨語言方式的 js 庫, 已通過 100%代碼覆蓋率的單元測試
dom 庫
- 「JQuery」 封裝了各種 dom/事件操作, 設計思想值得研究借鑒
- 「zepto」 jquery 的輕量級版本, 適合移動端操作
- 「fastclick」 一個簡單易用的庫，它消除了移動端瀏覽器上的物理點擊和觸發(fā)一個 click 事件之間的 300ms 的延遲。目的就是在不干擾你目前的邏輯的同時，讓你的應用感覺不到延遲，反應更加靈敏。
文件處理
- 「file-saver」 一個在客戶端保存文件的解決方案，非常適合在客戶端上生成文件的 Web 應用程序
- 「js-xlsx」 一個強大的解析和編寫 excel 文件的庫
網(wǎng)絡請求
- 「Axios」 一個基于 Promise 的 HTTP 庫，可用在 Node.js 和瀏覽器上發(fā)起 HTTP 請求，支持所有現(xiàn)代瀏覽器，甚至包括 IE8+
- 「Superagent」 基于 Ajax 的優(yōu)化, 可以與 Node.js HTTP 客戶端搭配使用
- 「fly.js」 一個基于 promise 的 http 請求庫, 可以用在 node.js, Weex, 微信小程序, 瀏覽器, React Native 中
動畫庫
- 「Anime.js」 一個 JavaScript 動畫庫，可以處理 CSS 屬性，單個 CSS 轉(zhuǎn)換，SVG 或任何 DOM 屬性以及 JavaScript 對象
- 「Velocity」 一個高效的 Javascript 動畫引擎，與 jQuery 的 $.animate() 有相同的 API, 同時還支持彩色動畫、轉(zhuǎn)換、循環(huán)、畫架、SVG 支持和滾動等效果
- 「Vivus」 一個零依賴的 JavaScript 動畫庫，可以讓我們用 SVG 制作動畫，使其具有被繪制的外觀
- 「GreenSock JS」 一個 JavaScript 動畫庫，用于創(chuàng)建高性能、零依賴、跨瀏覽器動畫，已在超過 400 萬個網(wǎng)站上使用, 并且可以在 React、Vue、Angular 項目中使用
- 「Scroll Reveal」 零依賴，為 web 和移動瀏覽器提供了簡單的滾動動畫，以動畫的方式顯示滾動中的內(nèi)容
- 「Kute.js」 一個強大高性能且可擴展的原生 JavaScript 動畫引擎，具有跨瀏覽器動畫的基本功能
- 「Typed.js」 一個輕松實現(xiàn)打字效果的 js 插件
- 「fullPage.js」 一個可輕易創(chuàng)建全屏滾動網(wǎng)站的 js 滾動動畫庫, 兼容性無可替代
- 「iscroll」 移動端使用的一款輕量級滾動插件
- 「swiper.js」 一款強大的 js 跨端觸摸滑動插件
- 「MixItUp」 是用于 DOM 操作的高性能，無依賴庫，使您能夠使用精美的動畫過濾，排序，添加和刪除 DOM 元素的 js 動畫庫
- 「Lottie」 一個用于 Android，iOS，Web 和 Windows 的庫，用于解析使用 Bodymovin 導出為 json 的 Adobe After Effects 動畫，并在移動設備和網(wǎng)絡上呈現(xiàn)它們
鼠標/鍵盤相關
- 「KeyboardJS」 一個在瀏覽器中使用的庫(與 node.js 兼容).它使開發(fā)人員可以輕松設置鍵綁定和使用組合鍵來設置復雜的綁定.
- 「SortableJS」 功能強大的 JavaScript 拖拽庫
圖形/圖像處理庫
- 「html2canvas」 一個強大的使用 js 開發(fā)的瀏覽器網(wǎng)頁截圖工具
- 「dom-to-image」 一個可以將任意 DOM 節(jié)點轉(zhuǎn)換為用 JavaScript 編寫的矢量(SVG)或光柵(PNG 或 JPEG)圖像的庫
- 「pica」 一個在瀏覽器中調(diào)整圖像大小，而不會出現(xiàn)像素失真，處理速度非?？斓膱D片處理庫
- 「Lena.js」 一個輕量級的可以給你圖像加各種濾鏡的 js 庫
- 「Compressor.js」 一個使用本地 canvas.toBlob API 進行圖像有損壓縮的 js 庫
- 「Fabric.js」 一個易于使用的基于 HTML5 canvas 元素的圖片編輯器
- 「merge-images」 一個將多張圖片合并成一張圖的 js 插件
- 「cropperjs」 一款強大的圖片裁切庫, 支持靈活的圖片裁切方式
- 「Grade」 一個基于圖像中的前 2 種主要顏色生成互補漸變背景的庫
表單表格
- 「x-spreadsheet」 一個基于 web 的簡單易用的表格插件
Css 相關庫
- hover.css 開箱即用的鼠標懸停動畫
- animate.css 一個跨瀏覽器的簡單便捷的 CSS 動畫庫
- Magic 集成各種特殊動效的 css 動畫庫
- kite 一個兼容性極好且靈活的布局 css 庫
- csshake 一個能夠震動和晃動DOM元素的 CSSku 庫
- hint.css 一個用純 css 和 html 實現(xiàn)的提示庫
React相關庫
UI 庫
- Ant design 用于研發(fā)企業(yè)級中后臺產(chǎn)品的 UI 組件庫
- Ant design mobile 基于 Ant Design 設計體系的 React UI 移動端組件庫
- MaterialUI 世界最受歡迎的基于質(zhì)感設計的 React UI 庫
- toolbox 一套使用 CSS 模塊功能實現(xiàn) Google 的 Material Design 規(guī)范的 React 組件
- Fabric UI 微軟開源的 UX 框架的集合，用于創(chuàng)建共享代碼，設計和交互行為的精美的跨平臺應用程序
- React desktop 基于 React 的 JavaScript 庫，旨在將本機桌面體驗帶入網(wǎng)絡，其中包含許多 macOS Sierra 和 Windows 10 組件。react-desktop 與 NW.js 和 Electron.js 完美結合，但是可以在任何 JavaScript 驅(qū)動的項目中使用
- Zent 有贊 PC 端 WebUI 規(guī)范的 React 實現(xiàn)，提供了一整套基礎的 UI 組件以及一些常用的業(yè)務組件
- react-icons 基于 React 封裝的豐富的圖標庫
狀態(tài)管理
- Redux JavaScript 狀態(tài)容器，提供可預測化的狀態(tài)管理
- Redux Thunk Redux 的異步處理中間件
- MobX 通過函數(shù)響應式編程使得狀態(tài)管理變得簡單和可擴展
- Dva 一個基于 redux 和 redux-saga 的數(shù)據(jù)流方案
工具類
- React Virtualized 一個能渲染大型列表和表格的 React 解決方案
- react-file-viewer React 在線 PDF 預覽插件
- react-copy-to-clipboard 基于 React 的復制到剪切板組件
- qrcode.react 基于 React 的生成二維碼的組件
- nprogress 適用于 YouTube，Medium 等的頂部進度條組件
- react-syntax-highlighter 基于 React 的代碼高亮組件
- react-contextmenu 右鍵菜單組件
- emoji-mart 基于 React 的表情庫
- react-highlight-words 基于 React 的關鍵字高亮
- WaterMark 水印組件
數(shù)據(jù)可視化
- AntV 包含 G2、G6、F2、L7 以及一套完整的圖表使用和設計規(guī)范, 提供強大的數(shù)據(jù)可視化需求
- G2Plot 基于 G2 封裝的開箱即用的可視化組件庫
- recharts 使用 React 和 D3 構建的自定義的圖表庫
- Viser 支持多種主流框架的可視化庫
拖拽/排序
- react-beautiful-dnd 漂亮,可移植性 列表拖拽庫
- react-dnd 可幫助我們構建復雜的拖放界面，同時保持組件的分離
- react-moveable 支持自由拖拽, 縮放, 參考線的靈活強大的拖拽庫
- react-grid-layout 強大的網(wǎng)格拖拽排序縮放庫
- mixitup 強大且高性能的列表卡片排序動畫庫
動畫/動效果
- Halogen 使用 React 的加載動畫集合
- react-loading 一款基于 react 的輕量級加載動畫庫, 支持按需導入, 開箱即用
- react-move 漂亮的，數(shù)據(jù)驅(qū)動的 React 動畫庫
- react-spring 一個基于彈簧物理學的動畫庫
- react-text-loop-next 文字輪播動畫
圖像處理
- react-image-crop 強大的圖片裁切庫
- react-sparklines 基于數(shù)據(jù)自動生成趨勢線
- dom-to-image 基于 dom 生成圖片的 canvas 庫
- react-img-editor 支持截圖編輯的圖片庫
編輯器相關
- braft-editor 富文本編輯器
- powerNice 文檔編輯器
- mitu 圖片編輯器
- h5-dooring H5 頁面編輯器
- GGEditor 可視化圖編輯器
- react-codemirror2 代碼編輯器
- jsoneditor json 編輯器
地圖相關
- google-map-react 谷歌地圖插件
- react-amap 高德地圖插件
- react-baidu-map 百度地圖
優(yōu)秀國產(chǎn)項目集合
可視化編輯器
- h5-dooring
- dooringx
- v6.dooring
- mitu
- watermark-pro
vue 后臺模版
- vue3.0-template-admin
- vue-admin-box
- ant-simple-pro
文檔工具
- html2md
H5 活動插件
- lucky-canvas
視頻播放器
- JoL-player
好啦, 今天的分享就到這里啦, 如果你有好用的庫推薦, 歡迎在評論區(qū)反饋~ 后續(xù)會在 趣談前端 中持續(xù)總結復盤, 讓技術工作更高效。
本文轉(zhuǎn)載自微信公眾號「趣談前端」
責任編輯：姜華
來源：
趣談前端
