下一個(gè)項(xiàng)目，建議使用這七個(gè) JavaScript 庫
Video.js
Video.js 是一個(gè)基于 HTML5 的視頻播放器庫。它支持大多數(shù)流行的視頻格式，并且可以在多個(gè)平臺(tái)和瀏覽器上使用。
這是在 GitHub 上擁有超過 34k 顆星的星數(shù)最多的庫之一。正如您從名稱中猜到的那樣，這個(gè)庫提供了一個(gè)為 HTML5 世界從頭開始構(gòu)建的網(wǎng)絡(luò)視頻播放器。它支持 HTML5 視頻和媒體源擴(kuò)展，以及其他播放技術(shù)，如 YouTube 和 Vimeo（通過插件）。它支持在臺(tái)式機(jī)和移動(dòng)設(shè)備上播放視頻。該項(xiàng)目于 2010 年年中啟動(dòng)，該播放器現(xiàn)已在超過 700,000 個(gè)網(wǎng)站上使用。
使用 Video.js 的基本步驟如下：
- 在頁面中引入 Video.js 的 CSS 和 JS 文件。
- 在 HTML 中創(chuàng)建一個(gè) div 元素，并設(shè)置一個(gè)類名為 "video-js"。
- 在 div 元素中添加一個(gè) video 元素，并在其中設(shè)置視頻的來源。
- 在 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); //靜音更多細(xì)節(jié)可以參考 Video.js 的官方文檔：http://docs.videojs.com/。
Novu
構(gòu)建通知系統(tǒng)很復(fù)雜。起初，這似乎只是發(fā)送一封電子郵件，但實(shí)際上，這只是一個(gè)開始。今天的用戶期望通過電子郵件、SMS、推送、聊天和其他渠道獲得多渠道通信體驗(yàn)。每天都會(huì)彈出一個(gè)不斷增長的提供商列表，并且通知會(huì)圍繞代碼傳播。這個(gè)庫的目標(biāo)是簡化通知并為開發(fā)人員提供工具來在系統(tǒng)和用戶之間創(chuàng)建有意義的通信。它在 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
如果您必須在您的應(yīng)用程序中處理鍵盤，那么這對您來說是一個(gè)很好的資源。這是一個(gè)簡單的庫，可以幫助您處理鍵盤快捷鍵。它支持特定鍵、鍵盤組合或鍵序列上的按鍵、按下和按下事件。它壓縮后約 2kb，壓縮后約 4.5kb，并且沒有外部依賴性。這個(gè)庫在 GitHub 上有超過 11k 顆星。
使用 Mousetrap 的基本步驟如下：
- 引入 Mousetrap 的 JS 文件。
- 使用 Mousetrap.bind() 或 Mousetrap.bindGlobal() 方法綁定鍵盤快捷鍵和回調(diào)函數(shù)。
- 在回調(diào)函數(shù)中定義鍵盤快捷鍵被按下時(shí)的操作。
示例代碼如下：
<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>這個(gè)庫可以幫助你快捷地實(shí)現(xiàn)鍵盤快捷鍵，更多細(xì)節(jié)可以參考 Mousetrap 的官方文檔：https://craig.is/killing/mice。
Barba
這是一個(gè)小型（7kb 縮小和壓縮）且易于使用的庫，可幫助您在網(wǎng)站頁面之間創(chuàng)建流暢和平滑的過渡。它有助于減少頁面之間的延遲，最大限度地減少瀏覽器 HTTP 請求并增強(qiáng)用戶的網(wǎng)絡(luò)體驗(yàn)。它在 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 是一個(gè)用于創(chuàng)建交互式數(shù)據(jù)可視化的 JavaScript 庫。它是基于 D3.js 庫的一個(gè)擴(kuò)展，提供了一些高級(jí)功能和封裝，使得創(chuàng)建可視化更加簡單和高效。
dc.js 支持多種類型的圖表，如條形圖，餅圖，散點(diǎn)圖，線圖等，并且支持多維數(shù)據(jù)篩選和縮放。
使用 dc.js 的基本步驟如下：
- 引入 dc.js 和 D3.js 的 JavaScript 文件
- 準(zhǔn)備數(shù)據(jù)
- 創(chuàng)建圖表
- 配置圖表
- 渲染圖表
示例代碼如下：
// 引入 dc.js 和 d3.js
import * as dc from 'dc';
import * as d3 from 'd3';
// 準(zhǔn)備數(shù)據(jù)
const data = [
{name: "A", value: 10},
{name: "B", value: 20},
{name: "C", value: 30}
];
// 創(chuàng)建圖表
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是一個(gè)JavaScript庫，它可以在網(wǎng)頁上將時(shí)間顯示為簡短的形式，例如“3小時(shí)前”或“1個(gè)月前”。這可以幫助您在網(wǎng)頁上創(chuàng)建動(dòng)態(tài)時(shí)間戳。
使用Timeago非常簡單，您只需要在網(wǎng)頁上引用timeago.js文件，然后在需要顯示時(shí)間的元素上添加一個(gè)"timeago"類。
調(diào)用也十分簡單，首先引入timeago.js文件
<script src="http://unpkg.com/timeago.js"></script>然后在需要顯示時(shí)間的標(biāo)簽上面添加datetime屬性
<div class="timeago" datetime="2016-06-30 09:20:00"></div>最后在javascript里面調(diào)用timeago()即可
let timeagoInstance = timeago();
timeagoInstance.render(document.querySelectorAll('time'));如果你需要更改語言，可以在調(diào)用timeago的時(shí)候傳入語言的參數(shù)
let timeagoInstance = timeago('zh_CN');
timeagoInstance.render(document.querySelectorAll('time'));這里給出的是最簡單的用法，更多用法可以參考文檔
js-xss
顧名思義，這個(gè)庫用于過濾用戶的輸入以防止 XSS 攻擊。它使用白名單指定的配置清理不受信任的 HTML（以防止 XSS）。它在 GitHub 上擁有超過 4.5k 顆星。XSS 攻擊是指攻擊者利用網(wǎng)站的漏洞，在用戶瀏覽器中插入惡意腳本。
使用 js-xss 的方法如下:
引入js-xss文件
<script src="xss.min.js"></script>創(chuàng)建xss對象
var xss = new FilterXSS({
whiteList: {...}
});調(diào)用xss對象的process函數(shù)，傳入需要處理的字符串即可
var html = xss.process('<script>alert("XSS")</script>');
console.log(html); // 輸出 <script>alert("XSS")</script> 被過濾掉了需要注意的是，默認(rèn)的白名單可能不能滿足所有需求，因此開發(fā)者可以根據(jù)自己的需要自定義白名單。
這個(gè)庫是非常有用的，通過這個(gè)庫可以很好的防止XSS攻擊，建議在處理用戶輸入的數(shù)據(jù)的時(shí)候使用。
