前言在开发中，我们经常会将一些常用的代码块、功能块进行封装，为的是更好的复用。那么，被抽离出来独立完成功能，通过API或配置项和其他部分交互，便形成了插件。
下面这些是我在工作中积累的一些常用的前端开源插件，这里只是罗列出来，详细的用法各个插件官网或者Gayhub都有介绍。注意：往往一个解决方案会有多个插件，需要读者根据自己的实际业务需求进行甄别选用，欢迎留言交流和补充。^_^
可以先加个收藏（Ctrl + D），以后遇到类似的场景就来看看具体的插件及其用法。
另外，不要重复造轮子，把精力放在业务逻辑上！


函数库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…
动画库Animate.css

• CSS3 动画库，也是目前最通用的动画库。
• daneden.github.io/animate.css…
  

Anime.js：

• 一个强大的、轻量级的用来制作动画的javascript库
• animejs.com/
  

Hover.css：

• CSS hover 悬停效果，可以应用于链接、按钮、图片等等。
• github.com/IanLunn/Hov…
  

wow.js:

• 滚动展示动画
• WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果。
• github.com/matthieua/W…
  

scrollReveal.js：

• 类似 wow.js
• github.com/jlmakes/scr…
  

Magic.css：

• css3 animation动画库
• github.com/miniMAC/mag…
  

Waves：

• 点击波纹效果
• github.com/fians/Waves
  

move.js：

• 一个小型的JavaScript库，通过JS来控制一系列的CSS动画顺序执行，使CSS3动画变得非常简单和优雅。
• github.com/visionmedia…
  

Velocity.js：

• 一个功能齐全的 JavaScript 动画套件，包括诸如淡入淡出、滚动、滚动、停止、结束、翻转等动画效果。
• github.com/julianshapi…
  

滚动库iscroll - 平滑滚动插件：github.com/cubiq/iscro…
BetterScroll：

• github.com/ustbhuangyi…
• iscroll 的优化版，使移动端滑动体验更加流畅
  

mescroll：

• 移动端上拉刷新下拉加载
• www.mescroll.com/api.html
  

animatescroll：

• jQuery滚动到指定位置
• plugins.compzets.com/animatescro…
  

crossfade.js：

• jQuery图片模糊插件crossfade.js
• www.dowebok.com/104.html
  

jQuery Scrollbox：

• 图片文字滚动插件
• www.jq22.com/jquery-info…
  

liMarquee：

• jQuery无缝滚动插件
• www.dowebok.com/188.html
  

轮播图Swiper：

• 常用于移动端网站的内容触摸滑动
• www.swiper.com.cn/
  

iSlider：

• 移动端滑动组件
• eux.baidu.com/iSlider/dem…
  

slip.js：

• 移动端跟随手指滑动组件，零依赖。
• github.com/binnng/slip…
  

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：

• layer.layui.com/
• layui 独立维护的三大组件之一（layDate、layer、layim）
• 尽管 layui 中包含了这些组件，但因为它们受众群体广泛或应用广泛，特从 layui 中抽取出来个副本，可独立引用。我们也会对它们进行同步维护。
  

Bootbox.js：bootboxjs.com/
dialogBox：

• 基于 jQuery
• www.jq22.com/jquery-info…
  

easyDialog：www.h-ui.net/easydialog-…
消息通知Notyf：

• 简单的响应式纯js消息通知插件
• www.htmleaf.com/jQuery/Ligh…
  

PNotify：

• 页面右上角的提示信息（非弹框提示）
• sciactive.com/pnotify/
• sciactive.github.io/pnotify/
• github.com/sciactive/p…
  

overhang.js：

• www.jq22.com/jquery-info…
• overhang.js 是一个JQuery插件显示即时通知、 确认或给定元素中的提示。
  

下拉框select2：select2.org/
级联选择器ustbhuangyi/picker

• github.com/ustbhuangyi…
• 移动端最好用的的筛选器组件、联动筛选
  

jQueryDistpicker：

• fengyuanchen.github.io/distpicker/
• www.jq22.com/demo/jQuery…
  

颜色选择器Bootstrap Colorpicker 2：github.com/farbelous/b…
时间选择器layDate：www.layui.com/laydate/
wdatepicker
时间日期处理Moment.js：

• Moment.js 是一个解析，验证，操作和显示日期和时间的 JavaScript 类库。
• momentjs.com
• github.com/moment/mome…
  

timeago.js：

