前端常用Utils工具函数库合集
在开发中,我们经常会将一些常用的代码块、功能块进行封装,为的是更好的复用。那么,被抽离出来独立完成功能,通过API或配置项和其他部分交互,便形成了插件。
函数库
Lodash
Underscore
Ramda
outils
动画库
Animate.css:CSS3 动画库,也是目前最通用的动画库。
Anime.js:一个强大的、轻量级的用来制作动画的javascript库
Hover.css:CSS hover 悬停效果,可以应用于链接、按钮、图片等等。
wow.js:滚动展示动画,WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果。
Magic.css:css3 animation动画库
Waves:点击波纹效果
move.js:一个小型的JavaScript库,通过JS来控制一系列的CSS动画顺序执行,使CSS3动画变得非常简单和优雅。
滚动库
iscroll- 平滑滚动插件
BetterScroll:iscroll 的优化版,使移动端滑动体验更加流畅
mescroll:移动端上拉刷新下拉加载
jQuery Scrollbox:图片文字滚动插件
liMarquee:jQuery无缝滚动插件
轮播图
Swiper:常用于移动端网站的内容触摸滑动
iSlider :移动端滑动组件
slip.js:移动端跟随手指滑动组件,零依赖。
滚屏
弹出框
layer:独立维护的三大组件之一(layDate、layer、layim)
dialogBox :基于 jQuery
消息通知
Notyf:简单的响应式纯js消息通知插件
PNotify :页面右上角的提示信息(非弹框提示)
https://sciactive.com/pnotify/
overhang.js:是一个JQuery插件显示即时通知、 确认或给定元素中的提示。
下拉框
级联选择器
ustbhuangyi/picker:移动端最好用的的筛选器组件、联动筛选
jQueryDistpicker:移动端最好用的的筛选器组件、联动筛选
http://www.jq22.com/demo/jQueryDistpicker20160621/
颜色选择器
时间选择器
时间日期处理
Moment.js:是一个解析,验证,操作和显示日期和时间的 JavaScript 类库。
http://momentjs.com/
timeago.js:轻量级的时间转换 Javascript 库
表单验证
validator.js:
jQuery Validation :jQuery 表单校验
Validform:一行代码搞定整站的表单验证!- Jquery表单验证插件
分页插件
富文本编辑器
树插件
图片懒加载
瀑布流
Metro:风兼瀑布流布局效果
相册
(图片滑动切换展示效果)
导航插件
视频播放器
Chimee:组件化H5播放器框架
http://chimee.org/
https://juejin.im/entry/5a02b480f265da43144020b1
flv.js
Bilibili 开源纯 JavaScript 编写的 FLV 播放器
Flash 视频(FLV)播放器
http://chimee.org/
https://juejin.im/entry/5a02b480f265da43144020b1
jplayer
http://www.jplayer.cn/
html5player
https://juejin.im/post/596f536d51882526337caf15
Video.js:
开源、免费的HTML5和Flash视频播放器
https://dogeek.net/
弹幕播放器
DanmuPlayer - Html5弹幕播放器插件
https://github.com/chiruom/DanmuPlayer
jquery.danmu.js - jQuery弹幕插件
https://github.com/chiruom/jquery.danmu.js
scroxt - 字幕字体滚动插件
https://github.com/chenjianfang/scroxt
复制粘贴插件
clipboard.js
https://github.com/zenorocha/clipboard.js/
ZeroClipboard
https://github.com/zeroclipboard/zeroclipboard
二维码插件
jquery.qrcode.js
https://github.com/jeromeetienne/jquery-qrcode
拖拽
Draggabilly
http://www.jq22.com/jquery-info293
dragula
https://www.toutiao.com/a6491847196890104334
文件上传
uploader
WebUploader:
HTML5 & FLASH 文件上传
https://github.com/fex-team/webuploader/
代码高亮
hightlightokayNav
https://highlightjs.org/
前端国际化
i18n
i18next
https://github.com/i18next/i18next
vue-i18n
https://github.com/kazupon/vue-i18n
前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”:
http://www.cnblogs.com/landeanfen/p/7581609.html
基于jQuery.i18n.properties 实现前端页面的资源国际化
https://blog.csdn.net/aixiaoyang168/article/details/49336709
地图
百度地图
http://lbsyun.baidu.com/
谷歌地图
http://www.runoob.com/googleapi/google-maps-api-key.html
高德地图
https://lbs.amap.com/
腾讯地图
https://lbs.qq.com/
网页即时通讯
LayIM
http://layim.layui.com/
闲聊么
https://www.xianliao.me/
数据可视化
ECharts
http://echarts.baidu.com/index.html
ant/g2
https://g2.antv.vision/zh
阿里云 DataV
PDF 阅读器
https://github.com/mozilla/pdf.js
主题色提取
RGBaster
https://github.com/briangonzalez/rgbaster.js
Color Thief
vibrant.js
前端存储
ustbhuangyi/storage:
封装了sessionStorage和localStorage
https://github.com/ustbhuangyi/storage
store.js
本地存储localstorage的封装
https://github.com/jaywcjlove/store.js
localForage
https://github.com/localForage/localForage
数据 Mock
Easy Mock
https://github.com/easy-mock/easy-mock
Mockjs
生成任意随机数据,拦截 Ajax 请求
http://mockjs.com/
json-server + fakerjs
https://github.com/typicode/json-server
jQuery放大镜插件jqzoom.js
http://www.jq22.com/jquery-info648
Zooming – JavaScript图片缩放库
http://www.dowebok.com/204.html