前言
在开发中，我们经常会将一些常用的代码块、功能块进行封装，为的是更好的复用。那么，被抽离出来独立完成功能，通过API或配置项和其他部分交互，便形成了插件。
下面这些是我在工作中积累的一些常用的前端开源插件，这里只是罗列出来，详细的用法各个插件官网或者Gayhub都有介绍。注意：往往一个解决方案会有多个插件，需要读者根据自己的实际业务需求进行甄别选用，欢迎留言交流和补充。^_^
可以先加个收藏（Ctrl + D），以后遇到类似的场景就来看看具体的插件及其用法。
另外，不要重复造轮子，把精力放在业务逻辑上！
函数库
Lodash（推荐）：
lodash/lodash
Underscore：
Underscore.js
Ramda：
ramda/ramda
outils：
proYang/outils
30-seconds-of-code：
30-seconds/30-seconds-of-code
动画库
Animate.css
CSS3 动画库，也是目前最通用的动画库。
Animate.css
Anime.js：
一个强大的、轻量级的用来制作动画的javascript库
anime.js
Hover.css：
CSS hover 悬停效果，可以应用于链接、按钮、图片等等。
IanLunn/Hover
wow.js:
滚动展示动画
WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果。
matthieua/WOW
scrollReveal.js：
类似 wow.js
scrollreveal/scrollreveal
Magic.css：
css3 animation动画库
miniMAC/magic
Waves：
点击波纹效果
fians/Waves
move.js：
一个小型的JavaScript库，通过JS来控制一系列的CSS动画顺序执行，使CSS3动画变得非常简单和优雅。
https://github.com/visionmedia/move.js
Velocity.js：
一个功能齐全的 JavaScript 动画套件，包括诸如淡入淡出、滚动、滚动、停止、结束、翻转等动画效果。
julianshapiro/velocity
滚动库
iscroll - 平滑滚动插件：
cubiq/iscroll
BetterScroll：
ustbhuangyi/better-scroll
iscroll 的优化版，使移动端滑动体验更加流畅
mescroll：
移动端上拉刷新下拉加载
mescroll -- 精致的下拉刷新和上拉加载js框架
animatescroll：
jQuery滚动到指定位置
AnimateScroll - jQuery Plugin
crossfade.js：
jQuery图片模糊插件crossfade.js
jQuery图片模糊插件crossfade.js_dowebok
jQuery Scrollbox：
图片文字滚动插件
http://www.jq22.com/jquery-info1890
liMarquee：
jQuery无缝滚动插件
liMarquee - jQuery无缝滚动插件
轮播图
Swiper：
常用于移动端网站的内容触摸滑动
Swiper中文网
iSlider：
移动端滑动组件
iSlider by BE-FE
slip.js：
移动端跟随手指滑动组件，零依赖。
https://github.com/binnng/slip.js
OwlCarousel2：
Home | Owl Carousel | 2.3.4
slick
http://www.jq22.com/jquery-info406
myFocus：
http://www.cosmissy.com/myfocus/tutorials.html
WebSlides
webslides/WebSlides
jQuery轮播插件slider：
jQuery轮播插件slider
滚屏
fullpage：
http://www.jq22.com/jquery-info1124
弹出框
layer：
layer官方演示与讲解（jQuery弹出层插件）
layui 独立维护的三大组件之一（layDate、layer、layim）
尽管 layui 中包含了这些组件，但因为它们受众群体广泛或应用广泛，特从 layui 中抽取出来个副本，可独立引用。我们也会对它们进行同步维护。
Bootbox.js：alert, confirm and flexible dialogs for the Bootstrap framework
dialogBox：
基于 jQuery
http://www.jq22.com/jquery-info4822
easyDialog：easyDialog v2.0 演示与说明
消息通知
Notyf：
简单的响应式纯js消息通知插件
简单的响应式纯js消息通知插件_jQuery之家-自由分享jQuery、html5、css3的插件库
PNotify：
页面右上角的提示信息（非弹框提示）
PNotify
PNotify
sciactive/pnotify
overhang.js：
http://www.jq22.com/jquery-info9193
overhang.js 是一个JQuery插件显示即时通知、 确认或给定元素中的提示。
下拉框
select2：Select2 - The jQuery replacement for select boxes
级联选择器
ustbhuangyi/picker
ustbhuangyi/picker
移动端最好用的的筛选器组件、联动筛选
jQueryDistpicker：
Distpicker
http://www.jq22.com/demo/jQueryDistpicker20160621/
颜色选择器
Bootstrap Colorpicker 2
itsjavi/bootstrap-colorpicker
时间选择器
layDate：layDate - JS日期与时间组件/插件官方演示与讲解
wdatepicker
时间日期处理
Moment.js：
Moment.js 是一个解析，验证，操作和显示日期和时间的 JavaScript 类库。
Moment.js | Home
moment/moment
timeago.js：
轻量级的时间转换 Javascript 库
https://github.com/hustcc/timeago.js
表单验证
validator.js
https://github.com/chriso/validator.js
jQuery Validation
jQuery 表单校验
jquery-validation/jquery-validation
Validation Plugin：
jQuery插件
jQuery插件-Validation Plugin-慕课网
Validform：
一行代码搞定整站的表单验证！- Jquery表单验证插件
http://validform.rjboy.cn/
分页插件
pagination
superRaytin/paginationjs
富文本编辑器
wangEditor
wangEditor - 轻量级web富文本编辑器
百度UEditor
UEditor - 首页
CKEditor
CKEditor | Smart WYSIWYG HTML editor | Collaborative rich text editor
KindEditor
在线HTML编辑器
MediumEditor
MediumEditor
Simditor
Simditor
Summernote
Summernote - Super Simple WYSIWYG editor
Quill
Quill - Your powerful rich text editor
Slate
ianstormtaylor/slate
Markdown 编辑器
Editor.md
Editor.md - 开源在线 Markdown 编辑器
树插件
zTree -- jQuery tree plug-ins.
图片懒加载
lazyload
tuupola/lazyload
瀑布流
Masonry：
Masonry--“瀑布流” 布局（图片较多，推荐在WIFI下查看）
Metro风兼瀑布流布局效果
Metro风兼瀑布流布局效果 - 懒人之家
相册（图片滑动切换展示效果）
PC端：Viewer.js
Viewer.js
PC端：photoviewer
移动端：PhotoSwipe
兼容移动端和PC端的图片滑动切换展示效果：PhotoSwipe_Helloweba
导航插件
okayNav
okayNav - jQuery响应式菜单/导航插件
视频播放器
Chimee
组件化H5播放器框架
Chimee - 可扩展的组件化H5播放器框架
让我为你介绍一个神器：Chimee，一套可扩展的 H5 视频播放器解决方案
flv.js
Bilibili开源纯JavaScript编写的FLV播放器
Flash 视频（FLV）播放器
https://github.com/Bilibili/flv.js
前端开发：Bilibili开源纯JavaScript编写的FLV播放器（flv.js）
ckplayer
ckplayer-超酷网页视频播放器
jplayer
共享IP
html5player
从零实现一个自定义 HTML5 播放器
Video.js
开源、免费的HTML5和Flash视频播放器
Video.js - 开源、免费的HTML5和Flash视频播放器
多青
专为企业打造视频技术和人工智能服务 - 多青
弹幕视频播放器
DanmuPlayer - Html5弹幕视频播放器插件：
chiruom/DanmuPlayer
jquery.danmu.js - jQuery弹幕插件
https://github.com/chiruom/jquery.danmu.js
scroxt - 字幕字体滚动插件
chenjianfang/scroxt
复制粘贴插件
clipboard.js
zenorocha/clipboard.js
ZeroClipboard
zeroclipboard/zeroclipboard
条形码插件
barcode
二维码插件
jquery.qrcode.js
jeromeetienne/jquery-qrcode
拖拽
Draggabilly
jQuery拖拽插件Draggabilly
dragula
前端开发：一个超级简单、好用的拖放功能插件（dragula）
手机端事件
touch.js
文件上传
uploader
WebUploader：
fex-team/webuploader
HTML5 & FLASH 文件上传
代码高亮
hightlight
highlight.js
前端国际化 i18n
i18next
i18next/i18next
vue-i18n
kazupon/vue-i18n
前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”：
前端系列--jquery.i18n.properties前端国际化解决方案“填坑日记” - 懒得安分 - 博客园
基于jQuery.i18n.properties 实现前端页面的资源国际化：
http://m.blog.csdn.net/aixiaoyang168/article/details/49336709
地图
百度地图
百度地图开放平台 | 百度地图API SDK | 地图开发
谷歌地图
Google 地图 API | 菜鸟教程
高德地图
高德开放平台 | 高德地图API
腾讯地图
腾讯位置服务 - 立足生态，连接未来
网页即时通讯
LayIM
LayIM - 打造属于你自己的网页聊天系统
闲聊么
闲聊么【社交+盈利=每个网站的成功】
数据可视化
ECharts
http://echarts.baidu.com/index.html
阿里云 DataV
PDF 阅读器
https://github.com/mozilla/pdf.js
主题色提取
RGBaster
https://github.com/briangonzalez/rgbaster.js
Color Thief
vibrant.js
前端存储
ustbhuangyi/storage：
封装了sessionStorage和localStorage
ustbhuangyi/storage
store.js
本地存储localstorage的封装
https://github.com/jaywcjlove/store.js
localForage
localForage/localForage
数据 Mock
Easy Mock
easy-mock/easy-mock
Mockjs：
Mock.js
生成任意随机数据，拦截 Ajax 请求
json-server + fakerjs
typicode/json-server
分享
bShare
JiaThis（关闭了！！！）
QQ分享组件
百度分享
评论
Gitalk
gitment
畅言
来必力
友言（关闭了！！！）
网易云跟贴（关闭了！！！）
其他
IE浏览器版本过低提示插件IEalert.js
IE浏览器版本过低提示插件IEalert.js
lyric-parser - QQ音乐歌词解析
ustbhuangyi/lyric-parser
holder.js - 图片占位符插件
imsky/holder
jQuery放大镜插件jqzoom.js
http://www.jq22.com/jquery-info648
Zooming – JavaScript图片缩放库
Zooming - JavaScript图片缩放库
fastclick - 消除 click 移动浏览器300ms延迟
ftlabs/fastclick
jsonp - 一个简单的JSONP实现
webmodules/jsonp
js-base64 - Base64 编码解码
dankogai/js-base64
新手引导
easelinc/tourist4
作者丨白小明
来源丨https://juejin.im/post/5ba7d5dd5188255c6140cc9d
扫一扫
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
