前端经常使用插件utils汇总

前端经常使用插件utils汇总

javascript前端csshtml html5

发布于 2020-03-06

工具库 || 数据处理

underscore - JavaScript的实用程序带库

lodash - 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

表单验证

async-validator – 验证表单异步

---jquery

jquery-validation - 您现有的表单提供了插入式验证，同时使各类自定义适合您的应用程序变得很是容易

图片懒加载

---JavaScript

lazyload - 用于延迟加载图像

lazyload - LazyLoad是一种快速，轻巧和灵活的脚本，经过仅在内容图像，视频和iframe进入视口时加载它们来加快Web应用程序的速度

---vue

vue-lazyload - 一个Vue.js插件，用于将图像或组件延迟加载到应用程序中。

---react

react-lazyload - 延迟加载组件，图像或任何与性能有关的内容

图片预览

相似朋友圈

PhotoSwipe- 适用于移动和pc，模块化，框架独立的JavaScript图像库

知足聊天递增图片的需求

viewerjs - JavaScript图像查看器

fancybox - jQuery lightbox脚本，用于显示图像，视频等。触摸启用，响应迅速且可彻底自定义

---vue

vue-picture-preview - 移动端、PC 端 Vue.js 图片预览插件

文件上传

---JavaScript

DropzoneJS - 提供带有图像预览的拖放文件上传

Web Uploader - 以HTML5为主的现代文件上传组件(百度)

jQuery-File-Upload - 具备多个文件选择，拖放支持，进度条，验证和预览图像，jQuery的音频和视频。

---vue

vue-dropzone - Dropzone.js的Vue.js组件-带有图像预览的拖放文件上传实用程序

单选框/复选框相关

---jquery

iCheck – 加强复选框和单选按钮

选择框

Choices - 轻量级库，用于制做高度可自定义的选择框、文本区域和其余输入表单。相似于select2和selectize，但没有依赖jquery。

Chosen - 一个使较长的笨拙的选择框更友好的库。

Select2 - 基于jQuery的选择框的替代品。它支持搜索，远程数据集和结果的无限滚动。

bootstrap-select - jQuery插件经过直观的多选，搜索等功能将选择元素带入21世纪

tree树形

---jquery

Bootstrap Tree View - Tree View for Twitter Bootstrap

zTree - 一个依靠 jQuery 实现的多功能 “树插件”

无限滚动

Infinite Scroll - 自动添加下一页

---vue

vue-infinite-scroll - vue.js的无限滚动指令

列表拖拽

Sortable - 是一个JavaScript库，用于在现代浏览器和触摸设备上对拖放列表进行从新排序

MDN拖拽文档

---vue

Vue.Draggable - 基于Sortable.js的Vue拖放组件

---react

react-sortablejs - 在成熟的拖放库Sortable之上构建的React组件

元素拖曳

draggabilly - 使该shiz可拖动

自定义滚动条

jScrollPane-跨浏览器自定义滚动条

perfect-scrollbar - 简约但完美的自定义滚动条插件

进度条

nprogress - 对于细长的进度条，例如YouTube，Medium等上的进度条

---github相似页面进度条

vue-progressbar - vue的轻量级进度条

cookie管理

js-cookie - 一个简单，轻巧的JavaScript API，用于处理浏览器cookie

WebSocket

ws - 简单易用，为Node.js开创了通过快速且通过全面测试的WebSocket客户端和服务器

socket.io - 实时应用程序框架

---vue

Vue-Socket.io - Vuejs和Vuex的Socket.io实现

JavaScript 动画效果库

Vue官网推荐

Velocity - 是一个简单易用、高性能、功能丰富的轻量级JS动画库

Animate.css - 一款强大的预设css3动画库

tween.js - JavaScript补间引擎可简化动画

额外效果

transformjs - 腾讯使CSS3转换超级容易

scenejs

midnight.js - 文字颜色随着背景变

vue-countTo - 在指定的持续时间内计入目标数量

CSS shake - 抖动动画

轮播效果

swiper5 - 纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端

iSlider - 适用于Mobile WebApp，HTML5 App，Hybrid App的平滑移动触摸滑块

