前端常用插件、工具类库汇总，不要重复造轮子啦！！！ |
您所在的位置：网站首页 › 封装插件 › 前端常用插件、工具类库汇总，不要重复造轮子啦！！！ |
前端常用插件、工具类库汇总，不要重复造轮子啦！！！
|
前言
在开发中，我们经常会将一些常用的代码块、功能块进行封装，为的是更好的复用。那么，被抽离出来独立完成功能，通过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/Wavesmove.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.htmlanimatescroll： jQuery滚动到指定位置 plugins.compzets.com/animatescro…crossfade.js： jQuery图片模糊插件crossfade.js www.dowebok.com/104.htmljQuery 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： fengyuanchen.github.io/distpicker/ www.jq22.com/demo/jQuery… 颜色选择器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/385Validform： 一行代码搞定整站的表单验证！- 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/ 树插件www.treejs.cn 图片懒加载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.cn/post/684490…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.cn/post/684490… 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/ 前端国际化 i18ni18next：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 阅读器github.com/mozilla/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… 数据 MockEasy 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… |
【本文地址】