前言
在開發(fā)中儒旬，我們經(jīng)常會(huì)將一些常用的代碼塊栏账、功能塊進(jìn)行封裝，為的是更好的復(fù)用义矛。那么发笔，被抽離出來(lái)獨(dú)立完成功能，通過API或配置項(xiàng)和其他部分交互凉翻，便形成了插件。
下面這些是我在工作中積累的一些常用的前端開源插件捻激，這里只是羅列出來(lái)制轰，詳細(xì)的用法各個(gè)插件官網(wǎng)或者Gayhub都有介紹。注意：往往一個(gè)解決方案會(huì)有多個(gè)插件胞谭，需要讀者根據(jù)自己的實(shí)際業(yè)務(wù)需求進(jìn)行甄別選用垃杖，歡迎留言交流和補(bǔ)充。^_^
可以先加個(gè)收藏（Ctrl + D）丈屹，以后遇到類似的場(chǎng)景就來(lái)看看具體的插件及其用法调俘。
另外伶棒，不要重復(fù)造輪子，把精力放在業(yè)務(wù)邏輯上彩库！
函數(shù)庫(kù)
Lodash（推薦）：github.com/lodash/loda…
Underscore：underscorejs.org/
Ramda：github.com/ramda/ramda
outils：github.com/proYang/out…
30-seconds-of-code：github.com/Chalarangel…
動(dòng)畫庫(kù)
Animate.css
CSS3 動(dòng)畫庫(kù)肤无，也是目前最通用的動(dòng)畫庫(kù)。
daneden.github.io/animate.css…
Anime.js：
一個(gè)強(qiáng)大的骇钦、輕量級(jí)的用來(lái)制作動(dòng)畫的javascript庫(kù)
Hover.css：
CSS hover 懸停效果宛渐，可以應(yīng)用于鏈接、按鈕眯搭、圖片等等窥翩。
wow.js:
滾動(dòng)展示動(dòng)畫
WOW.js 依賴 animate.css，所以它支持 animate.css 多達(dá) 60 多種的動(dòng)畫效果鳞仙。
scrollReveal.js：
類似 wow.js
Magic.css：
css3 animation動(dòng)畫庫(kù)
Waves：
點(diǎn)擊波紋效果
move.js：
一個(gè)小型的JavaScript庫(kù)寇蚊，通過JS來(lái)控制一系列的CSS動(dòng)畫順序執(zhí)行，使CSS3動(dòng)畫變得非常簡(jiǎn)單和優(yōu)雅棍好。
Velocity.js：
一個(gè)功能齊全的 JavaScript 動(dòng)畫套件幔荒，包括諸如淡入淡出、滾動(dòng)梳玫、滾動(dòng)爹梁、停止、結(jié)束提澎、翻轉(zhuǎn)等動(dòng)畫效果姚垃。
滾動(dòng)庫(kù)
iscroll - 平滑滾動(dòng)插件：github.com/cubiq/iscro…
BetterScroll：
iscroll 的優(yōu)化版，使移動(dòng)端滑動(dòng)體驗(yàn)更加流暢
animatescroll：
jQuery滾動(dòng)到指定位置
plugins.compzets.com/animatescro…
crossfade.js：
jQuery圖片模糊插件crossfade.js
jQuery Scrollbox：
圖片文字滾動(dòng)插件
liMarquee：
jQuery無(wú)縫滾動(dòng)插件
輪播圖
Swiper：
常用于移動(dòng)端網(wǎng)站的內(nèi)容觸摸滑動(dòng)
iSlider：
移動(dòng)端滑動(dòng)組件
slip.js：
移動(dòng)端跟隨手指滑動(dòng)組件盼忌，零依賴积糯。
OwlCarousel2：owlcarousel2.github.io/OwlCarousel…
slick：www.jq22.com/jquery-info…
myFocus：www.cosmissy.com/myfocus/tut…
WebSlides：github.com/webslides/w…
jQuery輪播插件slider：www.jq22.com/jquery-info…
滾屏
fullpage：www.jq22.com/jquery-info…
彈出框
layer：
layui 獨(dú)立維護(hù)的三大組件之一（layDate、layer谦纱、layim）
盡管 layui 中包含了這些組件看成，但因?yàn)樗鼈兪鼙娙后w廣泛或應(yīng)用廣泛，特從 layui 中抽取出來(lái)個(gè)副本跨嘉，可獨(dú)立引用川慌。我們也會(huì)對(duì)它們進(jìn)行同步維護(hù)。
Bootbox.js：bootboxjs.com/
dialogBox：
基于 jQuery
easyDialog：www.h-ui.net/easydialog-…
消息通知
Notyf：
簡(jiǎn)單的響應(yīng)式純js消息通知插件
PNotify：
頁(yè)面右上角的提示信息（非彈框提示）
overhang.js：
overhang.js 是一個(gè)JQuery插件顯示即時(shí)通知祠乃、 確認(rèn)或給定元素中的提示梦重。
下拉框
select2：select2.org/
級(jí)聯(lián)選擇器
ustbhuangyi/picker
移動(dòng)端最好用的的篩選器組件、聯(lián)動(dòng)篩選
jQueryDistpicker：
fengyuanchen.github.io/distpicker/
顏色選擇器
Bootstrap Colorpicker 2：github.com/farbelous/b…
時(shí)間選擇器
layDate：www.layui.com/laydate/
wdatepicker
時(shí)間日期處理
Moment.js：
Moment.js 是一個(gè)解析亮瓷，驗(yàn)證琴拧，操作和顯示日期和時(shí)間的 JavaScript 類庫(kù)。
timeago.js：
輕量級(jí)的時(shí)間轉(zhuǎn)換 Javascript 庫(kù)
表單驗(yàn)證
validator.js：github.com/chriso/vali…
jQuery Validation
jQuery 表單校驗(yàn)
Validation Plugin：
jQuery插件
Validform：
一行代碼搞定整站的表單驗(yàn)證嘱支！- Jquery表單驗(yàn)證插件
分頁(yè)插件
pagination：github.com/superRaytin…
富文本編輯器
wangEditor：www.wangeditor.com/
百度UEditor：ueditor.baidu.com/website/
CKEditor：ckeditor.com/
KindEditor：kindeditor.net/demo.php
MediumEditor：yabwe.github.io/medium-edit…
Simditor：simditor.tower.im/
Summernote：summernote.org/
Markdown 編輯器
Editor.md：pandao.github.io/editor.md/
樹插件
圖片懶加載
lazyload：github.com/tuupola/jqu…
瀑布流
Masonry：www.cnblogs.com/cjc917/p/74…
Metro風(fēng)兼瀑布流布局效果http://www.lanrenzhijia.com/jquery/1985.html
相冊(cè)（圖片滑動(dòng)切換展示效果）
PC端：photoviewer
移動(dòng)端：PhotoSwipe：www.helloweba.net/javascript/…
導(dǎo)航插件
okayNav：www.dowebok.com/204.html
視頻播放器
Chimee
組件化H5播放器框架
flv.js
Bilibili開源純JavaScript編寫的FLV播放器
Flash 視頻（FLV）播放器
ckplayer：www.ckplayer.com/
jplayer：www.jplayer.cn/
html5player：juejin.im/post/596f53…
Video.js
開源蚓胸、免費(fèi)的HTML5和Flash視頻播放器
Video.js - 開源挣饥、免費(fèi)的HTML5和Flash視頻播放器
多青：dogeek.net/
彈幕視頻播放器
DanmuPlayer - Html5彈幕視頻播放器插件：github.com/chiruom/Dan…
jquery.danmu.js - jQuery彈幕插件：github.com/chiruom/jqu…
scroxt - 字幕字體滾動(dòng)插件：github.com/chenjianfan…
復(fù)制粘貼插件
clipboard.js：github.com/zenorocha/c…
ZeroClipboard：github.com/zeroclipboa…
條形碼插件
barcode
二維碼插件
jquery.qrcode.js：github.com/jeromeetien…
拖拽
Draggabilly：www.jq22.com/jquery-info…
dragula：www.toutiao.com/a6491847196…
手機(jī)端事件
touch.js
文件上傳
uploader
WebUploader：
HTML5 & FLASH 文件上傳
代碼高亮
hightlight：highlightjs.org/
前端國(guó)際化 i18n
i18next：github.com/i18next/i18…
vue-i18n：github.com/kazupon/vue…
前端系列——jquery.i18n.properties前端國(guó)際化解決方案“填坑日記”：www.cnblogs.com/landeanfen/…
基于jQuery.i18n.properties 實(shí)現(xiàn)前端頁(yè)面的資源國(guó)際化：m.blog.csdn.net/aixiaoyang1…
地圖
百度地圖：lbsyun.baidu.com/
谷歌地圖：www.runoob.com/googleapi/g…
高德地圖：lbs.amap.com/
騰訊地圖：lbs.qq.com/
網(wǎng)頁(yè)即時(shí)通訊
LayIM：layim.layui.com/
閑聊么：www.xianliao.me/
數(shù)據(jù)可視化
ECharts ：echarts.baidu.com/index.html
阿里云 DataV
PDF 閱讀器
主題色提取
RGBaster：github.com/briangonzal…
Color Thief
vibrant.js
前端存儲(chǔ)
ustbhuangyi/storage：
封裝了sessionStorage和localStorage
store.js
本地存儲(chǔ)localstorage的封裝
localForage：github.com/localForage…
數(shù)據(jù) Mock
Easy Mock：github.com/easy-mock/e…
Mockjs：
生成任意隨機(jī)數(shù)據(jù)，攔截 Ajax 請(qǐng)求
json-server + fakerjs：github.com/typicode/js…
