2020年你应该关注这50款前端热门工具，JavaScript插件篇（一）

前端之所以有趣，就是每年有比较多新奇的插件和工具让我们去探索和研究。我们在开发前端应用时，自然少不了去找一些第三方插件帮助我们提高开发效率。本文给大家介绍的这50款新工具，都是相当的新，都是去年的新项目，时间不会超过1年，希望通过我的介绍，你能找到适合的工具，应用到项目中。

1、autoComplete.js

官网地址：https://tarekraafat.github.io/autoComplete.js/

一款原生零依赖轻巧的自动建议 JavaScript 插件，目前 github star 2.6k ,该插件能够很方便的集成到你的项目中，使用起来简单易用,此插件主要有以下特点：

• 原生javaScript脚本
• 零依赖
• 简单易用
• 体积小，压缩版仅6KB
• 功能丰富
• 可定制

2、indigo-player

官网地址：https://github.com/matvp91/indigo-player

高度可扩展的现代JavaScript视频播放器，一款现代感十足的 javaScript 播放器插件，这款播放器功能十分齐全，能满足你大部分的需求，甚至超出你的预期，使用十分简单，开箱即用。此插件主要有以下特点，足够让你心动：

• 支持选择不同分辨率的视频
• 支持字幕功能
• 支持倍速播放
• 支持画中画播放
• 支持视频中添加图片和文字
• 支持 MPEG-DASH 流媒体格式（ MPEG-DASH + DRM ）
• 支持 HLS (HTTP Live Streaming) 动态码率自适应技术
• 支持穿插谷歌和自定义广告
• 根据你的网络调整自适应的分辨率
• 自定义视频封面
• 自定义键盘功能键控制播放器
• 支持更改视频容器的长款比例
• 初始自定义视频播放的位置

还有更多的功能，等待着你来挖掘

3、simple-keyboard

官网地址：https://virtual-keyboard.js.org/

一款零依赖库、性能高、支持自定义扩展的软键盘插件，帮你快速构建功能丰富的Web应用。此插件主要有以下特点：

• 方便你集成到 Angular, React, Vue 和 Vanilla 项目中
• 灵活的设置参数和方法，定制个性化的软键盘
• 基于弹性盒子布局，易于集成和设计
• 支持外挂个性化插件，比如自动更正、按照特定格式输入（ Input Mask ）
• 支持自定义键盘样式，自定义特殊键盘，以及个性化的布局
• 支持多键盘实例
• 多设备支持：PC端全键盘、手机端键盘(安卓、IOS)
• 支持背景暗黑样式
• 支持数字键盘
• 国际化支持，比如法文、日文、俄语等

4、fslightbox.js

官网地址：https://fslightbox.com/

一款原生无需jQuery依赖的图片幻灯插件，简单易用，功能强大，支持全屏展示，除了可以展示图片，还可以添加文字和视频，并支持缩略图片，同时方便集成到现有项目中，比如react、vue项目。

5、Rellax.js

官网地址：https://github.com/ChrisCavs/rallax.js

一款零依赖纯原生 JavaScript 插件，可以帮你快速实现滚动视差效果。该插件性能出色及其易用的API，可以很容易使目标HTML元素实现视差效果，并且使用链式语法轻松实现回调（when方法），核心方法包含：start/stop, speed 等。

6、FrenchKiss.js

官网地址：https://github.com/koala-interactive/frenchkiss.js

FrenchKiss.js是一个用JavaScript编写的快速，轻量级的i18n库，可在浏览器和 NodeJS 环境中使用。 它为处理国际化提供了一个简单且便捷的解决方案。到目前为止，FrenchKiss是目前最快的i18n JS软件包，通过JIT编译翻译并运行基准测试，它的工作速度比任何其他类似的插件快5至1000倍！

7、Moveable

官网地址：https://daybrush.com/moveable/

Moveable 是一款原生零依赖的 javaScript 插件，使用这款插件，可以让指定的 HTML 元素 随意拖拽 、调整大小、缩放、旋转 、变形扭曲、分组，甚至拖拽时显示设计参照线。可谓是一款功能强大的拖拽插件，帮你实现复杂的 WEB 交互应用。

这款插件很方便与现有项目集成，支持原生项目集成、React、 Preact、 Angular、 Vue、 Svelte等前端框架集成。

8、Hotkey

官网地址：https://github.com/github/hotkey

一款零依赖的设置网页元素快捷键操作的 javaScript 插件，这个插件的特点就是零依赖，使用起来简单 ，可以给链接、表单、点击事件设置快捷键 。

9、Freezeframe.js

官网地址：https://github.com/ctrl-freaks/freezeframe.js/

一款用于播放 gif 图片的 JavaScript 插件, 这款插件的特点支持鼠标移动、点击、移动触摸和自定义事件触发 gif 图片的播放，除了这些特点，其大小只有68KB，零依赖，很方便集成到你的原生、vue 或 react 项目中。

10、pagemap

官网地址：https://github.com/lrsjng/pagemap

一款适合给长网页做迷你版缩略地图的 javaScript插件，不知道大家是否有这样的体验，如果你的网页内容过长，滑动网页是不是特别费劲呢，尤其网页比较长的时候，你可以用这个插件，在网页的右上角做个迷你版的网页缩略地图，通过滑动这个地图，快速到达网页的某部分。

11、lax.js

官网地址：https://github.com/alexfoxy/laxxx

一款原生零依赖的制作跟随页面滑动的 JavaScript 动画插件，这款插件非常的轻巧，压缩版大小只有3kb，零依赖的原生插件，当你滑动页面时，帮助你创建酷炫的动画效果，比如滚动视差、变形移动等基本的动画效果，响应式兼容方面，比如手机端也有不错的支持，使用这个插件可以让你的网站立刻鲜活生动起来。

这款插件的特点，除了你可以使用插件默认集成的动画属性，你还可以自定义更加丰富的动画属性。同时方便你和现有项目进行集成，比如原生项目、react、react hooks、vue、ember。

小节

关于 JavaScript 的插件就分享到这里，如果你喜欢我的分享，麻烦给个关注、点赞加转发哦，你的支持，就是我分享的动力，在下篇文章我将和大家分享一些关于CSS、HTML、测试及数据工具，敬请期待...