前端常用插件、工具类库汇总，新手必收藏！！！

前言

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

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

可以先加个收藏（Ctrl + D），以后遇到类似的场景就来看看具体的插件及其用法。
另外，不要重复造轮子，把精力放在业务逻辑上！

函数库

Lodash（推荐）：
https://github.com/lodash/lodash

Underscore：
https://underscorejs.org/

Ramda：
https://github.com/ramda/ramda

outils：
https://github.com/proYang/outils

30-seconds-of-code：
https://github.com/Chalarangelo/30-seconds-of-code
动画库

Animate.css
CSS3 动画库，也是目前最通用的动画库。
https://daneden.github.io/animate.css/

Anime.js：
一个强大的、轻量级的用来制作动画的javascript库
http://animejs.com/

Hover.css：
CSS hover 悬停效果，可以应用于链接、按钮、图片等等。
https://github.com/IanLunn/Hover

wow.js:
滚动展示动画
WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果。
https://github.com/matthieua/WOW

scrollReveal.js：
类似 wow.js
https://github.com/jlmakes/scrollreveal

Magic.css：
css3 animation动画库
https://github.com/miniMAC/magic

Waves：
点击波纹效果
https://github.com/fians/Waves

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

Velocity.js：
一个功能齐全的 JavaScript 动画套件，包括诸如淡入淡出、滚动、滚动、停止、结束、翻转等动画效果。
https://github.com/julianshapiro/velocity
滚动库

iscroll - 平滑滚动插件：
https://github.com/cubiq/iscroll

BetterScroll：
https://github.com/ustbhuangyi/better-scroll
iscroll 的优化版，使移动端滑动体验更加流畅

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

animatescroll：
jQuery滚动到指定位置
https://plugins.compzets.com/animatescroll/

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

jQuery Scrollbox：
图片文字滚动插件
http://www.jq22.com/jquery-info1890

liMarquee：
jQuery无缝滚动插件
http://www.dowebok.com/188.html
轮播图

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

iSlider：
移动端滑动组件
http://eux.baidu.com/iSlider/demo/index_chinese.html

slip.js：
移动端跟随手指滑动组件，零依赖。
https://github.com/binnng/slip.js

OwlCarousel2：
http://owlcarousel2.github.io/OwlCarousel2/

slick
http://www.jq22.com/jquery-info406

myFocus：
http://www.cosmissy.com/myfocus/tutorials.html

WebSlides
https://github.com/webslides/webslides/

jQuery轮播插件slider：
http://www.jq22.com/jquery-info889

滚屏

fullpage：
http://www.jq22.com/jquery-info1124

弹出框

layer：
layer.layui.com/
layui 独立维护的三大组件之一（layDate、layer、layim）
尽管 layui 中包含了这些组件，但因为它们受众群体广泛或应用广泛，特从 layui 中抽取出来个副本，可独立引用。我们也会对它们进行同步维护。
我目前是在职前端开发，如果你现在也想学习前端开发技术，
在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，
你都可以申请加入我的前端自学裙：前面：603 中间：985 最后：993。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。
Bootbox.js：http://bootboxjs.com/

dialogBox：
基于 jQuery
http://www.jq22.com/jquery-info4822

easyDialog：http://www.h-ui.net/easydialog-v2.0/index.html
消息通知

Notyf：
简单的响应式纯js消息通知插件
http://www.htmleaf.com/jQuery/Lightbox-Dialog/201609123990.html
PNotify：
页面右上角的提示信息（非弹框提示）
https://sciactive.com/pnotify/
http://sciactive.github.io/pnotify/
https://github.com/sciactive/pnotify

overhang.js：
http://www.jq22.com/jquery-info9193
overhang.js 是一个JQuery插件显示即时通知、确认或给定元素中的提示。
下拉框

select2：https://select2.org/

级联选择器

ustbhuangyi/picker
https://github.com/ustbhuangyi/picker
移动端最好用的的筛选器组件、联动筛选

jQueryDistpicker：
http://fengyuanchen.github.io/distpicker/
http://www.jq22.com/demo/jQueryDistpicker20160621/

颜色选择器

Bootstrap Colorpicker 2
https://github.com/farbelous/bootstrap-colorpicker
时间选择器

layDate：https://www.layui.com/laydate/

wdatepicker

时间日期处理

Moment.js：
Moment.js 是一个解析，验证，操作和显示日期和时间的 JavaScript 类库。
http://momentjs.com/
https://github.com/moment/moment

timeago.js：
轻量级的时间转换 Javascript 库
https://github.com/hustcc/timeago.js

表单验证

validator.js
https://github.com/chriso/validator.js

jQuery Validation
jQuery 表单校验
https://github.com/jquery-validation/jquery-validation

Validation Plugin：
jQuery插件
http://www.imooc.com/learn/385

Validform：
一行代码搞定整站的表单验证！- Jquery表单验证插件
http://validform.rjboy.cn/
分页插件

pagination
https://github.com/superRaytin/paginationjs

富文本编辑器

