前端常用插件、工具类库汇总,不要重复造轮子啦!!!

前端 (53) 2023-03-24 17:35

大家好,我是编程小6,很高兴遇见你,有问题可以及时留言哦。

前言

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

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

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

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

前端常用插件、工具类库汇总,不要重复造轮子啦!!!_https://bianchenghao6.com/blog_前端_第1张

函数库

Lodash(推荐):github.com/lodash/loda…

Underscore:underscorejs.org/

Ramda:github.com/ramda/ramda

outils:github.com/proYang/out…

30-seconds-of-code:github.com/Chalarangel…

动画库

Animate.css

  • CSS3 动画库,也是目前最通用的动画库。
  • daneden.github.io/animate.css…

Anime.js:

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

Hover.css:

  • CSS hover 悬停效果,可以应用于链接、按钮、图片等等。
  • github.com/IanLunn/Hov…

wow.js:

  • 滚动展示动画
  • WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果。
  • github.com/matthieua/W…

scrollReveal.js:

  • 类似 wow.js
  • github.com/jlmakes/scr…

Magic.css:

  • css3 animation动画库
  • github.com/miniMAC/mag…

Waves:

  • 点击波纹效果
  • github.com/fians/Waves

move.js:

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

Velocity.js:

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

滚动库

iscroll - 平滑滚动插件:github.com/cubiq/iscro…

BetterScroll:

  • github.com/ustbhuangyi…
  • iscroll 的优化版,使移动端滑动体验更加流畅

mescroll:

  • 移动端上拉刷新下拉加载
  • www.mescroll.com/api.html

animatescroll:

  • jQuery滚动到指定位置
  • plugins.compzets.com/animatescro…

crossfade.js:

  • jQuery图片模糊插件crossfade.js
  • www.dowebok.com/104.html

jQuery Scrollbox:

  • 图片文字滚动插件
  • www.jq22.com/jquery-info…

liMarquee:

  • jQuery无缝滚动插件
  • www.dowebok.com/188.html

轮播图

Swiper:

  • 常用于移动端网站的内容触摸滑动
  • www.swiper.com.cn/

iSlider:

  • 移动端滑动组件
  • eux.baidu.com/iSlider/dem…

slip.js:

  • 移动端跟随手指滑动组件,零依赖。
  • github.com/binnng/slip…

OwlCarousel2:owlcarousel2.github.io/OwlCarousel…

slick:www.jq22.com/jquery-info…

myFocus:www.cosmissy.com/myfocus/tut…

WebSlides:github.com/webslides/w…

jQuery轮播插件slider:www.jq22.com/jquery-info…

滚屏

fullpage:www.jq22.com/jquery-info…

弹出框

layer:

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

Bootbox.js:bootboxjs.com/

dialogBox:

  • 基于 jQuery
  • www.jq22.com/jquery-info…

easyDialog:www.h-ui.net/easydialog-…

消息通知

Notyf:

  • 简单的响应式纯js消息通知插件
  • www.htmleaf.com/jQuery/Ligh…

PNotify:

  • 页面右上角的提示信息(非弹框提示)
  • sciactive.com/pnotify/
  • sciactive.github.io/pnotify/
  • github.com/sciactive/p…

overhang.js:

  • www.jq22.com/jquery-info…
  • overhang.js 是一个JQuery插件显示即时通知、 确认或给定元素中的提示。

下拉框

select2:select2.org/

级联选择器

ustbhuangyi/picker

  • github.com/ustbhuangyi…
  • 移动端最好用的的筛选器组件、联动筛选

jQueryDistpicker:

  • fengyuanchen.github.io/distpicker/
  • www.jq22.com/demo/jQuery…

颜色选择器

Bootstrap Colorpicker 2:github.com/farbelous/b…

时间选择器

layDate:www.layui.com/laydate/

wdatepicker

时间日期处理

Moment.js:

  • Moment.js 是一个解析,验证,操作和显示日期和时间的 JavaScript 类库。
  • momentjs.com
  • github.com/moment/mome…

timeago.js:

  • 轻量级的时间转换 Javascript 库
  • github.com/hustcc/time…

表单验证

validator.js:github.com/chriso/vali…

jQuery Validation

  • jQuery 表单校验
  • github.com/jquery-vali…

Validation Plugin:

  • jQuery插件
  • www.imooc.com/learn/385

Validform:

  • 一行代码搞定整站的表单验证!- Jquery表单验证插件
  • validform.rjboy.cn/

分页插件

pagination:github.com/superRaytin…

富文本编辑器

wangEditor:www.wangeditor.com/

