前端高效開發不得不知道的一些JavaScript庫！

工欲善其事,必先利其器；器欲盡其能,必先得其法，

函式庫

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

影片庫

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 來實作本地存盤功能，

//存盤鍵值對key-value
store.set('username', 'HQG')
 
//根據key，獲取存盤的value值
store.get('username')
 
//移除指定的key資料
store.remove('username')
 
//清除所有key
store.clear()
 
//運用store.js存盤輕量級的json物件,自動stringify
store.set('user', { name: 'lcq' })
 
//根據key,獲取一個存盤物件,自動parse
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'); //2021-08-29 23:36:09 
moment("20120901", "YYYYMMDD").fromNow(); //2 years ago      
//等很多

地址：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

以上是目前總結出的常用的庫，會一直更新，如果你也有好用的庫要推薦請在評論區或私信我們，

以上推薦指數不代表個人觀點，只是一個統計，