分享

2020年让人难以置信的50款前端新工具:JavaScript插件篇(一)

 highoo 2020-02-07

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

1、autoComplete.js

官网地址链接

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

原生javaScript脚本

零依赖

简单易用

体积小,压缩版仅6KB

功能丰富

可定制

2、indigo-player

官网地址链接

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

支持选择不同分辨率的视频

支持字幕功能

支持倍速播放

支持画中画播放

支持视频中添加图片和文字

支持 MPEG-DASH 流媒体格式( MPEG-DASH + DRM )

支持 HLS (HTTP Live Streaming) 动态码率自适应技术

支持穿插谷歌和自定义广告

根据你的网络调整自适应的分辨率

自定义视频封面

自定义键盘功能键控制播放器

支持更改视频容器的长款比例

初始自定义视频播放的位置

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

3、simple-keyboard

官网地址链接

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

方便你集成到 Angular, React, Vue 和 Vanilla 项目中

灵活的设置参数和方法,定制个性化的软键盘

基于弹性盒子布局,易于集成和设计

支持外挂个性化插件,比如自动更正、按照特定格式输入( Input Mask )

支持自定义键盘样式,自定义特殊键盘,以及个性化的布局

支持多键盘实例

多设备支持:PC端全键盘、手机端键盘(安卓、IOS)

支持背景暗黑样式

支持数字键盘

国际化支持,比如法文、日文、俄语等

4、fslightbox.js

官网地址链接

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

5、Rellax.js

官网地址链接

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

6、FrenchKiss.js

官网地址链接

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

7、Moveable

官网地址链接

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

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

8、Hotkey

官网地址链接

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

9、Freezeframe.js

官网地址链接

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

10、pagemap

官网地址链接

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

11、lax.js

官网地址链接

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

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

小节

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

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多