前端常用外掛、工具類庫彙總（轉）
阿新 • • 發佈：2019-01-07
前言
在開發中，我們經常會將一些常用的程式碼塊、功能塊進行封裝，為的是更好的複用。那麼，被抽離出來獨立完成功能，通過API或配置項和其他部分互動，便形成了外掛。
下面這些是我在工作中積累的一些常用的前端開源外掛，這裡只是羅列出來，詳細的用法各個外掛官網或者Gayhub都有介紹。注意：往往一個解決方案會有多個外掛，需要讀者根據自己的實際業務需求進行甄別選用，歡迎留言交流和補充。
函式庫
Lodash https://github.com/lodash/lodash Underscore
https://underscorejs.org/ Ramdahttps://github.com/ramda/ramda outils
https://github.com/proYang/ou...
動畫庫
Animate.css：CSS3 動畫庫，也是目前最通用的動畫庫。
https://daneden.github.io/ani...
Anime.js：一個強大的、輕量級的用來製作動畫的javascript庫 http://animejs.com/
Hover.css：CSS hover 懸停效果，可以應用於連結、按鈕、圖片等等。
https://github.com/IanLunn/Hover wow.js：滾動展示動畫，WOW.js 依賴
animate.css，所以它支援 animate.css 多達 60 多種的動畫效果。
https://github.com/matthieua/WOW Magic.css：css3 animation動畫庫
https://github.com/miniMAC/magic Waves：點選波紋效果
https://github.com/fians/Waves
move.js：一個小型的JavaScript庫，通過JS來控制一系列的CSS動畫順序執行，使CSS3動畫變得非常簡單和優雅。
https://github.com/visionmedi...
滾動庫
iscroll - 平滑滾動外掛 https://github.com/cubiq/iscrollBetterScroll：iscroll
的優化版，使移動端滑動體驗更加流暢 https://github.com/ustbhuangy...
mescroll：移動端上拉重新整理下拉載入 http://www.mescroll.com/api.html jQuery
Scrollbox：圖片文字滾動外掛 http://www.jq22.com/jquery-in...
liMarquee：jQuery無縫滾動外掛 http://www.dowebok.com/188.html
輪播圖
Swiper：常用於移動端網站的內容觸控滑動 https://www.swiper.com.cn/ iSlider：移動端滑動元件
http://eux.baidu.com/iSlider/...
slip.js：移動端跟隨手指滑動元件，零依賴。 https://github.com/binnng/sli...
OwlCarousel2： http://owlcarousel2.github.io... slick：
http://www.jq22.com/jquery-in... WebSlides：
https://github.com/webslides/... jQuery輪播外掛slider：
http://www.jq22.com/jquery-in...
滾屏
fullpage： http://www.jq22.com/jquery-in...
彈出框
layer：獨立維護的三大元件之一（layDate、layer、layim） http://layer.layui.com/
Bootbox.js： http://bootboxjs.com/ dialogBox：基於 jQuery
http://www.jq22.com/jquery-in... easyDialog：
http://www.h-ui.net/easydialo...
訊息通知
Notyf：簡單的響應式純js訊息通知外掛
http://www.htmleaf.com/jQuery...
PNotify：頁面右上角的提示資訊（非彈框提示） https://github.com/sciactive/...
https://sciactive.com/pnotify/ overhang.js：是一個JQuery外掛顯示即時通知加粗文字、
確認或給定元素中的提示。 http://www.jq22.com/jquery-in...
下拉框
select2 https://select2.org/
級聯選擇器
ustbhuangyi/picker：移動端最好用的的篩選器元件、聯動篩選
https://github.com/ustbhuangy...
jQueryDistpicker：移動端最好用的的篩選器元件、聯動篩選
http://fengyuanchen.github.io...
http://www.jq22.com/demo/jQue...
顏色選擇器
Bootstrap Colorpicker 2
https://github.com/farbelous/...
時間選擇器
layDate： https://www.layui.com/laydate/
時間日期處理
Moment.js：是一個解析，驗證，操作和顯示日期和時間的 JavaScript 類庫。 http://momentjs.com/
https://github.com/moment/moment timeago.js：輕量級的時間轉換 Javascript 庫
https://github.com/hustcc/tim...
表單驗證
validator.js： https://github.com/chriso/val... jQuery
Validation：jQuery 表單校驗
https://github.com/jquery-val...
Validform：一行程式碼搞定整站的表單驗證！- Jquery表單驗證外掛 http://validform.rjboy.cn/
分頁外掛
pagination： https://github.com/superRayt
富文字編輯器
wangEditor http://www.wangeditor.com/ 百度UEditor
https://ueditor.baidu.com/web... KindEditor
http://kindeditor.net/demo.php MediumEditor
http://yabwe.github.io/medium... Simditor
https://simditor.tower.im/ Summernote https://summernote.org/ Quill
https://quilljs.com/ Slate https://github.com/ianstormta...
Markdown
編輯器
Editor.md https://pandao.github.io/edit... 樹外掛 樹外掛
http://www.treejs.cn/v3/main....
圖片懶載入
lazyload https://github.com/tuupola/jq...
瀑布流
Masonry https://www.cnblogs.com/cjc91... Metro風兼瀑布流佈局效果
http://www.lanrenzhijia.com/j...
相簿
（圖片滑動切換展示效果） Viewer.js https://fengyuanchen.github.i...
導航外掛
okayNav http://www.dowebok.com/204.html
視訊播放器
Chimee：元件化H5播放器框架 http://chimee.org/
https://juejin.im/entry/5a02b... flv.js Bilibili 開源純
JavaScript 編寫的 FLV 播放器 Flash 視訊（FLV）播放器 http://chimee.org/
https://juejin.im/entry/5a02b... jplayer
http://www.jplayer.cn/ html5player
https://juejin.im/post/596f53... Video.js：
開源、免費的HTML5和Flash視訊播放器 https://dogeek.net/
彈幕播放器
DanmuPlayer - Html5彈幕播放器外掛 https://github.com/chiruom/Da...
jquery.danmu.js - jQuery彈幕外掛
https://github.com/chiruom/jq... scroxt - 字幕字型滾動外掛
https://github.com/chenjianfa...
複製貼上外掛
clipboard.js https://github.com/zenorocha/... ZeroClipboard
https://github.com/zeroclipbo...
二維碼外掛
jquery.qrcode.js https://github.com/jeromeetie...
拖拽
Draggabilly http://www.jq22.com/jquery-in... dragula
https://www.toutiao.com/a6491...
檔案上傳
uploader WebUploader： HTML5 & FLASH 檔案上傳
https://github.com/fex-team/w...
程式碼高亮
hightlightokayNav https://highlightjs.org/
前端國際化
i18n i18next https://github.com/i18next/i1... vue-i18n
https://github.com/kazupon/vu...
前端系列——jquery.i18n.properties前端國際化解決方案“填坑日記”：
http://www.cnblogs.com/landea...
基於jQuery.i18n.properties 實現前端頁面的資源國際化
https://blog.csdn.net/aixiaoy...
地圖
百度地圖 http://lbsyun.baidu.com/ 谷歌地圖
http://www.runoob.com/googlea... 高德地圖
https://lbs.amap.com/ 騰訊地圖 https://lbs.qq.com/
網頁即時通訊
LayIM http://layim.layui.com/ 閒聊麼 https://www.xianliao.me/
資料視覺化
ECharts http://echarts.baidu.com/inde... 阿里雲 DataV
PDF 閱讀器
https://github.com/mozilla/pd...
主題色提取
RGBaster https://github.com/briangonza... Color Thief
vibrant.js
前端儲存
ustbhuangyi/storage： 封裝了sessionStorage和localStorage
https://github.com/ustbhuangy... store.js 本地儲存localstorage的封裝
https://github.com/jaywcjlove... localForage
https://github.com/localForag...
資料 Mock
Easy Mock https://github.com/easy-mock/... Mockjs 生成任意隨機資料，攔截
Ajax 請求 http://mockjs.com/ json-server + fakerjs
https://github.com/typicode/j...
分享
bShare QQ分享元件 百度分享
評論
Gitalk gitment 暢言 來必力
其他
IE瀏覽器版本過低提示外掛IEalert.js http://www.jqueryfuns.com/res...
lyric-parser - QQ音樂歌詞解析 https://github.com/ustbhuangy...
holder.js - 圖片佔位符外掛 https://github.com/imsky/holder
jQuery放大鏡外掛jqzoom.js http://www.jq22.com/jquery-in... Zooming –
JavaScript圖片縮放庫 http://www.dowebok.com/204.html