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