关于javascript:前端常用插件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 – 做一本书，带丑陋的翻页的成果