前言
在开发中,我们经常会将一些常用的代码块、功能块进行封装,为的是更好的复用。那么,被抽离出来独立完成功能,通过API或配置项和其他部分交互,便形成了插件。
下面这些是我在工作中积累的一些常用的前端开源插件,这里只是罗列出来,详细的用法各个插件官网或者Gayhub都有介绍。注意:往往一个解决方案会有多个插件,需要读者根据自己的实际业务需求进行甄别选用,欢迎留言交流和补充。
函数库
Lodash https://github.com/lodash/lodash Underscore
https://underscorejs.org/ Ramda https://github.com/ramda/ramda outils
https://github.com/proYang/ou...
动画库
Animate.css:CSS3 动画库,也是目前最通用的动画库。
https://daneden.github.io/ani...
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 Magic.css:css3 animation动画库
https://github.com/miniMAC/magic Waves:点击波纹效果
https://github.com/fians/Waves
move.js:一个小型的JavaScript库,通过JS来控制一系列的CSS动画顺序执行,使CSS3动画变得非常简单和优雅。
https://github.com/visionmedi...
滚动库
iscroll - 平滑滚动插件 https://github.com/cubiq/iscroll BetterScroll:iscroll
的优化版,使移动端滑动体验更加流畅 https://github.com/ustbhuangy...
mescroll:移动端上拉刷新下拉加载 http://www.mescroll.com/api.html jQuery
Scrollbox:图片文字滚动插件 http://www.jq22.com/jquery-in...
liMarquee:jQuery无缝滚动插件 http://www.dowebok.com/188.html
轮播图
Swiper:常用于移动端网站的内容触摸滑动 https://www.swiper.com.cn/ iSlider:移动端滑动组件
http://eux.baidu.com/iSlider/...
slip.js:移动端跟随手指滑动组件,零依赖。 https://github.com/binnng/sli...
OwlCarousel2: http://owlcarousel2.github.io... slick:
http://www.jq22.com/jquery-in... WebSlides:
https://github.com/webslides/... jQuery轮播插件slider:
http://www.jq22.com/jquery-in...
滚屏
fullpage: http://www.jq22.com/jquery-in...
弹出框
layer:独立维护的三大组件之一(layDate、layer、layim) http://layer.layui.com/
Bootbox.js: http://bootboxjs.com/ dialogBox:基于 jQuery
http://www.jq22.com/jquery-in... easyDialog:
http://www.h-ui.net/easydialo...
消息通知
Notyf:简单的响应式纯js消息通知插件
http://www.htmleaf.com/jQuery...
PNotify:页面右上角的提示信息(非弹框提示) https://github.com/sciactive/...
https://sciactive.com/pnotify/ overhang.js:是一个JQuery插件显示即时通知加粗文字、
确认或给定元素中的提示。 http://www.jq22.com/jquery-in...
下拉框
select2 https://select2.org/
级联选择器
ustbhuangyi/picker:移动端最好用的的筛选器组件、联动筛选
https://github.com/ustbhuangy...
jQueryDistpicker:移动端最好用的的筛选器组件、联动筛选
http://fengyuanchen.github.io...
http://www.jq22.com/demo/jQue...
颜色选择器
Bootstrap Colorpicker 2
https://github.com/farbelous/...
时间选择器
layDate: https://www.layui.com/laydate/
时间日期处理
Moment.js:是一个解析,验证,操作和显示日期和时间的 JavaScript 类库。 http://momentjs.com/
https://github.com/moment/moment timeago.js:轻量级的时间转换 Javascript 库
https://github.com/hustcc/tim...
表单验证
validator.js: https://github.com/chriso/val... jQuery
Validation:jQuery 表单校验
https://github.com/jquery-val...
Validform:一行代码搞定整站的表单验证!- Jquery表单验证插件 http://validform.rjboy.cn/
分页插件
pagination: https://github.com/superRayt
富文本编辑器
wangEditor http://www.wangeditor.com/ 百度UEditor
https://ueditor.baidu.com/web... KindEditor
http://kindeditor.net/demo.php MediumEditor
http://yabwe.github.io/medium... Simditor
https://simditor.tower.im/ Summernote https://summernote.org/ Quill
https://quilljs.com/ Slate https://github.com/ianstormta...
Markdown
编辑器
Editor.md https://pandao.github.io/edit... 树插件 树插件
http://www.treejs.cn/v3/main....
图片懒加载
lazyload https://github.com/tuupola/jq...
瀑布流
Masonry https://www.cnblogs.com/cjc91... Metro风兼瀑布流布局效果
http://www.lanrenzhijia.com/j...
相册
(图片滑动切换展示效果) Viewer.js https://fengyuanchen.github.i...
导航插件
okayNav http://www.dowebok.com/204.html
视频播放器
Chimee:组件化H5播放器框架 http://chimee.org/
https://juejin.im/entry/5a02b... flv.js Bilibili 开源纯
JavaScript 编写的 FLV 播放器 Flash 视频(FLV)播放器 http://chimee.org/
https://juejin.im/entry/5a02b... jplayer
http://www.jplayer.cn/ html5player
https://juejin.im/post/596f53... Video.js:
开源、免费的HTML5和Flash视频播放器 https://dogeek.net/
弹幕播放器
DanmuPlayer - Html5弹幕播放器插件 https://github.com/chiruom/Da...
jquery.danmu.js - jQuery弹幕插件
https://github.com/chiruom/jq... scroxt - 字幕字体滚动插件
https://github.com/chenjianfa...
复制粘贴插件
clipboard.js https://github.com/zenorocha/... ZeroClipboard
https://github.com/zeroclipbo...
二维码插件
jquery.qrcode.js https://github.com/jeromeetie...
拖拽
Draggabilly http://www.jq22.com/jquery-in... dragula
https://www.toutiao.com/a6491...
文件上传
uploader WebUploader: HTML5 & FLASH 文件上传
https://github.com/fex-team/w...
代码高亮
hightlightokayNav https://highlightjs.org/
前端国际化
i18n i18next https://github.com/i18next/i1... vue-i18n
https://github.com/kazupon/vu...
前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”:
http://www.cnblogs.com/landea...
基于jQuery.i18n.properties 实现前端页面的资源国际化
https://blog.csdn.net/aixiaoy...
地图
百度地图 http://lbsyun.baidu.com/ 谷歌地图
http://www.runoob.com/googlea... 高德地图
https://lbs.amap.com/ 腾讯地图 https://lbs.qq.com/
网页即时通讯
LayIM http://layim.layui.com/ 闲聊么 https://www.xianliao.me/
数据可视化
ECharts http://echarts.baidu.com/inde... 阿里云 DataV
PDF 阅读器
https://github.com/mozilla/pd...
主题色提取
RGBaster https://github.com/briangonza... Color Thief
vibrant.js
前端存储
ustbhuangyi/storage: 封装了sessionStorage和localStorage
https://github.com/ustbhuangy... store.js 本地存储localstorage的封装
https://github.com/jaywcjlove... localForage
https://github.com/localForag...
数据 Mock
Easy Mock https://github.com/easy-mock/... Mockjs 生成任意随机数据,拦截
Ajax 请求 http://mockjs.com/ json-server + fakerjs
https://github.com/typicode/j...
分享
bShare QQ分享组件 百度分享
评论
Gitalk gitment 畅言 来必力
其他
IE浏览器版本过低提示插件IEalert.js http://www.jqueryfuns.com/res...
lyric-parser - QQ音乐歌词解析 https://github.com/ustbhuangy...
holder.js - 图片占位符插件 https://github.com/imsky/holder
jQuery放大镜插件jqzoom.js http://www.jq22.com/jquery-in... Zooming –
JavaScript图片缩放库 http://www.dowebok.com/204.html