前端常用插件、工具类库汇总(上)

前言

在开发中,我们经常会将一些常用的代码块、功能块进行封装,为的是更好的复用。那么,被抽离出来独立完成功能,通过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/

  

分页插件

pagination:

https://github.com/superRaytin/paginationjs

  

以上有你需要的内容吗?

如果有,不要错过下期内容噢~~

本文内容未完待续...

作者:白小明

来源:

https://juejin.im/post/5ba7d5dd5188255c6140cc9d

往期文章推荐:

订阅号ID:Miaovclass

关注妙味订阅号:“妙味前端”,为您带来优质前端技术干货;

猜你喜欢

转载自www.cnblogs.com/Highdoudou/p/9945041.html