在開發中，我們經常會將一些常用的程式碼塊、功能塊進行封裝，為的是更好的複用。那麼，被抽離出來獨立完成功能，通過API或配置項和其他部分互動，便形成了外掛。
下面這些是我在工作中積累的一些常用的前端開源外掛，這裡只是羅列出來，詳細的用法各個外掛官網或者Gayhub都有介紹。注意：往往一個解決方案會有多個外掛，需要讀者根據自己的實際業務需求進行甄別選用，歡迎留言交流和補充。
函式庫
Lodash
https://github.com/lodash/lodash
Underscore
https://underscorejs.org/
Ramda
https://github.com/ramda/ramda
outils
https://github.com/proYang/outils
複製程式碼動畫庫
Animate.css：CSS3 動畫庫，也是目前最通用的動畫庫。
https://daneden.github.io/animate.css/
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/visionmedia/move.js
複製程式碼滾動庫
iscroll - 平滑滾動外掛
https://github.com/cubiq/iscroll
BetterScroll：iscroll 的優化版，使移動端滑動體驗更加流暢
https://github.com/ustbhuangyi/better-scroll
mescroll：移動端上拉重新整理下拉載入
http://www.mescroll.com/api.html
jQuery Scrollbox：圖片文字滾動外掛
http://www.jq22.com/jquery-info1890
liMarquee：jQuery無縫滾動外掛
http://www.dowebok.com/188.html
複製程式碼輪播圖
Swiper：常用於移動端網站的內容觸控滑動
https://www.swiper.com.cn/
iSlider：移動端滑動元件
http://eux.baidu.com/iSlider/demo/index_chinese.html
slip.js：移動端跟隨手指滑動元件，零依賴。
https://github.com/binnng/slip.js
OwlCarousel2：
http://owlcarousel2.github.io/OwlCarousel2/
slick：
http://www.jq22.com/jquery-info406
WebSlides：
https://github.com/webslides/webslides/
jQuery輪播外掛slider：
http://www.jq22.com/jquery-info889
複製程式碼滾屏
fullpage：
http://www.jq22.com/jquery-info1124
複製程式碼彈出框
layer：獨立維護的三大元件之一（layDate、layer、layim）
http://layer.layui.com/
Bootbox.js：
http://bootboxjs.com/
dialogBox：基於 jQuery
http://www.jq22.com/jquery-info4822
easyDialog：
http://www.h-ui.net/easydialog-v2.0/index.html
複製程式碼訊息通知
Notyf：簡單的響應式純js訊息通知外掛
http://www.htmleaf.com/jQuery/Lightbox-Dialog/201609123990.html
PNotify：頁面右上角的提示資訊（非彈框提示）
https://github.com/sciactive/pnotify
https://sciactive.com/pnotify/
overhang.js：是一個JQuery外掛顯示即時通知、 確認或給定元素中的提示。
http://www.jq22.com/jquery-info9193
複製程式碼下拉框
select2
https://select2.org/
複製程式碼級聯選擇器
ustbhuangyi/picker：移動端最好用的的篩選器元件、聯動篩選
https://github.com/ustbhuangyi/picker
jQueryDistpicker：移動端最好用的的篩選器元件、聯動篩選
http://fengyuanchen.github.io/distpicker/
http://www.jq22.com/demo/jQueryDistpicker20160621/
複製程式碼顏色選擇器
Bootstrap Colorpicker 2
https://github.com/farbelous/bootstrap-colorpicker
複製程式碼時間選擇器
layDate：
https://www.layui.com/laydate/
複製程式碼時間日期處理
Moment.js：是一個解析，驗證，操作和顯示日期和時間的 JavaScript 類庫。
http://momentjs.com/
https://github.com/moment/moment
timeago.js：輕量級的時間轉換 Javascript 庫
https://github.com/hustcc/timeago.js
複製程式碼表單驗證
validator.js：
https://github.com/chriso/validator.js
jQuery Validation：jQuery 表單校驗
https://github.com/jquery-validation/jquery-validation
Validform：一行程式碼搞定整站的表單驗證！- Jquery表單驗證外掛
http://validform.rjboy.cn/
複製程式碼分頁外掛
pagination：
https://github.com/superRaytin/paginationjs
複製程式碼以上有你需要的內容嗎？ 如果有，不要錯過下期內容噢~~
本文內容未完待續...
作者：白小明
來源:
訂閱號ID：Miaovclass
關注妙味訂閱號：“妙味前端”，為您帶來優質前端技術乾貨；