前端常用插件utils汇总
发布于 2020-03-06
工具库 || 数据处理
underscore - JavaScript的实用程序带库
lodash - 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
表单验证
---jquery
jquery-validation - 您现有的表单提供了插入式验证,同时使各种自定义适合您的应用程序变得非常容易
图片懒加载
---JavaScript
lazyload - LazyLoad是一种快速,轻巧和灵活的脚本,通过仅在内容图像,视频和iframe进入视口时加载它们来加快Web应用程序的速度
---vue
vue-lazyload - 一个Vue.js插件,用于将图像或组件延迟加载到应用程序中。
---react
react-lazyload - 延迟加载组件,图像或任何与性能有关的内容
图片预览
类似朋友圈
PhotoSwipe- 适用于移动和pc,模块化,框架独立的JavaScript图像库
满足聊天递增图片的需求
fancybox - jQuery lightbox脚本,用于显示图像,视频等。触摸启用,响应迅速且可完全自定义
---vue
vue-picture-preview - 移动端、PC 端 Vue.js 图片预览插件
文件上传
---JavaScript
Web Uploader - 以HTML5为主的现代文件上传组件(百度)
jQuery-File-Upload - 具有多个文件选择,拖放支持,进度条,验证和预览图像,jQuery的音频和视频。
---vue
vue-dropzone - Dropzone.js的Vue.js组件-带有图像预览的拖放文件上传实用程序
单选框/复选框相关
---jquery
选择框
Choices - 轻量级库,用于制作高度可自定义的选择框、文本区域和其他输入表单。类似于select2和selectize,但没有依赖jquery。
Select2 - 基于jQuery的选择框的替代品。它支持搜索,远程数据集和结果的无限滚动。
bootstrap-select - jQuery插件通过直观的多选,搜索等功能将选择元素带入21世纪
tree树形
---jquery
Bootstrap Tree View - Tree View for Twitter Bootstrap
zTree - 一个依靠 jQuery 实现的多功能 “树插件”
无限滚动
---vue
vue-infinite-scroll - vue.js的无限滚动指令
列表拖拽
Sortable - 是一个JavaScript库,用于在现代浏览器和触摸设备上对拖放列表进行重新排序
---vue
Vue.Draggable - 基于Sortable.js的Vue拖放组件
---react
react-sortablejs - 在成熟的拖放库Sortable之上构建的React组件
元素拖曳
自定义滚动条
perfect-scrollbar - 简约但完美的自定义滚动条插件
进度条
nprogress - 对于细长的进度条,例如YouTube,Medium等上的进度条
---github类似页面进度条
cookie管理
js-cookie - 一个简单,轻巧的JavaScript API,用于处理浏览器cookie
WebSocket
ws - 简单易用,为Node.js开创了经过快速且经过全面测试的WebSocket客户端和服务器
---vue
Vue-Socket.io - Vuejs和Vuex的Socket.io实现
JavaScript 动画效果库
Vue官网推荐
Velocity - 是一个简单易用、高性能、功能丰富的轻量级JS动画库
tween.js - JavaScript补间引擎可简化动画
额外效果
轮播效果
swiper5 - 纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端
iSlider - 适用于Mobile WebApp,HTML5 App,Hybrid App的平滑移动触摸滑块
---vue
vue-awesome-swiper - 基于Swiper4,适用于Vue的轮播组件
瀑布流展示
scrollreveal - 在元素滚动到视图时对其进行动画处理
scrollreveal 的演示地址
pc桌面级通知
push.js - 世界上最通用的桌面通知框架
响应式媒体查询
react中antd框架grid组件使用
操作引导js工具
Intro.js - 为您的网站和项目提供新功能介绍和逐步用户指南的更好方法
编辑器工具
UEditor - 由百度web前端研发部开发所见即所得富文本web编辑器
Markdown编辑器
SimpleMDE-Markdown - 一个简单,美观,可嵌入的JavaScript Markdown编辑器
---想掘金一样的markdown解析器(双栏)
视频
flv.js - 用纯JavaScript编写的HTML5 Flash Video(FLV)播放器(bilibili)
video.js - Video.js是专为HTML5世界打造的网络视频播放器。它支持HTML5和Flash视频
日期选择 || 日历
Pikaday - 令人耳目一新的JavaScript Datepicker —轻巧,没有依赖关系,模块化CSS
bootstrap-datepicker - Twitter引导程序(@twbs)的 日期选择器
时间选择
有vue的版本,也支持日期选择
Flatpickr - 轻巧,功能强大的javascript datetimepicker,无依赖项
时间处理
Moment.js - 在JavaScript中解析,验证,操作和显示日期和时间。
模拟数据
代码注释
触摸方面 || 手势
hammer.js - 一个用于多点触摸手势的javascript库
better-scroll - 受iscroll的启发,它支持更多功能并具有更好的滚动性能
loading加载动画
loaders.css - 令人愉悦且注重性能的纯CSS加载动画
css-spinners - 使用CSS和最少的HTML标记制作的简单CSS旋转器和控件
通知组件
notie - 干净,简单的javascript通知,输入和选择套件,没有依赖项
全屏滚动
pagePiling.js - Alvaro Trigo的pagePiling插件。创建滚动显示的部分
---vue
Vue-fullpage.js - fullPage.js的官方Vue.js包装器
模板引擎
sodajs - 腾讯重量轻但功能强大的JavaScript模板引擎
list || table组件
vue-easytable - vue table 组件,支持 单元格合并、单元格编辑、多表头固定、多列固定、列拖动、排序、自定义列、条件过滤、分页
list.js - 完美的库,可为表,列表和各种HTML元素添加搜索,排序,过滤器和灵活性
浏览器属性
excel处理
exceljs - 读取,操作并将电子表格数据和样式写入XLSX和JSON。
网格布局库
FFmpeg(c模块 视频帧预览)
地图
Leaflet - 适用于移动设备的交互式地图的JavaScript库
表情包扩展
twemoji - 一个简单的库,可在所有平台上提供标准Unicode 表情符号支持。
浏览器测试
cypress - 对浏览器中运行的所有内容进行快速,轻松和可靠的测试
浏览器代码编辑器
[]monaco-editor - 基于浏览器的代码编辑器](https://github.com/microsoft/...)
滑动拼图验证
vue-puzzle-verification
vue-puzzle-vcode
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。