本文共 3166 字，大约阅读时间需要 10 分钟。

前言

在开发中，我们经常会将一些常用的代码块、功能块进行封装，为的是更好的复用。那么，被抽离出来独立完成功能，通过API或配置项和其他部分交互，便形成了插件。

下面这些是我在工作中积累的一些常用的前端开源插件，这里只是罗列出来，详细的用法各个插件官网或者Gayhub都有介绍。注意：往往一个解决方案会有多个插件，需要读者根据自己的实际业务需求进行甄别选用，欢迎留言交流和补充。^_^

可以先加个收藏（Ctrl + D），以后遇到类似的场景就来看看具体的插件及其用法。

另外，不要重复造轮子，把精力放在业务逻辑上！

 

 

 

函数库

Lodash（推荐）：

Underscore：

Ramda：

outils：

30-seconds-of-code：

动画库

Animate.css

• CSS3 动画库，也是目前最通用的动画库。

Anime.js：

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

Hover.css：

• CSS hover 悬停效果，可以应用于链接、按钮、图片等等。

wow.js:

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

scrollReveal.js：

• 类似 wow.js

Magic.css：

• css3 animation动画库

Waves：

• 点击波纹效果

move.js：

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

Velocity.js：

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

滚动库

iscroll - 平滑滚动插件：

BetterScroll：

• iscroll 的优化版，使移动端滑动体验更加流畅

animatescroll：

• jQuery滚动到指定位置

crossfade.js：

• jQuery图片模糊插件crossfade.js

jQuery Scrollbox：

• 图片文字滚动插件

liMarquee：

• jQuery无缝滚动插件

轮播图

Swiper：

• 常用于移动端网站的内容触摸滑动

iSlider：

• 移动端滑动组件

slip.js：

• 移动端跟随手指滑动组件，零依赖。

OwlCarousel2：

slick：

myFocus：

WebSlides：

jQuery轮播插件slider：

滚屏

fullpage：

弹出框

layer：

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

Bootbox.js：

dialogBox：

• 基于 jQuery

easyDialog：

消息通知

Notyf：

• 简单的响应式纯js消息通知插件

PNotify：

• 页面右上角的提示信息（非弹框提示）

overhang.js：

• overhang.js 是一个JQuery插件显示即时通知、 确认或给定元素中的提示。

下拉框

select2：

级联选择器

ustbhuangyi/picker

• 移动端最好用的的筛选器组件、联动筛选

jQueryDistpicker：

颜色选择器

Bootstrap Colorpicker 2：

时间选择器

layDate：

wdatepicker

时间日期处理

Moment.js：

• Moment.js 是一个解析，验证，操作和显示日期和时间的 JavaScript 类库。

timeago.js：

• 轻量级的时间转换 Javascript 库

表单验证

validator.js：

jQuery Validation

• jQuery 表单校验

Validation Plugin：

• jQuery插件

Validform：

• 一行代码搞定整站的表单验证！- Jquery表单验证插件

分页插件

pagination：

富文本编辑器

wangEditor：

百度UEditor：

CKEditor：

KindEditor：

MediumEditor：

Simditor：

Summernote：

Markdown 编辑器

：

树插件

图片懒加载

lazyload：

瀑布流

Masonry：

Metro风兼瀑布流布局效果http://www.lanrenzhijia.com/jquery/1985.html

相册（图片滑动切换展示效果）

PC端：photoviewer

移动端：PhotoSwipe：

导航插件

okayNav：

视频播放器

Chimee

• 组件化H5播放器框架

flv.js

• Bilibili开源纯JavaScript编写的FLV播放器
• Flash 视频（FLV）播放器

ckplayer：

jplayer：

html5player：

Video.js

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

多青：

弹幕视频播放器

DanmuPlayer - Html5弹幕视频播放器插件：

jquery.danmu.js - jQuery弹幕插件：

scroxt - 字幕字体滚动插件：

复制粘贴插件

clipboard.js：

ZeroClipboard：

条形码插件

barcode

二维码插件

jquery.qrcode.js：

拖拽

Draggabilly：

dragula：

手机端事件

touch.js

文件上传

uploader

WebUploader：

• HTML5 & FLASH 文件上传

代码高亮

hightlight：

前端国际化 i18n

i18next：

vue-i18n：

前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”：

基于jQuery.i18n.properties 实现前端页面的资源国际化：

地图

百度地图：

谷歌地图：

高德地图：

腾讯地图：

网页即时通讯

LayIM：

闲聊么：

数据可视化

ECharts ：

阿里云 DataV

PDF 阅读器

主题色提取

RGBaster：

Color Thief

vibrant.js

前端存储

ustbhuangyi/storage：

• 封装了sessionStorage和localStorage

store.js

• 本地存储localstorage的封装

localForage：

数据 Mock

Easy Mock：

Mockjs：

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

 

 

 

json-server + fakerjs：

分享

bShare

JiaThis

QQ分享组件

百度分享

评论

Gitalk

gitment

畅言

来必力

友言

网易云跟贴（关闭了！！！）

其他

IE浏览器版本过低提示插件IEalert.js：

lyric-parser - QQ音乐歌词解析：

holder.js - 图片占位符插件：

jQuery放大镜插件jqzoom.js：

Zooming – JavaScript图片缩放库：

fastclick - 消除 click 移动浏览器300ms延迟：

jsonp - 一个简单的JSONP实现：

js-base64 - Base64 编码解码：

新手引导：

作者：白小明 链接：https://juejin.im/post/5ba7d5dd5188255c6140cc9d 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。