2020年你應該關注這50款前端熱門工具，JavaScript插件篇（一）

前端之因此有趣，就是每一年有比較多新奇的插件和工具讓咱們去探索和研究。咱們在開發前端應用時，天然少不了去找一些第三方插件幫助咱們提升開發效率。本文給你們介紹的這50款新工具，都是至關的新，都是去年的新項目，時間不會超過1年，但願經過個人介紹，你能找到適合的工具，應用到項目中。

一、autoComplete.js

官網地址：https://tarekraafat.github.io/autoComplete.js/

一款原生零依賴輕巧的自動建議 JavaScript 插件，目前 github star 2.6k ,該插件可以很方便的集成到你的項目中，使用起來簡單易用,此插件主要有如下特色：

• 原生javaScript腳本
• 零依賴
• 簡單易用
• 體積小，壓縮版僅6KB
• 功能豐富
• 可定製

二、indigo-player

官網地址：https://github.com/matvp91/indigo-player

高度可擴展的現代JavaScript視頻播放器，一款現代感十足的 javaScript 播放器插件，這款播放器功能十分齊全，能知足你大部分的需求，甚至超出你的預期，使用十分簡單，開箱即用。此插件主要有如下特色，足夠讓你心動：

• 支持選擇不一樣分辨率的視頻
• 支持字幕功能
• 支持倍速播放
• 支持畫中畫播放
• 支持視頻中添加圖片和文字
• 支持 MPEG-DASH 流媒體格式（ MPEG-DASH + DRM ）
• 支持 HLS (HTTP Live Streaming) 動態碼率自適應技術
• 支持穿插谷歌和自定義廣告
• 根據你的網絡調整自適應的分辨率
• 自定義視頻封面
• 自定義鍵盤功能鍵控制播放器
• 支持更改視頻容器的長款比例
• 初始自定義視頻播放的位置

還有更多的功能，等待着你來挖掘

三、simple-keyboard

官網地址：https://virtual-keyboard.js.org/

一款零依賴庫、性能高、支持自定義擴展的軟鍵盤插件，幫你快速構建功能豐富的Web應用。此插件主要有如下特色：

• 方便你集成到 Angular, React, Vue 和 Vanilla 項目中
• 靈活的設置參數和方法，定製個性化的軟鍵盤
• 基於彈性盒子佈局，易於集成和設計
• 支持外掛個性化插件，好比自動更正、按照特定格式輸入（ Input Mask ）
• 支持自定義鍵盤樣式，自定義特殊鍵盤，以及個性化的佈局
• 支持多鍵盤實例
• 多設備支持：PC端全鍵盤、手機端鍵盤(安卓、IOS)
• 支持背景暗黑樣式
• 支持數字鍵盤
• 國際化支持，好比法文、日文、俄語等

四、fslightbox.js

官網地址：https://fslightbox.com/

一款原生無需jQuery依賴的圖片幻燈插件，簡單易用，功能強大，支持全屏展現，除了能夠展現圖片，還能夠添加文字和視頻，並支持縮略圖片，同時方便集成到現有項目中，好比react、vue項目。

五、Rellax.js

官網地址：https://github.com/ChrisCavs/rallax.js

一款零依賴純原生 JavaScript 插件，能夠幫你快速實現滾動視差效果。該插件性能出色及其易用的API，能夠很容易使目標HTML元素實現視差效果，而且使用鏈式語法輕鬆實現回調（when方法），核心方法包含：start/stop, speed 等。

六、FrenchKiss.js

官網地址：https://github.com/koala-interactive/frenchkiss.js

FrenchKiss.js是一個用JavaScript編寫的快速，輕量級的i18n庫，可在瀏覽器和 NodeJS 環境中使用。 它爲處理國際化提供了一個簡單且便捷的解決方案。到目前爲止，FrenchKiss是目前最快的i18n JS軟件包，經過JIT編譯翻譯並運行基準測試，它的工做速度比任何其餘相似的插件快5至1000倍！

七、Moveable

官網地址：https://daybrush.com/moveable/

Moveable 是一款原生零依賴的 javaScript 插件，使用這款插件，可讓指定的 HTML 元素 隨意拖拽 、調整大小、縮放、旋轉 、變形扭曲、分組，甚至拖拽時顯示設計參照線。可謂是一款功能強大的拖拽插件，幫你實現複雜的 WEB 交互應用。

這款插件很方便與現有項目集成，支持原生項目集成、React、 Preact、 Angular、 Vue、 Svelte等前端框架集成。

八、Hotkey

官網地址：https://github.com/github/hotkey

一款零依賴的設置網頁元素快捷鍵操做的 javaScript 插件，這個插件的特色就是零依賴，使用起來簡單 ，能夠給連接、表單、點擊事件設置快捷鍵 。

九、Freezeframe.js

官網地址：https://github.com/ctrl-freaks/freezeframe.js/

一款用於播放 gif 圖片的 JavaScript 插件, 這款插件的特色支持鼠標移動、點擊、移動觸摸和自定義事件觸發 gif 圖片的播放，除了這些特色，其大小隻有68KB，零依賴，很方便集成到你的原生、vue 或 react 項目中。

十、pagemap

官網地址：https://github.com/lrsjng/pagemap

一款適合給長網頁作迷你版縮略地圖的 javaScript插件，不知道你們是否有這樣的體驗，若是你的網頁內容過長，滑動網頁是否是特別費勁呢，尤爲網頁比較長的時候，你能夠用這個插件，在網頁的右上角作個迷你版的網頁縮略地圖，經過滑動這個地圖，快速到達網頁的某部分。

十一、lax.js

官網地址：https://github.com/alexfoxy/laxxx

一款原生零依賴的製做跟隨頁面滑動的 JavaScript 動畫插件，這款插件很是的輕巧，壓縮版大小隻有3kb，零依賴的原生插件，當你滑動頁面時，幫助你建立酷炫的動畫效果，好比滾動視差、變形移動等基本的動畫效果，響應式兼容方面，好比手機端也有不錯的支持，使用這個插件可讓你的網站馬上鮮活生動起來。

這款插件的特色，除了你可使用插件默認集成的動畫屬性，你還能夠自定義更加豐富的動畫屬性。同時方便你和現有項目進行集成，好比原生項目、react、react hooks、vue、ember。

小節

關於 JavaScript 的插件就分享到這裏，若是你喜歡個人分享，麻煩給個關注、點贊加轉發哦，你的支持，就是我分享的動力，在下篇文章我將和你們分享一些關於CSS、HTML、測試及數據工具，敬請期待...

掃碼關注前端達人公衆號