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


    前言

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

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

  • 相关阅读:
    对象并不一定都是在堆上分配内存的
    Minor GC、Major GC和Full GC之间的区别
    JAVA内存分配与回收策略
    HotSpot虚拟机对象相关内容
    JAVA运行时数据区域
    Java 的强引用、弱引用、软引用、虚引用
    去哪儿网支付系统架构演进(下篇)
    去哪儿网支付系统架构演进(上)
    心智模式:如何改善我们的心智模式?
    心智模式:心智模式成熟的标志
  • 原文地址:https://www.cnblogs.com/Highdoudou/p/9945041.html
Copyright © 2020-2023  润新知