前端常用插件、工具类库汇总（上）

最新推荐文章于 2025-06-22 00:23:35 发布

ailusummer

最新推荐文章于 2025-06-22 00:23:35 发布

阅读量1w

点赞数 9

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ailusummer/article/details/83988946

在这里插入图片描述

前言

在开发中，我们经常会将一些常用的代码块、功能块进行封装，为的是更好的复用。那么，被抽离出来独立完成功能，通过API或配置项和其他部分交互，便形成了插件。
下面这些是我在工作中积累的一些常用的前端开源插件，这里只是罗列出来，详细的用法各个插件官网或者Gayhub都有介绍。注意：往往一个解决方案会有多个插件，需要读者根据自己的实际业务需求进行甄别选用，欢迎留言交流和补充。
在这里插入图片描述
函数库

Lodash https://github.com/lodash/lodash Underscore
https://underscorejs.org/ Ramda https://github.com/ramda/ramda outils
https://github.com/proYang/outils

动画库

Animate.css：CSS3 动画库，也是目前最通用的动画库。
https://daneden.github.io/animate.css/
Anime.js：一个强大的、轻量级的用来制作动画的javascript库 http://animejs.com/
Hover.css：CSS hover 悬停效果，可以应用于链接、按钮、图片等等。
https://github.com/IanLunn/Hover wow.js：滚动展示动画，WOW.js 依赖
animate.css，所以它支持 animate.css 多达 60 多种的动画效果。
https://github.com/matthieua/WOW Magic.css：css3 animation动画库
https://github.com/miniMAC/magic Waves：点击波纹效果
https://github.com/fians/Waves
move.js：一个小型的JavaScript库，通过JS来控制一系列的CSS动画顺序执行，使CSS3动画变得非常简单和优雅。
https://github.com/visionmedia/move.js

滚动库

iscroll - 平滑滚动插件 https://github.com/cubiq/iscroll BetterScroll：iscroll
的优化版，使移动端滑动体验更加流畅 https://github.com/ustbhuangyi/better-scroll
mescroll：移动端上拉刷新下拉加载 http://www.mescroll.com/api.html jQuery
Scrollbox：图片文字滚动插件 http://www.jq22.com/jquery-info1890
liMarquee：jQuery无缝滚动插件 http://www.dowebok.com/188.html

轮播图

Swiper：常用于移动端网站的内容触摸滑动 https://www.swiper.com.cn/ iSlider：移动端滑动组件
http://eux.baidu.com/iSlider/demo/index_chinese.html
slip.js：移动端跟随手指滑动组件，零依赖。 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

滚屏

fullpage： http://www.jq22.com/jquery-info1124

弹出框

layer：独立维护的三大组件之一（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

消息通知

Notyf：简单的响应式纯js消息通知插件
http://www.htmleaf.com/jQuery/Lightbox-Dialog/201609123990.html
PNotify：页面右上角的提示信息（非弹框提示） https://github.com/sciactive/pnotify
https://sciactive.com/pnotify/ overhang.js：是一个JQuery插件显示即时通知、
确认或给定元素中的提示。 http://www.jq22.com/jquery-info9193

下拉框

select2 https://select2.org/

级联选择器

ustbhuangyi/picker：移动端最好用的的筛选器组件、联动筛选
https://github.com/ustbhuangyi/picker
jQueryDistpicker：移动端最好用的的筛选器组件、联动筛选
http://fengyuanchen.github.io/distpicker/
http://www.jq22.com/demo/jQueryDistpicker20160621/

颜色选择器

Bootstrap Colorpicker 2
https://github.com/farbelous/bootstrap-colorpicker

时间选择器

layDate： https://www.layui.com/laydate/

时间日期处理

Moment.js：是一个解析，验证，操作和显示日期和时间的 JavaScript 类库。 http://momentjs.com/
https://github.com/moment/moment timeago.js：轻量级的时间转换 Javascript 库
https://github.com/hustcc/timeago.js

表单验证

validator.js： https://github.com/chriso/validator.js jQuery
Validation：jQuery 表单校验
https://github.com/jquery-validation/jquery-validation
Validform：一行代码搞定整站的表单验证！- Jquery表单验证插件 http://validform.rjboy.cn/

分页插件