摘要：函數庫動畫庫動畫庫，也是目前最通用的動畫庫。下拉框級聯選擇器移動端最好用的的篩選器組件聯動篩選移動端最好用的的篩選器組件聯動篩選顏色選擇器時間選擇器時間日期處理是一個解析，驗證，操作和顯示日期和時間的類庫。

前言

在開發中，我們經常會將一些常用的代碼塊、功能塊進行封裝，為的是更好的復用。那么，被抽離出來獨立完成功能，通過API或配置項和其他部分交互，便形成了插件。

下面這些是我在工作中積累的一些常用的前端開源插件，這里只是羅列出來，詳細的用法各個插件官網或者Gayhub都有介紹。注意：往往一個解決方案會有多個插件，需要讀者根據自己的實際業務需求進行甄別選用，歡迎留言交流和補充。

函數庫

Lodash https://github.com/lodash/lodash Underscore
https://underscorejs.org/ Ramda https://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/iscroll BetterScroll：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/superRayti...

以上有你需要的內容嗎？
如果有，不要錯過下期內容噢~~

本文內容未完待續...
作者：白小明
來源:
https://juejin.im/post/5ba7d5...

訂閱號ID：Miaovclass

關注妙味訂閱號：“妙味前端”，為您帶來優質前端技術干貨；