---vue

vue-awesome-swiper - 基于Swiper4，适用于Vue的轮播组件

瀑布流展现

scrollreveal - 在元素滚动到视图时对其进行动画处理

scrollreveal 的演示地址

pc桌面级通知

push.js - 世界上最通用的桌面通知框架

响应式媒体查询

react中antd框架grid组件使用

enquire.js - JavaScript中的媒体查询

操做引导js工具

Intro.js - 为您的网站和项目提供新功能介绍和逐步用户指南的更好方法

driver.js —— 前端操做引导js工具

编辑器工具

editor.js - 具备干净JSON输出的块样式编辑器

UEditor - 由百度web前端研发部开发所见即所得富文本web编辑器

Markdown编辑器

SimpleMDE-Markdown - 一个简单，美观，可嵌入的JavaScript Markdown编辑器

simditor - 方便快捷的所见即所得编辑器

---想掘金同样的markdown解析器(双栏)

marked – markdown解析器

视频

flv.js - 用纯JavaScript编写的HTML5 Flash Video（FLV）播放器(bilibili)

video.js - Video.js是专为HTML5世界打造的网络视频播放器。它支持HTML5和Flash视频

html5media - 简单的h5player，轻量级

jwplayer - 被大量网站使用

日期选择 || 日历

Pikaday - 使人耳目一新的JavaScript Datepicker —轻巧，没有依赖关系，模块化CSS

bootstrap-datepicker - Twitter引导程序（@twbs）的 日期选择器

时间选择

有vue的版本,也支持日期选择

Flatpickr - 轻巧，功能强大的javascript datetimepicker，无依赖项

时间处理

Moment.js - 在JavaScript中解析，验证，操做和显示日期和时间。

模拟数据

Mock - 模拟数据生成器

代码注释

JSDoc - 是JavaScript的API文档生成器

触摸方面 || 手势

PhyTouch - 腾讯丝般顺滑的触摸运动方案

hammer.js - 一个用于多点触摸手势的javascript库

better-scroll - 受iscroll的启发，它支持更多功能并具备更好的滚动性能

loading加载动画

loaders.css - 使人愉悦且注重性能的纯CSS加载动画

css-spinners - 使用CSS和最少的HTML标记制做的简单CSS旋转器和控件

progressbar.js - 反应灵敏的进度条

通知组件

notie - 干净，简单的javascript通知，输入和选择套件，没有依赖项

全屏滚动

fullPage.js - 轻松建立全屏滚动网站

pagePiling.js - Alvaro Trigo的pagePiling插件。建立滚动显示的部分

fullPage.js - 专一于移动端

---vue

Vue-fullpage.js - fullPage.js的官方Vue.js包装器

模板引擎

sodajs - 腾讯重量轻但功能强大的JavaScript模板引擎

list || table组件

vue-easytable - vue table 组件，支持 单元格合并、单元格编辑、多表头固定、多列固定、列拖动、排序、自定义列、条件过滤、分页

list.js - 完美的库，可为表，列表和各类HTML元素添加搜索，排序，过滤器和灵活性

浏览器属性

bowser - 浏览器属性，例如名称，版本，渲染引擎

excel处理

sheetjs - 电子表格数据工具包

exceljs - 读取，操做并将电子表格数据和样式写入XLSX和JSON。

网格布局库

Masonry - 级联网格布局库

FFmpeg(c模块 视频帧预览)

ffmpeg

WebAssembly | MDN

地图

Leaflet - 适用于移动设备的交互式地图的JavaScript库

表情包扩展

twemoji - 一个简单的库，可在全部平台上提供标准Unicode 表情符号支持。

浏览器测试

cypress - 对浏览器中运行的全部内容进行快速，轻松和可靠的测试

浏览器代码编辑器

[]monaco-editor - 基于浏览器的代码编辑器](https://github.com/microsoft/...)

滑动拼图验证

vue-puzzle-verification
vue-puzzle-vcode

值得学习库

weui

额外推荐

turn.js - 作一本书，带漂亮的翻页的效果