前言
在开发中,我们经常会将一些常用的代码块、功能块进行封装,为的是更好的复用。那么,被抽离出来独立完成功能,通过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