百度UEditor:ueditor.baidu.com/website/

CKEditor:ckeditor.com/

KindEditor:kindeditor.net/demo.php

MediumEditor:yabwe.github.io/medium-edit…

Simditor:simditor.tower.im/

Summernote:summernote.org/

Quill:quilljs.com/

Slate:github.com/ianstormtay…

Markdown 编辑器

Editor.md:pandao.github.io/editor.md/

树插件

www.treejs.cn

图片懒加载

lazyload:github.com/tuupola/jqu…

瀑布流

Masonry:www.cnblogs.com/cjc917/p/74…

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

相册(图片滑动切换展示效果)

PC端:Viewer.js:fengyuanchen.github.io/viewerjs/

PC端:photoviewer

移动端:PhotoSwipe:www.helloweba.net/javascript/…

导航插件

okayNav:www.dowebok.com/204.html

视频播放器

Chimee

  • 组件化H5播放器框架
  • chimee.org/
  • 前端常用插件、工具类库汇总,不要重复造轮子啦!!!

flv.js

  • Bilibili开源纯JavaScript编写的FLV播放器
  • Flash 视频(FLV)播放器
  • github.com/Bilibili/fl…
  • www.toutiao.com/a6478550535…

ckplayer:www.ckplayer.com/

jplayer:www.jplayer.cn/

html5player:前端常用插件、工具类库汇总,不要重复造轮子啦!!!

Video.js

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

多青:dogeek.net/

弹幕视频播放器

DanmuPlayer - Html5弹幕视频播放器插件:github.com/chiruom/Dan…

jquery.danmu.js - jQuery弹幕插件:github.com/chiruom/jqu…

scroxt - 字幕字体滚动插件:github.com/chenjianfan…

复制粘贴插件

clipboard.js:github.com/zenorocha/c…

ZeroClipboard:github.com/zeroclipboa…

条形码插件

barcode

二维码插件

jquery.qrcode.js:github.com/jeromeetien…

拖拽

Draggabilly:www.jq22.com/jquery-info…

dragula:www.toutiao.com/a6491847196…

手机端事件

touch.js

文件上传

uploader

WebUploader:

  • github.com/fex-team/we…
  • HTML5 & FLASH 文件上传

代码高亮

hightlight:highlightjs.org/

前端国际化 i18n

i18next:github.com/i18next/i18…

vue-i18n:github.com/kazupon/vue…

前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”:www.cnblogs.com/landeanfen/…

基于jQuery.i18n.properties 实现前端页面的资源国际化:m.blog.csdn.net/aixiaoyang1…

地图

百度地图:lbsyun.baidu.com/

谷歌地图:www.runoob.com/googleapi/g…

高德地图:lbs.amap.com/

腾讯地图:lbs.qq.com/

网页即时通讯

LayIM:layim.layui.com/

闲聊么:www.xianliao.me/

数据可视化

ECharts :echarts.baidu.com/index.html

阿里云 DataV

PDF 阅读器

github.com/mozilla/pdf…

主题色提取

RGBaster:github.com/briangonzal…

Color Thief

vibrant.js

前端存储

ustbhuangyi/storage:

  • 封装了sessionStorage和localStorage
  • github.com/ustbhuangyi…

store.js

  • 本地存储localstorage的封装
  • github.com/jaywcjlove/…

localForage:github.com/localForage…

数据 Mock

Easy Mock:github.com/easy-mock/e…

Mockjs:

  • mockjs.com
  • 生成任意随机数据,拦截 Ajax 请求
前端常用插件、工具类库汇总,不要重复造轮子啦!!!_https://bianchenghao6.com/blog_前端_第2张

json-server + fakerjs:github.com/typicode/js…

分享

bShare

JiaThis(关闭了!!!)

QQ分享组件

百度分享

评论

Gitalk

gitment

畅言

来必力

友言(关闭了!!!)

网易云跟贴(关闭了!!!)

其他

IE浏览器版本过低提示插件IEalert.js:www.jqueryfuns.com/resource/45…

lyric-parser - QQ音乐歌词解析:github.com/ustbhuangyi…

holder.js - 图片占位符插件:github.com/imsky/holde…

jQuery放大镜插件jqzoom.js:www.jq22.com/jquery-info…

Zooming – JavaScript图片缩放库:www.dowebok.com/223.html

fastclick - 消除 click 移动浏览器300ms延迟:github.com/ftlabs/fast…

jsonp - 一个简单的JSONP实现:github.com/webmodules/…

js-base64 - Base64 编码解码:github.com/dankogai/js…

新手引导:github.com/easelinc/to…

发表回复