wangEditor
http://www.wangeditor.com/

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

CKEditor
https://ckeditor.com/

KindEditor
http://kindeditor.net/demo.php

MediumEditor
http://yabwe.github.io/medium-editor/

Simditor
http://simditor.tower.im/

Summernote
https://summernote.org/

Quill
https://quilljs.com/

Slate
https://github.com/ianstormtaylor/slate

Markdown 编辑器

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

树插件

http://www.treejs.cn/

图片懒加载

lazyload
https://github.com/tuupola/jquery_lazyload

瀑布流

Masonry：
https://www.cnblogs.com/cjc917/p/7402026.html

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

相册（图片滑动切换展示效果）

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

PC端：photoviewer

移动端：PhotoSwipe
https://www.helloweba.net/javascript/460.html

导航插件
okayNav
http://www.dowebok.com/204.html

视频播放器

Chimee
组件化H5播放器框架
http://chimee.org/
https://juejin.im/entry/5a02b480f265da43144020b1

flv.js
Bilibili开源纯JavaScript编写的FLV播放器
Flash 视频（FLV）播放器
https://github.com/Bilibili/flv.js
https://www.toutiao.com/a6478550535417889293

ckplayer
http://www.ckplayer.com/

jplayer
http://www.jplayer.cn/

html5player
https://juejin.im/post/596f536d51882526337caf15

Video.js
开源、免费的HTML5和Flash视频播放器
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

条形码插件
barcode

二维码插件

jquery.qrcode.js
https://github.com/jeromeetienne/jquery-qrcode

拖拽

Draggabilly
http://www.jq22.com/jquery-info293

dragula
https://www.toutiao.com/a6491847196890104334

手机端事件

touch.js

文件上传

uploader

WebUploader：
https://github.com/fex-team/webuploader/
HTML5 & FLASH 文件上传

代码高亮

hightlight
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 实现前端页面的资源国际化：
http://m.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

阿里云 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：
http://mockjs.com/
生成任意随机数据，拦截 Ajax 请求

json-server + fakerjs

https://github.com/typicode/json-server

bShare

JiaThis（关闭了！！！）

QQ分享组件

百度分享

Gitalk

gitment

畅言

来必力

友言（关闭了！！！）

网易云跟贴（关闭了！！！）

其他

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

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

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

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

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

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

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

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

新手引导
https://github.com/easelinc/tourist

前端常用插件、工具类库汇总，新手必收藏！！！相关推荐

前端常用Utils工具函数库合集
前端常用Utils工具函数库合集在开发中,我们经常会将一些常用的代码块.功能块进行封装,为的是更好的复用.那么,被抽离出来独立完成功能,通过API或配置项和其他部分交互,便形成了插件. 函数库 Lo ...
[项目过程中所遇到的各种问题记录]工具篇——.NET开发时常用的工具类库
在日常开发的过程当中我们总是会根据项目的开发需求将一些公用的类或者方法进行抽象封装,这些类或方法的抽象封装可能是基于某个项目或者多个项目,最常见的应该就是SQLHelper了,这些类库在实际使用的过程 ...
60+ 个前端常用插件库合集
60+ 个前端常用插件库合集目录 60+ 个前端常用插件库合集 DataTables LazyLoad lightSlider alertify.js pickadate.js-日期/时间选择器 c ...
chrome vue插件_VS Code 前端常用插件推荐
⊕.vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效. Ξ.当你不需要某个插件时只需要进入扩展,点击对应 ...
前端常用插件之calender日历控件
前端常用插件之calender日历控件最近,发现一个插件--简单好用的页面日历控件,个人觉得有必要与大家分享一下,它就是calender日历控件. 准备环境: Bootstrap文件:bootstr ...
vscode前端常用插件
vscode前端常用插件文章目录 vscode前端常用插件 1. Live Server 1.1 Live Server的使用 2. rest client 3. GitLens 4. CSS pe ...
前端常用插件之artDialog弹出框
前端常用插件之artDialog弹出框最近,发现一个插件--好看精致的页面弹出框,个人觉得有必要与大家分享一下,它就是artDialog弹出框. 引用上一篇文章<前端常用插件之art-temp ...
Mysql连接数据库异常汇总【必收藏】
在Centos上部署项目发现一个奇怪的问题,数据库连接一直抛异常.于是花了两个小时搜了各种数据库连接异常导致的原因,最终问题得以解决.同时,把解决过程中搜集到的异常信息汇总一下,当大家遇到类似的问题时 ...
bootstrap表单拖拽生成器插件_web前端常用插件、工具类库汇总，新手必收藏！！！...
前言在开发中,我们经常会将一些常用的代码块.功能块进行封装,为的是更好的复用.那么,被抽离出来独立完成功能,通过API或配置项和其他部分交互,便形成了插件. 下面这些是我在工作中积累的一些常用的前端 ...

前端常用插件、工具类库汇总，新手必收藏！！！

前端常用插件、工具类库汇总，新手必收藏！！！相关推荐

最新文章

热门文章