2023年Q2用戶偏好榜：12+256G版本成新主流
3月份的性能榜、性價比榜和好評榜之后，就要輪到2023年的第二季度偏好榜了，上半年的新機潮已經過去，最明顯的肯定就是大內存和存儲的機型了，另外部分中端機也取消了屏幕塑料支架
Video.js 是一個基于 HTML5 的視頻播放器庫。它支持大多數流行的視頻格式，并且可以在多個平臺和瀏覽器上使用。
這是在 GitHub 上擁有超過 34k 顆星的星數最多的庫之一。正如您從名稱中猜到的那樣，這個庫提供了一個為 HTML5 世界從頭開始構建的網絡視頻播放器。它支持 HTML5 視頻和媒體源擴展，以及其他播放技術，如 YouTube 和 Vimeo（通過插件）。它支持在臺式機和移動設備上播放視頻。該項目于 2010 年年中啟動，該播放器現已在超過 700,000 個網站上使用。
使用 Video.js 的基本步驟如下：
<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/。
構建通知系統很復雜。起初，這似乎只是發送一封電子郵件，但實際上，這只是一個開始。今天的用戶期望通過電子郵件、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', }, },});如果您必須在您的應用程序中處理鍵盤，那么這對您來說是一個很好的資源。這是一個簡單的庫，可以幫助您處理鍵盤快捷鍵。它支持特定鍵、鍵盤組合或鍵序列上的按鍵、按下和按下事件。它壓縮后約 2kb，壓縮后約 4.5kb，并且沒有外部依賴性。這個庫在 GitHub 上有超過 11k 顆星。
使用 Mousetrap 的基本步驟如下：
示例代碼如下：
<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。
這是一個小型（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 是一個用于創建交互式數據可視化的 JavaScript 庫。它是基于 D3.js 庫的一個擴展，提供了一些高級功能和封裝，使得創建可視化更加簡單和高效。
dc.js 支持多種類型的圖表，如條形圖，餅圖，散點圖，線圖等，并且支持多維數據篩選和縮放。
使用 dc.js 的基本步驟如下：
示例代碼如下：
// 引入 dc.js 和 d3.jsimport * 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();Timeago是一個JavaScript庫，它可以在網頁上將時間顯示為簡短的形式，例如“3小時前”或“1個月前”。這可以幫助您在網頁上創建動態時間戳。
使用Timeago非常簡單，您只需要在網頁上引用timeago.js文件，然后在需要顯示時間的元素上添加一個"timeago"類。
<script src="http://unpkg.com/timeago.js"></script><div class="timeago" datetime="2016-06-30 09:20:00"></div>let timeagoInstance = timeago();timeagoInstance.render(document.querySelectorAll('time'));let timeagoInstance = timeago('zh_CN');timeagoInstance.render(document.querySelectorAll('time'));這里給出的是最簡單的用法，更多用法可以參考文檔
顧名思義，這個庫用于過濾用戶的輸入以防止 XSS 攻擊。它使用白名單指定的配置清理不受信任的 HTML（以防止 XSS）。它在 GitHub 上擁有超過 4.5k 顆星。XSS 攻擊是指攻擊者利用網站的漏洞，在用戶瀏覽器中插入惡意腳本。
使用 js-xss 的方法如下:
<script src="xss.min.js"></script>var xss = new FilterXSS({ whiteList: {...}});var html = xss.process('<script>alert("XSS")</script>');console.log(html); // 輸出 <script>alert("XSS")</script> 被過濾掉了需要注意的是，默認的白名單可能不能滿足所有需求，因此開發者可以根據自己的需要自定義白名單。
這個庫是非常有用的，通過這個庫可以很好的防止XSS攻擊，建議在處理用戶輸入的數據的時候使用。
本文鏈接：http://www.tebozhan.com/showinfo-26-39531-0.html下一個項目，建議使用這七個 JavaScript 庫
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 我常用的幾個經典Python模塊
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號