常言道“你不必重新發明輪子”。第三方庫它可以幫助您以簡單的方式編寫復雜且耗時的功能，一個好的項目應當使用一些優秀的庫，下面我推薦下，在你的下個項目中，建議用上這7 個有用的庫。
Video.js
Video.js 是一個基于 html5 的視頻播放器庫。它支持大多數流行的視頻格式，并且可以在多個平臺和瀏覽器上使用。
這是在 Github 上擁有超過 34k 顆星的星數最多的庫之一。正如您從名稱中猜到的那樣，這個庫提供了一個為 HTML5 世界從頭開始構建的網絡視頻播放器。它支持 HTML5 視頻和媒體源擴展，以及其他播放技術，如 YouTube 和 Vimeo（通過插件）。它支持在臺式機和移動設備上播放視頻。該項目于 2010 年年中啟動，該播放器現已在超過 700,000 個網站上使用。
使用 Video.js 的基本步驟如下：
- 在頁面中引入 Video.js 的 css 和 JS 文件。
- 在 HTML 中創建一個 div 元素，并設置一個類名為 "video-js"。
- 在 div 元素中添加一個 video 元素，并在其中設置視頻的來源。
- 在 JAVAScript 中通過 Video.js 提供的 API 來控制視頻的播放、暫停、靜音等操作。
<link href="path/to/video-js.css" rel="stylesheet">
<script src="path/to/video.js"></script>
<div class="video-js">
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup='{}'>
<source src="MY_VIDEO.mp4" type='video/mp4'>
<source src="MY_VIDEO.webm" type='video/webm'>
</video>
</div>
var myPlayer = videojs('my-video');
myPlayer.play(); //播放
myPlayer.pause(); //暫停
myPlayer.muted(true); //靜音
更多細節可以參考 Video.js 的官方文檔：http://docs.videojs.com/。
Novu
構建通知系統很復雜。起初，這似乎只是發送一封電子郵件，但實際上，這只是一個開始。今天的用戶期望通過電子郵件、SMS、推送、聊天和其他渠道獲得多渠道通信體驗。每天都會彈出一個不斷增長的提供商列表，并且通知會圍繞代碼傳播。這個庫的目標是簡化通知并為開發人員提供工具來在系統和用戶之間創建有意義的通信。它在 GitHub 上擁有超過 14k 顆星。
import { Novu } from '@novu/node';
const novu = new Novu(process.env.NOVU_API_KEY);
awAIt novu.trigger('<TRIGGER_NAME>', {
to: [
{
subscriberId: '<UNIQUE_IDENTIFIER>',
email: 'john1@doemail.com',
firstName: 'John',
lastName: 'Doe',
},
],
payload: {
name: 'Hello World',
organization: {
logo: 'https://hAppycorp.com/logo.png',
},
},
});
Mousetrap
如果您必須在您的應用程序中處理鍵盤，那么這對您來說是一個很好的資源。這是一個簡單的庫，可以幫助您處理鍵盤快捷鍵。它支持特定鍵、鍵盤組合或鍵序列上的按鍵、按下和按下事件。它壓縮后約 2kb，壓縮后約 4.5kb，并且沒有外部依賴性。這個庫在 GitHub 上有超過 11k 顆星。
使用 Mousetrap 的基本步驟如下：
- 引入 Mousetrap 的 JS 文件。
- 使用 Mousetrap.bind() 或 Mousetrap.bindGlobal() 方法綁定鍵盤快捷鍵和回調函數。
- 在回調函數中定義鍵盤快捷鍵被按下時的操作。
示例代碼如下：
<script src="path/to/mousetrap.js"></script>
<script>
Mousetrap.bind('ctrl+shift+a', function() {
alert('ctrl+shift+a');
});
Mousetrap.bind('ctrl+shift+b', function() {
alert('ctrl+shift+b');
});
</script>
這個庫可以幫助你快捷地實現鍵盤快捷鍵，更多細節可以參考 Mousetrap 的官方文檔：
https://craig.is/killing/mice
Barba
這是一個小型（7kb 縮小和壓縮）且易于使用的庫，可幫助您在網站頁面之間創建流暢和平滑的過渡。它有助于減少頁面之間的延遲，最大限度地減少瀏覽器 HTTP 請求并增強用戶的網絡體驗。它在 GitHub 上擁有超過 10k 顆星。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BarbaJS legacy example</title>
</head>
<body>
<!-- define the wrapper and the container -->
<div data-barba="wrapper">
<div data-barba="container" data-barba-namespace="page-a">
<h1>Home</h1>
</div>
</div>
<!-- load barba (UMD version) -->
<script src="https://unpkg.com/@barba/core"></script>
<!-- load gsap animation library (minified version) -->
<script src="https://unpkg.com/gsap@latest/dist/gsap.min.js"></script>
<!-- init barba with a simple opacity transition -->
<script type="text/JavaScript">
barba.init({
transitions: [{
name: 'opacity-transition',
leave(data) {
return gsap.to(data.current.container, {
opacity: 0
});
},
enter(data) {
return gsap.from(data.next.container, {
opacity: 0
});
}
}]
});
</script>
</body>
</html>
dc.js
dc.js 是一個用于創建交互式數據可視化的 JavaScript 庫。它是基于 D3.js 庫的一個擴展，提供了一些高級功能和封裝，使得創建可視化更加簡單和高效。
dc.js 支持多種類型的圖表，如條形圖，餅圖，散點圖，線圖等，并且支持多維數據篩選和縮放。
使用 dc.js 的基本步驟如下：
- 引入 dc.js 和 D3.js 的 JavaScript 文件
- 準備數據
- 創建圖表
- 配置圖表
- 渲染圖表
示例代碼如下：
// 引入 dc.js 和 d3.js
import * as dc from 'dc';
import * as d3 from 'd3';
// 準備數據
const data = [
{name: "A", value: 10},
{name: "B", value: 20},
{name: "C", value: 30}
];
// 創建圖表
const chart = dc.barChart("#chart");
// 配置圖表
chart
.width(300)
.height(200)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.y(d3.scaleLinear().domain([0, 30]))
.dimension(data)
.group(data);
// 渲染圖表
chart.render();
Time ago
Timeago是一個JavaScript庫，它可以在網頁上將時間顯示為簡短的形式，例如“3小時前”或“1個月前”。這可以幫助您在網頁上創建動態時間戳。
使用Timeago非常簡單，您只需要在網頁上引用timeago.js文件，然后在需要顯示時間的元素上添加一個"timeago"類。
1、調用也十分簡單，首先引入timeago.js文件
<script src="//unpkg.com/timeago.js"></script>
2、然后在需要顯示時間的標簽上面添加datetime屬性
<div class="timeago" datetime="2016-06-30 09:20:00"></div>
3、最后在javascript里面調用timeago()即可
let timeagoInstance = timeago();
timeagoInstance.render(document.querySelectorAll('time'));
4、如果你需要更改語言，可以在調用timeago的時候傳入語言的參數
let timeagoInstance = timeago('zh_CN');
timeagoInstance.render(document.querySelectorAll('time'));
這里給出的是最簡單的用法，更多用法可以參考文檔
js-xss
顧名思義，這個庫用于過濾用戶的輸入以防止 XSS 攻擊。它使用白名單指定的配置清理不受信任的 HTML（以防止 XSS）。它在 GitHub 上擁有超過 4.5k 顆星。XSS 攻擊是指攻擊者利用網站的漏洞，在用戶瀏覽器中插入惡意腳本。
使用 js-xss 的方法如下:
1、引入js-xss文件
<script src="xss.min.js"></script>
2、創建xss對象
var xss = new FilterXSS({
whiteList: {...}
});
3、調用xss對象的process函數，傳入需要處理的字符串即可
var html = xss.process('<script>alert("XSS")</script>');
console.log(html); // 輸出 <script>alert("XSS")</script> 被過濾掉了
需要注意的是，默認的白名單可能不能滿足所有需求，因此開發者可以根據自己的需要自定義白名單。
這個庫是非常有用的，通過這個庫可以很好的防止XSS攻擊，建議在處理用戶輸入的數據的時候使用。
來源：
https://medium.com/javascript-in-plain-english/7-useful-javascript-libraries-you-can-use-in-your-next-project-6bd161757135作者：Farhan Tanvir
注：非直譯，有添加部分
