工欲善其事,必先利其器;器欲盡其能,必先得其法。
函數庫lodash推薦指數:⭐️⭐️⭐️⭐️⭐️
Lodash 是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。
地址:https://www.lodashjs.com/
請求庫 axios推薦指數:⭐️⭐️⭐️⭐️⭐️
是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。Features從瀏覽器中創建 XMLHttpRequests 從node.js 創建 http 請求 支持Promise API 攔截請求和...
地址:http://www.axios-js.com/
flyio推薦指數:⭐️⭐️⭐️⭐️⭐️
一個支持所有JavaScript運行環境的基於Promise的、支持請求轉發、強大的http請求庫。可以讓您在多個端上儘可能大限度的實現代碼復用。
地址:https://www.npmjs.com/package/flyio
富文本 vue-ueditor-wrap推薦指數:⭐️⭐️⭐️⭐️⭐️
一個「包裝」了 UEditor 的 Vue 組件,支持通過 v-model 來綁定富文本編輯器的內容,讓 UEditor 的使用簡單到像 Input 框一樣。省去了初始化 UEditor、手動調用 getContent,setContent 等繁瑣的步驟。
地址:https://hc199421.gitee.io/vue-ueditor-wrap/#/home
動畫庫 Animate.css推薦指數:⭐️⭐️⭐️⭐️⭐️
內置了很多典型的css3動畫,兼容性好使用方便。
地址:http://www.animate.net.cn/
Magic.css推薦指數:⭐️⭐️⭐️
一款獨特的CSS3動畫特效包。
網址:https://www.minimamente.com/project/magic/
move.js推薦指數:⭐️⭐️
一個小型的JavaScript庫,通過JS來控制一系列的CSS動畫順序執行,使CSS3動畫變得非常簡單和優雅。
網址:https://github.com/visionmedia/move.js
滾動庫 BetterScroll推薦指數:⭐️⭐️⭐️⭐️⭐️
better-scroll 是一款重點解決移動端(已支持 PC)各種滾動場景需求的插件。
better-scroll 是基於原生 JS 實現的,不依賴任何框架。它編譯後的代碼大小是 63kb,壓縮後是 35kb,zip 後僅有9kb,是一款非常輕量的 JS lib。
網址:https://github.com/ustbhuangyi/better-scroll
iscroll推薦指數:⭐️⭐️⭐️⭐️
iScroll是一個高性能,資源佔用少,無依賴,多平臺的javascript滾動插件。
它可以在桌面,行動裝置和智能電視平臺上工作。它一直在大力優化性能和文件大小以便在新舊設備上提供最順暢的體驗。
網址:http://caibaojian.com/iscroll-5/
存儲類store.js推薦指數:⭐️⭐️⭐️⭐️⭐️
store.js 是一個兼容絕大部分主流瀏覽器的 LocalStorage 包裝器,不需要藉助 Cookie 或者 Flash。store.js 會根據瀏覽器自動選擇使用 localStorage、globalStorage 或者 userData 來實現本地存儲功能。
store.set('username', 'HQG') store.get('username') store.remove('username') store.clear() store.set('user', { name: 'lcq' }) var user = store.get('user')console.log(user.name);地址:https://www.npmjs.com/package/store
js-cookie推薦指數:⭐️⭐️⭐️⭐️⭐️
js-cookie是一個簡單的,輕量級的處理cookies的js API。
地址:https://www.npmjs.com/package/js-cookie
Mock數據類Mockjs推薦指數:⭐️⭐️⭐️⭐️⭐️
生成任意隨機數據,攔截 Ajax 請求。
地址:https://www.npmjs.com/package/mockjs
數據可視化 ECharts推薦指數:⭐️⭐️⭐️⭐️⭐️
一個基於 JavaScript 的開源可視化圖表庫。
地址:https://echarts.apache.org/zh/index.html
D3.js推薦指數:⭐️⭐️⭐️⭐️⭐️
D3js 是一個可以基於數據來操作文檔的 JavaScript 庫。可以幫助你使用 HTML, CSS, SVG 以及Canvas 來展示數據。
地址:https://www.d3js.org.cn/
Three.js推薦指數:⭐️⭐️⭐️⭐️⭐️
three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。
地址:http://www.webgl3d.cn/
hightchart推薦指數:⭐️⭐️⭐️⭐️
兼容 IE6+、完美支持移動端、圖表類型豐富、方便快捷的 HTML5 交互性圖表庫。
地址:https://www.highcharts.com.cn/
DataV推薦指數:⭐️⭐️⭐️
Vue/React 大屏數據展示組件庫。
地址:http://datav.jiaminghi.com/
地圖數據源推薦指數:⭐️⭐️⭐️⭐️⭐️
大屏/地圖/echarts地圖數據都可以從這裡面取!
地址:http://datav.aliyun.com/tools/atlas/index.html
地圖 高德地圖推薦指數:⭐️⭐️⭐️⭐️⭐️
地址:https://lbs.amap.com/
百度地圖推薦指數:⭐️⭐️⭐️⭐️
地址:https://lbsyun.baidu.com/
地圖坐標系轉換 (gcoord)推薦指數:⭐️⭐️⭐️⭐️⭐️
gcoord主要解決了兩個問題
能將坐標在不同坐標系下相互轉換
能夠處理GeoJSON
地址:https://github.com/hujiulong/gcoord
日期處理moment.js推薦指數:⭐️⭐️⭐️⭐️⭐️
JavaScript日期處理插件。
moment().format('YYYY-MM-DD HH:mm:ss'); moment("20120901", "YYYYMMDD").fromNow();地址:http://momentjs.cn/
day.js推薦指數:⭐️⭐️⭐️⭐️⭐️
一個輕量的處理時間和日期的 JavaScript 庫。
地址:https://github.com/iamkun/dayjs
輪播swiper.js推薦指數:⭐️⭐️⭐️⭐️⭐️
Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端。
Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏輪播圖切換等常用效果。
Swiper開源、免費、穩定、使用簡單、功能強大,是架構移動終端網站的重要選擇!
地址:https://www.swiper.com.cn/
slip.js推薦指數:⭐️⭐️
移動端跟隨手指滑動組件,零依賴。
地址:https://github.com/binnng/slip.js
複製粘貼插件clipboard-polyfill推薦指數:⭐️⭐️⭐️⭐️⭐️
這個庫是現代基於Promise的異步剪貼板API的polyfill。
地址:https://www.npmjs.com/package/clipboard-polyfill
clipboard.js推薦指數:⭐️⭐️⭐️⭐️
Clipboard.js 實現了純 JavaScript (無 Flash)的瀏覽器內容複製到系統剪貼板的功能。可以在瀏覽器和 Node 環境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+。
地址:https://mateusmirandaalmeida.github.io/clipboard.js/index.html
二維碼插件 qrcode.js推薦指數:⭐️⭐️⭐️⭐️⭐️
qrcode.js 是一個用於生成二維碼的 JavaScript 庫。主要是通過獲取 DOM 的標籤,再通過 HTML5 Canvas 繪製而成,不依賴任何庫。
地址:https://www.npmjs.com/package/qrcode
拖拽插件Draggabilly推薦指數:⭐️⭐️⭐️
可幫你輕鬆實現網頁上各種元素的拖放操作。支持 IE8+ 和多觸摸。
地址:https://draggabilly.desandro.com/
dragula推薦指數:⭐️⭐️⭐️⭐️
dragula讓你能夠很方便地實現拖拽功能的JS庫。Dragula 是一個 JavaScript 庫,實現了網頁上的拖放功能。提供 JavaScript、AngularJS 和 React 版本。
地址:https://www.npmjs.com/package/dragula
文件上傳 WebUploader推薦指數:⭐️⭐️⭐️⭐️⭐️
WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主,FLASH為輔的現代文件上傳組件。在現代的瀏覽器裡面能充分發揮HTML5的優勢,同時又不摒棄主流IE瀏覽器,沿用原來的FLASH運行時,兼容IE6+,iOS 6+, android 4+。兩套運行時,同樣的調用方式,可供用戶任意選用。
採用大文件分片並發上傳,極大的提高了文件上傳效率。
地址:http://fex.baidu.com/webuploader/
Canvas庫 html2canvas推薦指數:⭐️⭐️⭐️⭐️⭐️
html2canvas是一款使你可以直接在用戶瀏覽器上截取網頁或部分網頁的「屏幕快照」的庫。
地址:https://www.npmjs.com/package/html2canvas
Fabric.js推薦指數:⭐️⭐️⭐️⭐️⭐️
是一個強大而簡單的 Javascript HTML5 畫布庫 Fabric 在畫布元素之上提供交互式對象模型 Fabric 還具有 SVG-to-canvas(和 canvas-to-SVG)解析器。
地址:http://fabricjs.com/
圖片處理 cropperjs推薦指數:⭐️⭐️⭐️⭐️⭐️
cropperjs是一款非常強大卻又簡單的圖片裁剪工具,它可以進行非常靈活的配置,支持手機端使用,支持包括IE9以上的現代瀏覽器。(關鍵是使用方法簡單,幾行代碼就可以搞定)。
地址:https://www.npmjs.com/package/cropperjs
gif.js推薦指數:⭐️⭐️⭐️⭐️⭐️
gif.js 是一個可直接在瀏覽器上運行的 JavaScript GIF 編碼器。直接生成gif。
地址:https://www.npmjs.com/package/gif.js
LazyLoad推薦指數:⭐️⭐️⭐️⭐️⭐️
Lazy Load幫助高度較長的網頁進行延遲載入圖片,尚未瀏覽到該部分時,不會載入視角外的圖片,提高效率。衍生有也有vue-lazyload以及react-lazyload。
地址:https://www.lazyloadjs.cn/
前端國際化 i18n推薦指數:⭐️⭐️⭐️⭐️⭐️
地址:https://www.npmjs.com/package/i18n
視頻/音頻 xgplayer推薦指數:⭐️⭐️⭐️⭐️⭐️
一款帶解析器、支持音頻、歌詞解析、能節省流量的HTML5視頻播放器。
地址:https://v2.h5player.bytedance.com/
dplayer推薦指數:⭐️⭐️⭐️⭐️
一個很好看的彈幕視頻播放器。
地址:http://dplayer.js.org/
video.js推薦指數:⭐️
Video.js 是一個通用的在網頁上嵌入視頻播放器的 JS 庫,Video.js 自動檢測瀏覽器對 HTML5 的支持情況,如果不支持 HTML5 則自動使用 Flash 播放器。說真的(不好看且難改)
地址:https://github.com/videojs/video.js
其他插件 screenfull.js推薦指數:⭐️⭐️
瀏覽器全屏插件,消除瀏覽器差異。
地址:https://www.npmjs.com/package/screenfull
highlight.js推薦指數:⭐️⭐️⭐️⭐️
針對Web程序所做的高亮顯示上色。
地址:https://www.fenxianglu.cn/highlight.html
以上是目前總結出的常用的庫,會一直更新。
PS:如果覺得我的分享不錯,歡迎大家隨手點讚、在看。