• 轻量级的时间转换 Javascript 库
• github.com/hustcc/time…
  

表单验证validator.js：github.com/chriso/vali…
jQuery Validation

• jQuery 表单校验
• github.com/jquery-vali…
  

Validation Plugin：

• jQuery插件
• www.imooc.com/learn/385
  

Validform：

• 一行代码搞定整站的表单验证！- Jquery表单验证插件
• validform.rjboy.cn/
  

分页插件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/
Quill：quilljs.com/
Markdown 编辑器Editor.md：pandao.github.io/editor.md/
树插件www.treejs.cn
图片懒加载lazyload：github.com/tuupola/jqu…
瀑布流Masonry：www.cnblogs.com/cjc917/p/74…
Metro风兼瀑布流布局效果http://www.lanrenzhijia.com/jquery/1985.html
相册（图片滑动切换展示效果）PC端：Viewer.js：fengyuanchen.github.io/viewerjs/
PC端：photoviewer
移动端：PhotoSwipe：www.helloweba.net/javascript/…
导航插件okayNav：www.dowebok.com/204.html
视频播放器Chimee

• 组件化H5播放器框架
• chimee.org/
• juejin.im/entry/5a02b…
  

flv.js

• Bilibili开源纯JavaScript编写的FLV播放器
• Flash 视频（FLV）播放器
• github.com/Bilibili/fl…
• www.toutiao.com/a6478550535…
  

ckplayer：www.ckplayer.com/
jplayer：www.jplayer.cn/
html5player：juejin.im/post/596f53…
Video.js

• 开源、免费的HTML5和Flash视频播放器
• Video.js - 开源、免费的HTML5和Flash视频播放器
  

多青：dogeek.net/
弹幕视频播放器DanmuPlayer - Html5弹幕视频播放器插件：github.com/chiruom/Dan…
jquery.danmu.js - jQuery弹幕插件：github.com/chiruom/jqu…
scroxt - 字幕字体滚动插件：github.com/chenjianfan…
复制粘贴插件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…
手机端事件touch.js
文件上传uploader
WebUploader：

• github.com/fex-team/we…
• HTML5 & FLASH 文件上传
  

代码高亮hightlight：highlightjs.org/
前端国际化 i18ni18next：github.com/i18next/i18…
vue-i18n：github.com/kazupon/vue…
前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”：www.cnblogs.com/landeanfen/…
基于jQuery.i18n.properties 实现前端页面的资源国际化：m.blog.csdn.net/aixiaoyang1…
地图百度地图：lbsyun.baidu.com/
谷歌地图：www.runoob.com/googleapi/g…
高德地图：lbs.amap.com/
腾讯地图：lbs.qq.com/
网页即时通讯LayIM：layim.layui.com/
闲聊么：www.xianliao.me/
数据可视化ECharts ：echarts.baidu.com/index.html
阿里云 DataV
PDF 阅读器github.com/mozilla/pdf…
主题色提取RGBaster：github.com/briangonzal…
Color Thief
vibrant.js
前端存储ustbhuangyi/storage：

• 封装了sessionStorage和localStorage
• github.com/ustbhuangyi…
  

store.js

• 本地存储localstorage的封装
• github.com/jaywcjlove/…
  

localForage：github.com/localForage…
数据 MockEasy Mock：github.com/easy-mock/e…
Mockjs：

• mockjs.com
• 生成任意随机数据，拦截 Ajax 请求
  

json-server + fakerjs：github.com/typicode/js…
分享bShare
JiaThis（关闭了！！！）
QQ分享组件
百度分享
评论Gitalk
gitment
畅言
来必力
友言（关闭了！！！）
网易云跟贴（关闭了！！！）
其他IE浏览器版本过低提示插件IEalert.js：www.jqueryfuns.com/resource/45…
lyric-parser - QQ音乐歌词解析：github.com/ustbhuangyi…
holder.js - 图片占位符插件：github.com/imsky/holde…
jQuery放大镜插件jqzoom.js：www.jq22.com/jquery-info…
Zooming – JavaScript图片缩放库：www.dowebok.com/223.html
fastclick - 消除 click 移动浏览器300ms延迟：github.com/ftlabs/fast…
jsonp - 一个简单的JSONP实现：github.com/webmodules/…
js-base64 - Base64 编码解码：github.com/dankogai/js…
新手引导：github.com/easelinc/to…


链接：https://juejin.im/post/5ba7d5dd5188255c6140cc9d

奈斯