GitHub 上值得推薦的100個精選前端項目「干貨」
者:大俠學前端
轉發鏈接:https://mp.weixin.qq.com/s/mb6azUR_valqAtUJaJ5TGQ
年多時間, 陸陸續續整理了一些常用且實用的開源項目, 方便大家更高效地學習和工作。
js相關庫
js 常用工具類
- 「lodash」 一個一致性、模塊化、高性能的 JavaScript 實用工具庫。
- 「xijs」 一款面向復雜業務場景的 javascript 工具庫
- 「ramda」 一個很重要的庫,提供了許多有用的方法,每個 JavaScript 程序員都應該掌握這個工具
- 「day.js」 一個輕量的處理時間和日期的 JavaScript 庫,和 Moment.js 的 API 設計保持完全一樣, 體積只有 2kb
- 「big.js」 一個小型,快速的 JavaScript 庫,用于任意精度的十進制算術運算
- 「qs」 一個 url 參數轉化 (parse 和 stringify)的輕量級 js 庫
- 「decimal.js」 實現 JavaScript 的任意精度的十進制類型庫
表單校驗
- 「Validator.js」 一個強大的 js 表單校驗庫
- 「Validate.js」 致力于提供一種驗證數據的跨框架和跨語言方式的 js 庫, 已通過 100%代碼覆蓋率的單元測試
dom 庫
- 「JQuery」 封裝了各種 dom/事件操作, 設計思想值得研究借鑒
- 「zepto」 jquery 的輕量級版本, 適合移動端操作
- 「fastclick」 一個簡單易用的庫,它消除了移動端瀏覽器上的物理點擊和觸發一個 click 事件之間的 300ms 的延遲。目的就是在不干擾你目前的邏輯的同時,讓你的應用感覺不到延遲,反應更加靈敏。
文件處理
- 「file-saver」 一個在客戶端保存文件的解決方案,非常適合在客戶端上生成文件的 Web 應用程序
- 「js-xlsx」 一個強大的解析和編寫 excel 文件的庫
網絡請求
- 「Axios」 一個基于 Promise 的 HTTP 庫,可用在 Node.js 和瀏覽器上發起 HTTP 請求,支持所有現代瀏覽器,甚至包括 IE8+
- 「Superagent」 基于 Ajax 的優化, 可以與 Node.js HTTP 客戶端搭配使用
- 「fly.js」 一個基于 promise 的 http 請求庫, 可以用在 node.js, Weex, 微信小程序, 瀏覽器, React Native 中
動畫庫
- 「Anime.js」 一個 JavaScript 動畫庫,可以處理 CSS 屬性,單個 CSS 轉換,SVG 或任何 DOM 屬性以及 JavaScript 對象
- 「Velocity」 一個高效的 Javascript 動畫引擎,與 jQuery 的 $.animate() 有相同的 API, 同時還支持彩色動畫、轉換、循環、畫架、SVG 支持和滾動等效果
- 「Vivus」 一個零依賴的 JavaScript 動畫庫,可以讓我們用 SVG 制作動畫,使其具有被繪制的外觀
- 「GreenSock JS」 一個 JavaScript 動畫庫,用于創建高性能、零依賴、跨瀏覽器動畫,已在超過 400 萬個網站上使用, 并且可以在 React、Vue、Angular 項目中使用
- 「Scroll Reveal」 零依賴,為 web 和移動瀏覽器提供了簡單的滾動動畫,以動畫的方式顯示滾動中的內容
- 「Kute.js」 一個強大高性能且可擴展的原生 JavaScript 動畫引擎,具有跨瀏覽器動畫的基本功能
- 「Typed.js」 一個輕松實現打字效果的 js 插件
- 「fullPage.js」 一個可輕易創建全屏滾動網站的 js 滾動動畫庫, 兼容性無可替代
- 「iscroll」 移動端使用的一款輕量級滾動插件
- 「swiper.js」 一款強大的 js 跨端觸摸滑動插件
- 「MixItUp」 是用于 DOM 操作的高性能,無依賴庫,使您能夠使用精美的動畫過濾,排序,添加和刪除 DOM 元素的 js 動畫庫
- 「Lottie」 一個用于 Android,iOS,Web 和 Windows 的庫,用于解析使用 Bodymovin 導出為 json 的 Adobe After Effects 動畫,并在移動設備和網絡上呈現它們
鼠標/鍵盤相關
- 「KeyboardJS」 一個在瀏覽器中使用的庫(與 node.js 兼容).它使開發人員可以輕松設置鍵綁定和使用組合鍵來設置復雜的綁定.
- 「SortableJS」 功能強大的 JavaScript 拖拽庫
圖形/圖像處理庫
- 「html2canvas」 一個強大的使用 js 開發的瀏覽器網頁截圖工具
- 「dom-to-image」 一個可以將任意 DOM 節點轉換為用 JavaScript 編寫的矢量(SVG)或光柵(PNG 或 JPEG)圖像的庫
- 「pica」 一個在瀏覽器中調整圖像大小,而不會出現像素失真,處理速度非??斓膱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 實現的提示庫
React相關庫
UI 庫
- Ant design 用于研發企業級中后臺產品的 UI 組件庫
- Ant design mobile 基于 Ant Design 設計體系的 React UI 移動端組件庫
- MaterialUI 世界最受歡迎的基于質感設計的 React UI 庫
- toolbox 一套使用 CSS 模塊功能實現 Google 的 Material Design 規范的 React 組件
- Fabric UI 微軟開源的 UX 框架的集合,用于創建共享代碼,設計和交互行為的精美的跨平臺應用程序
- React desktop 基于 React 的 JavaScript 庫,旨在將本機桌面體驗帶入網絡,其中包含許多 macOS Sierra 和 Windows 10 組件。react-desktop 與 NW.js 和 Electron.js 完美結合,但是可以在任何 JavaScript 驅動的項目中使用
- Zent 有贊 PC 端 WebUI 規范的 React 實現,提供了一整套基礎的 UI 組件以及一些常用的業務組件
- react-icons 基于 React 封裝的豐富的圖標庫
狀態管理
- Redux JavaScript 狀態容器,提供可預測化的狀態管理
- Redux Thunk Redux 的異步處理中間件
- MobX 通過函數響應式編程使得狀態管理變得簡單和可擴展
- Dva 一個基于 redux 和 redux-saga 的數據流方案
工具類
- 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 水印組件
數據可視化
- AntV 包含 G2、G6、F2、L7 以及一套完整的圖表使用和設計規范, 提供強大的數據可視化需求
- G2Plot 基于 G2 封裝的開箱即用的可視化組件庫
- recharts 使用 React 和 D3 構建的自定義的圖表庫
- Viser 支持多種主流框架的可視化庫
拖拽/排序
- react-beautiful-dnd 漂亮,可移植性 列表拖拽庫
- react-dnd 可幫助我們構建復雜的拖放界面,同時保持組件的分離
- react-moveable 支持自由拖拽, 縮放, 參考線的靈活強大的拖拽庫
- react-grid-layout 強大的網格拖拽排序縮放庫
- mixitup 強大且高性能的列表卡片排序動畫庫
動畫/動效果
- Halogen 使用 React 的加載動畫集合
- react-loading 一款基于 react 的輕量級加載動畫庫, 支持按需導入, 開箱即用
- react-move 漂亮的,數據驅動的 React 動畫庫
- react-spring 一個基于彈簧物理學的動畫庫
- react-text-loop-next 文字輪播動畫
圖像處理
- react-image-crop 強大的圖片裁切庫
- react-sparklines 基于數據自動生成趨勢線
- 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 百度地圖
優秀國產項目集合
可視化編輯器
- h5-dooring
- dooringx
- v6.dooring
- mitu
- watermark-pro
vue 后臺模版
- vue3.0-template-admin
- vue-admin-box
- ant-simple-pro
文檔工具
H5 活動插件
視頻播放器
好啦, 今天的分享就到這里啦, 如果你有好用的庫推薦, 歡迎在評論區反饋~ 后續會在 趣談前端 中持續總結復盤, 讓技術工作更高效。
本文轉載自微信公眾號「趣談前端」