前言

在開(kāi)發(fā)中，我們經(jīng)常會(huì)將一些常用的代碼塊、功能塊進(jìn)行封裝，為的是更好的復(fù)用。那么，被抽離出來(lái)獨(dú)立完成功能，通過(guò)API或配置項(xiàng)和其他部分交互，便形成了插件。

下面這些是我在工作中積累的一些常用的前端開(kāi)源插件，這里只是羅列出來(lái)，詳細(xì)的用法各個(gè)插件官網(wǎng)或者Gayhub都有介紹。注意：往往一個(gè)解決方案會(huì)有多個(gè)插件，需要讀者根據(jù)自己的實(shí)際業(yè)務(wù)需求進(jìn)行甄別選用，歡迎留言交流和補(bǔ)充。

函數(shù)庫(kù)

Lodash https://github.com/lodash/lodash Underscore https://underscorejs.org/ Ramda https://github.com/ramda/ramda outils https://github.com/proYang/outils 復(fù)制代碼

動(dòng)畫(huà)庫(kù)

Animate.css：CSS3 動(dòng)畫(huà)庫(kù)，也是目前最通用的動(dòng)畫(huà)庫(kù)。 https://daneden.github.io/animate.css/ Anime.js：一個(gè)強(qiáng)大的、輕量級(jí)的用來(lái)制作動(dòng)畫(huà)的javascript庫(kù) http://animejs.com/ Hover.css：CSS hover 懸停效果，可以應(yīng)用于鏈接、按鈕、圖片等等。 https://github.com/IanLunn/Hover wow.js：滾動(dòng)展示動(dòng)畫(huà)，WOW.js 依賴 animate.css，所以它支持 animate.css 多達(dá) 60 多種的動(dòng)畫(huà)效果。 https://github.com/matthieua/WOW Magic.css：css3 animation動(dòng)畫(huà)庫(kù) https://github.com/miniMAC/magic Waves：點(diǎn)擊波紋效果 https://github.com/fians/Waves move.js：一個(gè)小型的JavaScript庫(kù)，通過(guò)JS來(lái)控制一系列的CSS動(dòng)畫(huà)順序執(zhí)行，使CSS3動(dòng)畫(huà)變得非常簡(jiǎn)單和優(yōu)雅。 https://github.com/visionmedia/move.js 復(fù)制代碼

滾動(dòng)庫(kù)

iscroll - 平滑滾動(dòng)插件 https://github.com/cubiq/iscroll BetterScroll：iscroll 的優(yōu)化版，使移動(dòng)端滑動(dòng)體驗(yàn)更加流暢 https://github.com/ustbhuangyi/better-scroll mescroll：移動(dòng)端上拉刷新下拉加載 http://www.mescroll.com/api.html jQuery Scrollbox：圖片文字滾動(dòng)插件 http://www.jq22.com/jquery-info1890 liMarquee：jQuery無(wú)縫滾動(dòng)插件 http://www.dowebok.com/188.html 復(fù)制代碼

輪播圖

Swiper：常用于移動(dòng)端網(wǎng)站的內(nèi)容觸摸滑動(dòng) https://www.swiper.com.cn/ iSlider：移動(dòng)端滑動(dòng)組件 http://eux.baidu.com/iSlider/demo/index_chinese.html slip.js：移動(dòng)端跟隨手指滑動(dòng)組件，零依賴。 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 復(fù)制代碼

滾屏

fullpage： http://www.jq22.com/jquery-info1124 復(fù)制代碼

彈出框

layer：獨(dú)立維護(hù)的三大組件之一（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 復(fù)制代碼

消息通知

Notyf：簡(jiǎn)單的響應(yīng)式純js消息通知插件 http://www.htmleaf.com/jQuery/Lightbox-Dialog/201609123990.html PNotify：頁(yè)面右上角的提示信息（非彈框提示） https://github.com/sciactive/pnotify https://sciactive.com/pnotify/ overhang.js：是一個(gè)JQuery插件顯示即時(shí)通知、 確認(rèn)或給定元素中的提示。 http://www.jq22.com/jquery-info9193 復(fù)制代碼

下拉框

select2 https://select2.org/ 復(fù)制代碼

級(jí)聯(lián)選擇器

ustbhuangyi/picker：移動(dòng)端最好用的的篩選器組件、聯(lián)動(dòng)篩選 https://github.com/ustbhuangyi/picker jQueryDistpicker：移動(dòng)端最好用的的篩選器組件、聯(lián)動(dòng)篩選 http://fengyuanchen.github.io/distpicker/ http://www.jq22.com/demo/jQueryDistpicker20160621/ 復(fù)制代碼

顏色選擇器

Bootstrap Colorpicker 2 https://github.com/farbelous/bootstrap-colorpicker 復(fù)制代碼

時(shí)間選擇器

layDate： https://www.layui.com/laydate/ 復(fù)制代碼

時(shí)間日期處理

Moment.js：是一個(gè)解析，驗(yàn)證，操作和顯示日期和時(shí)間的 JavaScript 類(lèi)庫(kù)。 http://momentjs.com/ https://github.com/moment/moment timeago.js：輕量級(jí)的時(shí)間轉(zhuǎn)換 Javascript 庫(kù) https://github.com/hustcc/timeago.js 復(fù)制代碼

表單驗(yàn)證

validator.js： https://github.com/chriso/validator.js jQuery Validation：jQuery 表單校驗(yàn) https://github.com/jquery-validation/jquery-validation Validform：一行代碼搞定整站的表單驗(yàn)證！- Jquery表單驗(yàn)證插件 http://validform.rjboy.cn/ 復(fù)制代碼

分頁(yè)插件

pagination： https://github.com/superRaytin/paginationjs 復(fù)制代碼

以上有你需要的內(nèi)容嗎？ 如果有，不要錯(cuò)過(guò)下期內(nèi)容噢~~

本文內(nèi)容未完待續(xù)...

作者：白小明

來(lái)源:

juejin.im/post/5ba7d5…

訂閱號(hào)ID：Miaovclass

關(guān)注妙味訂閱號(hào)：“妙味前端”，為您帶來(lái)優(yōu)質(zhì)前端技術(shù)干貨；

總結(jié)

以上是生活随笔為你收集整理的前端常用插件、工具类库汇总（上）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。