前端 好用的插件随记（持续更新）

web工具

1.scrollReveal.js – 让页面滚动显示动画JS

官网：https://scrollrevealjs.org/

github地址：https://github.com/scrollreveal/scrollreveal

好的博客：https://blog.csdn.net/weixin_39801446/article/details/82143296

2.push.js  世界上最通用的桌面通知框架

官网：https://pushjs.org/#

github：https://github.com/Nickersoft/push.js 

好的博客：https://www.jianshu.com/p/3e4a14fe5e78

3.enquire.js  —— js判断 浏览器环境 

官网：http://wicky.nillia.ms/enquire.js/#v2.0.0

github：https://github.com/wickynilliams/enquire.js/

4.NProgress.js  —— 网站加载进度条

官网：http://ricostacruz.com/nprogress/

github：https://github.com/rstacruz/nprogress/

5.driver.js —— 前端操作引导js工具

官网:https://kamranahmed.info/driver.js/

github:https://github.com/kamranahmedse/driver.js

6.Editor.js ——— 前端编辑器工具

官网:https://editorjs.io/

github:https://github.com/codex-team/editor.js

7.html2canvas ——— 这个很酷的脚本获取页面中的元素和样式，并通过呈现DOM的副本来获取“屏幕截图”。由于屏幕截图是基于DOM的，它们可能不是100%准确，但是本库仍然是调试和自动化测试的一个很好的工具

官网:http://html2canvas.hertzen.com/

github:https://github.com/niklasvh/html2canvas

8. Choices —————— 轻量级库，用于制作高度可自定义的选择框、文本区域和其他输入表单。类似于select2和selectize，但没有依赖jquery。

官网:https://joshuajohnson.co.uk/Choices/

github:https://github.com/jshjohnson/Choices

9.Indigo Player ———— 高度扩展，现代的javascript视频播放器。支持MPEG-Dash / HLS / MPEG-4，并构建在HTML5视频元素之上。视频播放器具有开箱即用的功能，如字幕、缩略图、质量选择等。高度可扩展、现代化，并为大多数流行的视频格式和编解码器提供支持。

官网:https://matvp91.github.io/indigo-player/#/

github:https://github.com/matvp91/indigo-player

 

9.Twemoji ———— Twitter团队提供的强大表情符号库，在所有平台上提供标准的Unicode emoji支持。有了超过3000个emojis和一个稳定的API，当你想将emojis添加到你的应用程序中时，它是一个完美的解决方案。

官网:https://twemoji.twitter.com/

github:https://github.com/twitter/twemoji

 

10.stepper ———— 非常好的数字步进控件，非常适合上/下式的增减控制或其他计数器控件。点击箭头会产生非常帮的动画与光滑的CSS效果。

github:https://github.com/alikinvv/stepper

11.Dropcss ———— 彻底的CSS清理程序，它将获取HTML和CSS，并只返回实际使用的样式。它删除所有未使用的样式块、重复的选择器、@keyframes等等。高度优化，速度极快。

github:https://github.com/leeoniya/dropcss

12.React Lodon ———— React组件，允许您使用一系列动态生成的图像来使网站的favicon图标产生动画。这个效果可以用作进度或加载指示器，也可以作为一个很酷的小动画，使您的页面脱颖而出。

官网:https://foreseaz.github.io/react-loadcon/

github:https://github.com/foreseaz/react-loadcon

13.twemoji————一个简单的库，可在所有平台上提供标准的Unicode 表情符号支持。Twemoji v11.0符合 Unicode 11.0规范，并支持表情符号11.0草案规范 ，Twemoji 库为2841个表情符号提供支持，包括肤色和性别修饰语。

官网： https://twemoji.twitter.com/

github：https://github.com/twitter/twemoji

 

 

 

 

绘图工具

1.pixijs  —— 2D绘图工具(3D也行但是不专业)

官网：https://www.pixijs.com/

github：https://github.com/pixijs/pixi.js

2.Fabric.js —— 2D绘图工具(具有一定交互性的框架)

tip:如果遇到问题,可以github提issue,老外服务态度很好,开源nice

官网：http://fabricjs.com/

github：https://github.com/fabricjs/fabric.js

3.dat.gui —— 绘图调试工具

介绍：http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

github：https://github.com/dataarts/dat.gui

4.stats.js —— 绘图渲染监控

介绍：http://mrdoob.github.io/stats.js/

github：https://github.com/mrdoob/stats.js

 

React 工具

1. Ant Motion – 阿里的开源动效库（滚动页面动画，css动画，队列动画，轮播动画，字体动画）

官网：https://motion.ant.design/index-cn

github地址：https://github.com/ant-design/ant-motion/

2.Connected React Router – redux方式进行路由操作（一般不需要这个库）

github地址：https://github.com/supasate/connected-react-router

3.react-intl – react国际化

文档：https://github.com/yahoo/react-intl/wiki

github地址： https://github.com/yahoo/react-intl

界上最通用的桌面通知框架达到1.0

世界上最通用的桌面通知框架达到1.0

完全支持ES2015，第三方插件等等

世界上最通用的桌面通知框架达到1.0

完全支持ES2015，第三方插件等等

世界上最通用的桌面通知框架达到1.0

完全支持ES2015，第三方插件等等