前端之所以有趣，就是每年有比較多新奇的插件和工具值得我們去探索和研究。我們在開發前端應用時，自然少不了去找一些第三方插件幫助我們提高開發效率。本文給大家介紹的這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、測試及數據工具，敬請期待...

專注分享當下最實用的前端技術。關注前端達人，與達人一起學習進步！

長按關注"前端達人"

總結

以上是生活随笔為你收集整理的2020年你应该关注这50款前端热门工具，JavaScript插件篇（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。