专栏首页前端达人2020年你应该关注这50款前端热门工具,JavaScript插件篇(一)

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、测试及数据工具,敬请期待...

专注分享当下最实用的前端技术。关注前端达人,与达人一起学习进步!

本文分享自微信公众号 - 前端达人(frontend84),作者:前端达人

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2020年你应该关注这50款前端热门工具,JavaScript插件篇(一)

    前端之所以有趣,就是每年有比较多新奇的插件和工具让我们去探索和研究。我们在开发前端应用时,自然少不了去找一些第三方插件帮助我们提高开发效率。本文给大家介绍的这5...

    前端达人
  • 「vue基础」Vue相关构建工具和基础插件简介

    像其他框架一样,Vue 的生态也有很多一系列的工具,通过工具,可以快速帮我们构建项目、发布项目、部署打包等,方便我们调试,避免不必要的Bug等。本篇文章我将重点...

    前端达人
  • 【ES6基础】Symbol介绍:独一无二的值

    ES6之前我们都清楚JS有六种数据类型:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object...

    前端达人
  • 2020年你应该关注这50款前端热门工具,JavaScript插件篇(一)

    前端之所以有趣,就是每年有比较多新奇的插件和工具让我们去探索和研究。我们在开发前端应用时,自然少不了去找一些第三方插件帮助我们提高开发效率。本文给大家介绍的这5...

    前端达人
  • Skywalking系列博客3-Java Agent插件

    •引导插件:在agent的 bootstrap-plugins 目录下•内置插件:在agent的 plugins 目录下•可选插件:在agent的 option...

    用户1516716
  • 萌妹子语音陪你写代码,一个神奇的 VSCode 插件

    最近在 GitHub 发现了一个有趣的 VSCode 插件:Rainbow Fart。在你写代码的时候,可根据关键字播放接近代码含义的语音。

    Enjoy233
  • 推荐个软件:uTools

    更多的内容可以去看一下差评的推文或者官方文档,我这篇文章主要放一下刚用起来就觉得挺不错的一些功能

    yichen
  • 从Elasticsearch的插件实现机制见:如何在Java中实现一个插件化系统

    此外,笔者还对Java的流行插件框架PF4J进行的简单的了解,发现其实现方式和ES比较相似:都是由ClassLoader实现,感兴趣的读者可以自行了解。

    franyang
  • Web前端学习 第4章 jQuery 3 jQuery插件

    jQuery插件就是别人已经开发好弄的,我们直接约会就可以使用。并且基于jQuery制作的,可以实现某些特定的网页效果的js文件(js + css)。

    学习猿地
  • IOS 越狱插件介绍与一点经验

    总体来说,如果你的系统是13.5的话(尚未升级到13.5.1),实际上整个流程比Android的Root还要简单。因为Iphone是我的主力机,为了避免不必要的...

    xuing

扫码关注云+社区

领取腾讯云代金券