前言
在开发中,我们经常会将一些常用的代码块、功能块进行封装,为的是更好的复用。那么,被抽离出来独立完成功能,通过API或配置项和其他部分交互,便形成了插件。
下面这些是我在工作中积累的一些常用的前端开源插件,这里只是罗列出来,详细的用法各个插件官网或者Gayhub都有介绍。注意:往往一个解决方案会有多个插件,需要读者根据自己的实际业务需求进行甄别选用,欢迎留言交流和补充。^_^
可以先加个收藏(Ctrl + D),以后遇到类似的场景就来看看具体的插件及其用法。
另外,不要重复造轮子,把精力放在业务逻辑上!
函数库
Lodash(推荐):github.com/lodash/loda…
Underscore:underscorejs.org/
Ramda:github.com/ramda/ramda
outils:github.com/proYang/out…
30-seconds-of-code:github.com/Chalarangel…
动画库
Animate.css
- CSS3 动画库,也是目前最通用的动画库。
- daneden.github.io/animate.css…
Anime.js:
- 一个强大的、轻量级的用来制作动画的javascript库
- animejs.com/
Hover.css:
- CSS hover 悬停效果,可以应用于链接、按钮、图片等等。
- github.com/IanLunn/Hov…
wow.js:
- 滚动展示动画
- WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果。
- github.com/matthieua/W…
scrollReveal.js:
- 类似 wow.js
- github.com/jlmakes/scr…
Magic.css:
- css3 animation动画库
- github.com/miniMAC/mag…
Waves:
- 点击波纹效果
- github.com/fians/Waves
move.js:
- 一个小型的JavaScript库,通过JS来控制一系列的CSS动画顺序执行,使CSS3动画变得非常简单和优雅。
- github.com/visionmedia…
Velocity.js:
- 一个功能齐全的 JavaScript 动画套件,包括诸如淡入淡出、滚动、滚动、停止、结束、翻转等动画效果。
- github.com/julianshapi…
滚动库
iscroll – 平滑滚动插件:github.com/cubiq/iscro…
BetterScroll:
- github.com/ustbhuangyi…
- iscroll 的优化版,使移动端滑动体验更加流畅
mescroll:
- 移动端上拉刷新下拉加载
- www.mescroll.com/api.html
animatescroll:
- jQuery滚动到指定位置
- plugins.compzets.com/animatescro…
crossfade.js:
- jQuery图片模糊插件crossfade.js
- www.dowebok.com/104.html
jQuery Scrollbox:
- 图片文字滚动插件
- www.jq22.com/jquery-info…
liMarquee:
- jQuery无缝滚动插件
- www.dowebok.com/188.html
轮播图
Swiper:
- 常用于移动端网站的内容触摸滑动
- www.swiper.com.cn/
iSlider:
- 移动端滑动组件
- eux.baidu.com/iSlider/dem…
slip.js:
- 移动端跟随手指滑动组件,零依赖。
- github.com/binnng/slip…
OwlCarousel2:owlcarousel2.github.io/OwlCarousel…
slick:www.jq22.com/jquery-info…
myFocus:www.cosmissy.com/myfocus/tut…
WebSlides:github.com/webslides/w…
jQuery轮播插件slider:www.jq22.com/jquery-info…
滚屏
fullpage:www.jq22.com/jquery-info…
弹出框
layer:
- layer.layui.com/
- layui 独立维护的三大组件之一(layDate、layer、layim)
- 尽管 layui 中包含了这些组件,但因为它们受众群体广泛或应用广泛,特从 layui 中抽取出来个副本,可独立引用。我们也会对它们进行同步维护。
Bootbox.js:bootboxjs.com/
dialogBox:
- 基于 jQuery
- www.jq22.com/jquery-info…
easyDialog:www.h-ui.net/easydialog-…
消息通知
Notyf:
- 简单的响应式纯js消息通知插件
- www.htmleaf.com/jQuery/Ligh…
PNotify:
- 页面右上角的提示信息(非弹框提示)
- sciactive.com/pnotify/
- sciactive.github.io/pnotify/
- github.com/sciactive/p…
overhang.js:
- www.jq22.com/jquery-info…
- overhang.js 是一个JQuery插件显示即时通知、 确认或给定元素中的提示。
下拉框
select2:select2.org/
级联选择器
ustbhuangyi/picker
- github.com/ustbhuangyi…
- 移动端最好用的的筛选器组件、联动筛选
jQueryDistpicker:
颜色选择器
Bootstrap Colorpicker 2:github.com/farbelous/b…
时间选择器
layDate:www.layui.com/laydate/
wdatepicker
时间日期处理
Moment.js:
- Moment.js 是一个解析,验证,操作和显示日期和时间的 JavaScript 类库。
- momentjs.com
- github.com/moment/mome…
timeago.js:
- 轻量级的时间转换 Javascript 库
- github.com/hustcc/time…
表单验证
validator.js:github.com/chriso/vali…
jQuery Validation
- jQuery 表单校验
- github.com/jquery-vali…
Validation Plugin:
- jQuery插件
- www.imooc.com/learn/385
Validform:
- 一行代码搞定整站的表单验证!- Jquery表单验证插件
- validform.rjboy.cn/
分页插件
pagination:github.com/superRaytin…
富文本编辑器
wangEditor:www.wangeditor.com/
百度UEditor:ueditor.baidu.com/website/
CKEditor:ckeditor.com/
KindEditor:kindeditor.net/demo.php
MediumEditor:yabwe.github.io/medium-edit…
Simditor:simditor.tower.im/
Summernote:summernote.org/
Quill:quilljs.com/
Slate:github.com/ianstormtay…
Markdown 编辑器
Editor.md:pandao.github.io/editor.md/
树插件
图片懒加载
lazyload:github.com/tuupola/jqu…
瀑布流
Masonry:www.cnblogs.com/cjc917/p/74…
Metro风兼瀑布流布局效果http://www.lanrenzhijia.com/jquery/1985.html
相册(图片滑动切换展示效果)
PC端:Viewer.js:fengyuanchen.github.io/viewerjs/
PC端:photoviewer
移动端:PhotoSwipe:www.helloweba.net/javascript/…
导航插件
okayNav:www.dowebok.com/204.html
视频播放器
Chimee
- 组件化H5播放器框架
- chimee.org/
- juejin.im/entry/5a02b…
flv.js
- Bilibili开源纯JavaScript编写的FLV播放器
- Flash 视频(FLV)播放器
- github.com/Bilibili/fl…
- www.toutiao.com/a6478550535…
ckplayer:www.ckplayer.com/
jplayer:www.jplayer.cn/
html5player:juejin.im/post/596f53…
Video.js
- 开源、免费的HTML5和Flash视频播放器
- Video.js – 开源、免费的HTML5和Flash视频播放器
多青:dogeek.net/
弹幕视频播放器
DanmuPlayer – Html5弹幕视频播放器插件:github.com/chiruom/Dan…
jquery.danmu.js – jQuery弹幕插件:github.com/chiruom/jqu…
scroxt – 字幕字体滚动插件:github.com/chenjianfan…
复制粘贴插件
clipboard.js:github.com/zenorocha/c…
ZeroClipboard:github.com/zeroclipboa…
条形码插件
barcode
二维码插件
jquery.qrcode.js:github.com/jeromeetien…
拖拽
Draggabilly:www.jq22.com/jquery-info…
dragula:www.toutiao.com/a6491847196…
手机端事件
touch.js
文件上传
uploader
WebUploader:
- github.com/fex-team/we…
- HTML5 & FLASH 文件上传
代码高亮
hightlight:highlightjs.org/
前端国际化 i18n
i18next:github.com/i18next/i18…
vue-i18n:github.com/kazupon/vue…
前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”:www.cnblogs.com/landeanfen/…
基于jQuery.i18n.properties 实现前端页面的资源国际化:m.blog.csdn.net/aixiaoyang1…
地图
百度地图:lbsyun.baidu.com/
谷歌地图:www.runoob.com/googleapi/g…
高德地图:lbs.amap.com/
腾讯地图:lbs.qq.com/
网页即时通讯
LayIM:layim.layui.com/
闲聊么:www.xianliao.me/
数据可视化
ECharts :echarts.baidu.com/index.html
阿里云 DataV
PDF 阅读器
主题色提取
RGBaster:github.com/briangonzal…
Color Thief
vibrant.js
前端存储
ustbhuangyi/storage:
- 封装了sessionStorage和localStorage
- github.com/ustbhuangyi…
store.js
- 本地存储localstorage的封装
- github.com/jaywcjlove/…
localForage:github.com/localForage…
数据 Mock
Easy Mock:github.com/easy-mock/e…
Mockjs:
- mockjs.com
- 生成任意随机数据,拦截 Ajax 请求
json-server + fakerjs:github.com/typicode/js…
分享
bShare
JiaThis(关闭了!!!)
QQ分享组件
百度分享
评论
Gitalk
gitment
畅言
来必力
友言(关闭了!!!)
网易云跟贴(关闭了!!!)
其他
IE浏览器版本过低提示插件IEalert.js:www.jqueryfuns.com/resource/45…
lyric-parser – QQ音乐歌词解析:github.com/ustbhuangyi…
holder.js – 图片占位符插件:github.com/imsky/holde…
jQuery放大镜插件jqzoom.js:www.jq22.com/jquery-info…
Zooming – JavaScript图片缩放库:www.dowebok.com/223.html
fastclick – 消除 click 移动浏览器300ms延迟:github.com/ftlabs/fast…
jsonp – 一个简单的JSONP实现:github.com/webmodules/…
js-base64 – Base64 编码解码:github.com/dankogai/js…
新手引导:github.com/easelinc/to…