前端之所以有趣,就是每年有比较多新奇的插件和工具让我们去探索和研究。我们在开发前端应用时,自然少不了去找一些第三方插件帮助我们提高开发效率。本文给大家介绍的这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、测试及数据工具,敬请期待...

扫码前端达人