前端常用插件、工具类库汇总（转）

冷不防 2021-09-17 08:12 285阅读 0赞

**前言**

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

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

![图片描述][bVbjpHx_w_800_h_200]

**函数库**

> Lodash  [https://github.com/lodash/lodash][https_github.com_lodash_lodash] Underscore  
> [https://underscorejs.org/][https_underscorejs.org] Ramda  [https://github.com/ramda/ramda][https_github.com_ramda_ramda] outils  
> [https://github.com/proYang/ou...][https_github.com_proYang_ou...]

**动画库**

> Animate.css：CSS3 动画库，也是目前最通用的动画库。  
> [https://daneden.github.io/ani...][https_daneden.github.io_ani...]  
> Anime.js：一个强大的、轻量级的用来制作动画的javascript库  [http://animejs.com/][http_animejs.com]  
> Hover.css：CSS hover 悬停效果，可以应用于链接、按钮、图片等等。  
> [https://github.com/IanLunn/Hover][https_github.com_IanLunn_Hover] wow.js：滚动展示动画，WOW.js 依赖  
> animate.css，所以它支持 animate.css 多达 60 多种的动画效果。  
> [https://github.com/matthieua/WOW][https_github.com_matthieua_WOW] Magic.css：css3 animation动画库  
> [https://github.com/miniMAC/magic][https_github.com_miniMAC_magic] Waves：点击波纹效果  
> [https://github.com/fians/Waves][https_github.com_fians_Waves]  
> move.js：一个小型的JavaScript库，通过JS来控制一系列的CSS动画顺序执行，使CSS3动画变得非常简单和优雅。  
> [https://github.com/visionmedi...][https_github.com_visionmedi...]

**滚动库**

> iscroll - 平滑滚动插件  [https://github.com/cubiq/iscroll][https_github.com_cubiq_iscroll] BetterScroll：iscroll  
> 的优化版，使移动端滑动体验更加流畅  [https://github.com/ustbhuangy...][https_github.com_ustbhuangy...]  
> mescroll：移动端上拉刷新下拉加载  [http://www.mescroll.com/api.html][http_www.mescroll.com_api.html] jQuery  
> Scrollbox：图片文字滚动插件  [http://www.jq22.com/jquery-in...][http_www.jq22.com_jquery-in...]  
> liMarquee：jQuery无缝滚动插件  [http://www.dowebok.com/188.html][http_www.dowebok.com_188.html]

**轮播图**

> Swiper：常用于移动端网站的内容触摸滑动  [https://www.swiper.com.cn/][https_www.swiper.com.cn] iSlider：移动端滑动组件  
> [http://eux.baidu.com/iSlider/...][http_eux.baidu.com_iSlider_...]  
> slip.js：移动端跟随手指滑动组件，零依赖。  [https://github.com/binnng/sli...][https_github.com_binnng_sli...]  
> OwlCarousel2：  [http://owlcarousel2.github.io...][http_owlcarousel2.github.io...] slick：  
> [http://www.jq22.com/jquery-in...][http_www.jq22.com_jquery-in... 1] WebSlides：  
> [https://github.com/webslides/...][https_github.com_webslides_...] jQuery轮播插件slider：  
> [http://www.jq22.com/jquery-in...][http_www.jq22.com_jquery-in... 2]

**滚屏**

> fullpage：  [http://www.jq22.com/jquery-in...][http_www.jq22.com_jquery-in... 3]

**弹出框**

> layer：独立维护的三大组件之一（layDate、layer、layim）  [http://layer.layui.com/][http_layer.layui.com]  
> Bootbox.js：  [http://bootboxjs.com/][http_bootboxjs.com] dialogBox：基于 jQuery  
> [http://www.jq22.com/jquery-in...][http_www.jq22.com_jquery-in... 4] easyDialog：  
> [http://www.h-ui.net/easydialo...][http_www.h-ui.net_easydialo...]

**消息通知**

> Notyf：简单的响应式纯js消息通知插件  
> [http://www.htmleaf.com/jQuery...][http_www.htmleaf.com_jQuery...]  
> PNotify：页面右上角的提示信息（非弹框提示）  [https://github.com/sciactive/...][https_github.com_sciactive_...]  
> [https://sciactive.com/pnotify/][https_sciactive.com_pnotify] overhang.js：是一个JQuery插件显示即时通知加粗文字、  
> 确认或给定元素中的提示。  [http://www.jq22.com/jquery-in...][http_www.jq22.com_jquery-in... 5]

**下拉框**

> select2  [https://select2.org/][https_select2.org]

**级联选择器**

> ustbhuangyi/picker：移动端最好用的的筛选器组件、联动筛选  
> [https://github.com/ustbhuangy...][https_github.com_ustbhuangy... 1]  
> jQueryDistpicker：移动端最好用的的筛选器组件、联动筛选  
> [http://fengyuanchen.github.io...][http_fengyuanchen.github.io...]  
> [http://www.jq22.com/demo/jQue...][http_www.jq22.com_demo_jQue...]

**颜色选择器**

> Bootstrap Colorpicker 2  
> [https://github.com/farbelous/...][https_github.com_farbelous_...]

**时间选择器**

> layDate：  [https://www.layui.com/laydate/][https_www.layui.com_laydate]

**时间日期处理**

> Moment.js：是一个解析，验证，操作和显示日期和时间的 JavaScript 类库。  [http://momentjs.com/][http_momentjs.com]  
> [https://github.com/moment/moment][https_github.com_moment_moment] timeago.js：轻量级的时间转换 Javascript 库  
> [https://github.com/hustcc/tim...][https_github.com_hustcc_tim...]

**表单验证**

> validator.js：  [https://github.com/chriso/val...][https_github.com_chriso_val...] jQuery  
> Validation：jQuery 表单校验  
> [https://github.com/jquery-val...][https_github.com_jquery-val...]  
> Validform：一行代码搞定整站的表单验证！- Jquery表单验证插件  [http://validform.rjboy.cn/][http_validform.rjboy.cn]

**分页插件**

> pagination：  [https://github.com/superRayt][https_github.com_superRayt]

**富文本编辑器**

> wangEditor  [http://www.wangeditor.com/][http_www.wangeditor.com] 百度UEditor  
> [https://ueditor.baidu.com/web...][https_ueditor.baidu.com_web...] KindEditor  
> [http://kindeditor.net/demo.php][http_kindeditor.net_demo.php] MediumEditor  
> [http://yabwe.github.io/medium...][http_yabwe.github.io_medium...] Simditor  
> [https://simditor.tower.im/][https_simditor.tower.im] Summernote  [https://summernote.org/][https_summernote.org] Quill  
> [https://quilljs.com/][https_quilljs.com] Slate  [https://github.com/ianstormta...][https_github.com_ianstormta...]  
> Markdown

**编辑器**

> Editor.md  [https://pandao.github.io/edit...][https_pandao.github.io_edit...] 树插件 树插件  
> [http://www.treejs.cn/v3/main....][http_www.treejs.cn_v3_main....]

**图片懒加载**

> lazyload  [https://github.com/tuupola/jq...][https_github.com_tuupola_jq...]

**瀑布流**

> Masonry  [https://www.cnblogs.com/cjc91...][https_www.cnblogs.com_cjc91...] Metro风兼瀑布流布局效果  
> [http://www.lanrenzhijia.com/j...][http_www.lanrenzhijia.com_j...]

**相册**

> （图片滑动切换展示效果） Viewer.js  [https://fengyuanchen.github.i...][https_fengyuanchen.github.i...]

**导航插件**

> okayNav  [http://www.dowebok.com/204.html][http_www.dowebok.com_204.html]

**视频播放器**

> Chimee：组件化H5播放器框架  [http://chimee.org/][http_chimee.org]  
> [https://juejin.im/entry/5a02b...][https_juejin.im_entry_5a02b...] flv.js Bilibili 开源纯  
> JavaScript 编写的 FLV 播放器 Flash 视频（FLV）播放器  [http://chimee.org/][http_chimee.org]  
> [https://juejin.im/entry/5a02b...][https_juejin.im_entry_5a02b...] jplayer  
> [http://www.jplayer.cn/][http_www.jplayer.cn] html5player  
> [https://juejin.im/post/596f53...][https_juejin.im_post_596f53...] Video.js：  
> 开源、免费的HTML5和Flash视频播放器  [https://dogeek.net/][https_dogeek.net]

**弹幕播放器**

> DanmuPlayer - Html5弹幕播放器插件  [https://github.com/chiruom/Da...][https_github.com_chiruom_Da...]  
> jquery.danmu.js - jQuery弹幕插件  
> [https://github.com/chiruom/jq...][https_github.com_chiruom_jq...] scroxt - 字幕字体滚动插件  
> [https://github.com/chenjianfa...][https_github.com_chenjianfa...]

**复制粘贴插件**

> clipboard.js  [https://github.com/zenorocha/...][https_github.com_zenorocha_...] ZeroClipboard  
> [https://github.com/zeroclipbo...][https_github.com_zeroclipbo...]

**二维码插件**

> jquery.qrcode.js  [https://github.com/jeromeetie...][https_github.com_jeromeetie...]

**拖拽**

> Draggabilly  [http://www.jq22.com/jquery-in...][http_www.jq22.com_jquery-in... 6] dragula  
> [https://www.toutiao.com/a6491...][https_www.toutiao.com_a6491...]

**文件上传**

> uploader WebUploader： HTML5 & FLASH 文件上传  
> [https://github.com/fex-team/w...][https_github.com_fex-team_w...]

**代码高亮**

> hightlightokayNav  [https://highlightjs.org/][https_highlightjs.org]

**前端国际化**

> i18n i18next  [https://github.com/i18next/i1...][https_github.com_i18next_i1...] vue-i18n  
> [https://github.com/kazupon/vu...][https_github.com_kazupon_vu...]  
> 前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”：  
> [http://www.cnblogs.com/landea...][http_www.cnblogs.com_landea...]  
> 基于jQuery.i18n.properties 实现前端页面的资源国际化  
> [https://blog.csdn.net/aixiaoy...][https_blog.csdn.net_aixiaoy...]

**地图**

> 百度地图  [http://lbsyun.baidu.com/][http_lbsyun.baidu.com] 谷歌地图  
> [http://www.runoob.com/googlea...][http_www.runoob.com_googlea...] 高德地图  
> [https://lbs.amap.com/][https_lbs.amap.com] 腾讯地图  [https://lbs.qq.com/][https_lbs.qq.com]

**网页即时通讯**

> LayIM  [http://layim.layui.com/][http_layim.layui.com] 闲聊么  [https://www.xianliao.me/][https_www.xianliao.me]

**数据可视化**

> ECharts  [http://echarts.baidu.com/inde...][http_echarts.baidu.com_inde...] 阿里云 DataV

**PDF 阅读器**

> [https://github.com/mozilla/pd...][https_github.com_mozilla_pd...]

**主题色提取**

> RGBaster  [https://github.com/briangonza...][https_github.com_briangonza...] Color Thief  
> vibrant.js

**前端存储**

> ustbhuangyi/storage： 封装了sessionStorage和localStorage  
> [https://github.com/ustbhuangy...][https_github.com_ustbhuangy... 2] store.js 本地存储localstorage的封装  
> [https://github.com/jaywcjlove...][https_github.com_jaywcjlove...] localForage  
> [https://github.com/localForag...][https_github.com_localForag...]

**数据 Mock**

> Easy Mock  [https://github.com/easy-mock/...][https_github.com_easy-mock_...] Mockjs 生成任意随机数据，拦截  
> Ajax 请求  [http://mockjs.com/][http_mockjs.com] json-server + fakerjs  
> [https://github.com/typicode/j...][https_github.com_typicode_j...]

**分享**

> bShare QQ分享组件 百度分享

**评论**

> Gitalk gitment 畅言 来必力

**其他**

> IE浏览器版本过低提示插件IEalert.js  [http://www.jqueryfuns.com/res...][http_www.jqueryfuns.com_res...]  
> lyric-parser - QQ音乐歌词解析  [https://github.com/ustbhuangy...][https_github.com_ustbhuangy... 3]  
> holder.js - 图片占位符插件  [https://github.com/imsky/holder][https_github.com_imsky_holder]  
> jQuery放大镜插件jqzoom.js  [http://www.jq22.com/jquery-in...][http_www.jq22.com_jquery-in... 7] Zooming –  
> JavaScript图片缩放库  [http://www.dowebok.com/204.html][http_www.dowebok.com_204.html]

转自  [https://segmentfault.com/a/1190000016981118][https_segmentfault.com_a_1190000016981118]

[bVbjpHx_w_800_h_200]: /images/20210726/fa93435ac9dd4148b0486f92cbe71551.png
[https_github.com_lodash_lodash]: https://github.com/lodash/lodash
[https_underscorejs.org]: https://underscorejs.org/
[https_github.com_ramda_ramda]: https://github.com/ramda/ramda
[https_github.com_proYang_ou...]: https://github.com/proYang/outils
[https_daneden.github.io_ani...]: https://daneden.github.io/animate.css/
[http_animejs.com]: http://animejs.com/
[https_github.com_IanLunn_Hover]: https://github.com/IanLunn/Hover
[https_github.com_matthieua_WOW]: https://github.com/matthieua/WOW
[https_github.com_miniMAC_magic]: https://github.com/miniMAC/magic
[https_github.com_fians_Waves]: https://github.com/fians/Waves
[https_github.com_visionmedi...]: https://github.com/visionmedia/move.js
[https_github.com_cubiq_iscroll]: https://github.com/cubiq/iscroll
[https_github.com_ustbhuangy...]: https://github.com/ustbhuangyi/better-scroll
[http_www.mescroll.com_api.html]: http://www.mescroll.com/api.html
[http_www.jq22.com_jquery-in...]: http://www.jq22.com/jquery-info1890
[http_www.dowebok.com_188.html]: http://www.dowebok.com/188.html
[https_www.swiper.com.cn]: https://www.swiper.com.cn/
[http_eux.baidu.com_iSlider_...]: http://eux.baidu.com/iSlider/demo/index_chinese.html
[https_github.com_binnng_sli...]: https://github.com/binnng/slip.js
[http_owlcarousel2.github.io...]: http://owlcarousel2.github.io/OwlCarousel2/
[http_www.jq22.com_jquery-in... 1]: http://www.jq22.com/jquery-info406
[https_github.com_webslides_...]: https://github.com/webslides/webslides/
[http_www.jq22.com_jquery-in... 2]: http://www.jq22.com/jquery-info889
[http_www.jq22.com_jquery-in... 3]: http://www.jq22.com/jquery-info1124
[http_layer.layui.com]: http://layer.layui.com/
[http_bootboxjs.com]: http://bootboxjs.com/
[http_www.jq22.com_jquery-in... 4]: http://www.jq22.com/jquery-info4822
[http_www.h-ui.net_easydialo...]: http://www.h-ui.net/easydialog-v2.0/index.html
[http_www.htmleaf.com_jQuery...]: http://www.htmleaf.com/jQuery/Lightbox-Dialog/201609123990.html
[https_github.com_sciactive_...]: https://github.com/sciactive/pnotify
[https_sciactive.com_pnotify]: https://sciactive.com/pnotify/
[http_www.jq22.com_jquery-in... 5]: http://www.jq22.com/jquery-info9193
[https_select2.org]: https://select2.org/
[https_github.com_ustbhuangy... 1]: https://github.com/ustbhuangyi/picker
[http_fengyuanchen.github.io...]: http://fengyuanchen.github.io/distpicker/
[http_www.jq22.com_demo_jQue...]: http://www.jq22.com/demo/jQueryDistpicker20160621/
[https_github.com_farbelous_...]: https://github.com/farbelous/bootstrap-colorpicker
[https_www.layui.com_laydate]: https://www.layui.com/laydate/
[http_momentjs.com]: http://momentjs.com/
[https_github.com_moment_moment]: https://github.com/moment/moment
[https_github.com_hustcc_tim...]: https://github.com/hustcc/timeago.js
[https_github.com_chriso_val...]: https://github.com/chriso/validator.js
[https_github.com_jquery-val...]: https://github.com/jquery-validation/jquery-validation
[http_validform.rjboy.cn]: http://validform.rjboy.cn/
[https_github.com_superRayt]: https://github.com/superRaytin/paginationjs
[http_www.wangeditor.com]: http://www.wangeditor.com/
[https_ueditor.baidu.com_web...]: https://ueditor.baidu.com/website/
[http_kindeditor.net_demo.php]: http://kindeditor.net/demo.php
[http_yabwe.github.io_medium...]: http://yabwe.github.io/medium-editor/
[https_simditor.tower.im]: https://simditor.tower.im/
[https_summernote.org]: https://summernote.org/
[https_quilljs.com]: https://quilljs.com/
[https_github.com_ianstormta...]: https://github.com/ianstormtaylor/slate
[https_pandao.github.io_edit...]: https://pandao.github.io/editor.md/
[http_www.treejs.cn_v3_main....]: http://www.treejs.cn/v3/main.php#_zTreeInfo
[https_github.com_tuupola_jq...]: https://github.com/tuupola/jquery_lazyload
[https_www.cnblogs.com_cjc91...]: https://www.cnblogs.com/cjc917/p/7402026.html
[http_www.lanrenzhijia.com_j...]: http://www.lanrenzhijia.com/jquery/1985.html
[https_fengyuanchen.github.i...]: https://fengyuanchen.github.io/viewerjs/
[http_www.dowebok.com_204.html]: http://www.dowebok.com/204.html
[http_chimee.org]: http://chimee.org/
[https_juejin.im_entry_5a02b...]: https://juejin.im/entry/5a02b480f265da43144020b1
[http_www.jplayer.cn]: http://www.jplayer.cn/
[https_juejin.im_post_596f53...]: https://juejin.im/post/596f536d51882526337caf15
[https_dogeek.net]: https://dogeek.net/
[https_github.com_chiruom_Da...]: https://github.com/chiruom/DanmuPlayer
[https_github.com_chiruom_jq...]: https://github.com/chiruom/jquery.danmu.js
[https_github.com_chenjianfa...]: https://github.com/chenjianfang/scroxt
[https_github.com_zenorocha_...]: https://github.com/zenorocha/clipboard.js/
[https_github.com_zeroclipbo...]: https://github.com/zeroclipboard/zeroclipboard
[https_github.com_jeromeetie...]: https://github.com/jeromeetienne/jquery-qrcode
[http_www.jq22.com_jquery-in... 6]: http://www.jq22.com/jquery-info293
[https_www.toutiao.com_a6491...]: https://www.toutiao.com/a6491847196890104334
[https_github.com_fex-team_w...]: https://github.com/fex-team/webuploader/
[https_highlightjs.org]: https://highlightjs.org/
[https_github.com_i18next_i1...]: https://github.com/i18next/i18next
[https_github.com_kazupon_vu...]: https://github.com/kazupon/vue-i18n
[http_www.cnblogs.com_landea...]: http://www.cnblogs.com/landeanfen/p/7581609.html
[https_blog.csdn.net_aixiaoy...]: https://blog.csdn.net/aixiaoyang168/article/details/49336709
[http_lbsyun.baidu.com]: http://lbsyun.baidu.com/
[http_www.runoob.com_googlea...]: http://www.runoob.com/googleapi/google-maps-api-key.html
[https_lbs.amap.com]: https://lbs.amap.com/
[https_lbs.qq.com]: https://lbs.qq.com/
[http_layim.layui.com]: http://layim.layui.com/
[https_www.xianliao.me]: https://www.xianliao.me/
[http_echarts.baidu.com_inde...]: http://echarts.baidu.com/index.html
[https_github.com_mozilla_pd...]: https://github.com/mozilla/pdf.js
[https_github.com_briangonza...]: https://github.com/briangonzalez/rgbaster.js
[https_github.com_ustbhuangy... 2]: https://github.com/ustbhuangyi/storage
[https_github.com_jaywcjlove...]: https://github.com/jaywcjlove/store.js
[https_github.com_localForag...]: https://github.com/localForage/localForage
[https_github.com_easy-mock_...]: https://github.com/easy-mock/easy-mock
[http_mockjs.com]: http://mockjs.com/
[https_github.com_typicode_j...]: https://github.com/typicode/json-server
[http_www.jqueryfuns.com_res...]: http://www.jqueryfuns.com/resource/455
[https_github.com_ustbhuangy... 3]: https://github.com/ustbhuangyi/lyric-parser
[https_github.com_imsky_holder]: https://github.com/imsky/holder
[http_www.jq22.com_jquery-in... 7]: http://www.jq22.com/jquery-info648
[https_segmentfault.com_a_1190000016981118]: https://segmentfault.com/a/1190000016981118