当前位置：首页 > 科技 > 软件

下一个项目，建议使用这七个 JavaScript 库

来源：责编：时间：2023-12-08 09:15:40 191观看

导读Video.jsVideo.js 是一个基于 HTML5 的视频播放器库。它支持大多数流行的视频格式，并且可以在多个平台和浏览器上使用。这是在 GitHub 上拥有超过 34k 颗星的星数最多的库之一。正如您从名称中猜到的那样，这个库提供了

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.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();

Time ago

Timeago是一个JavaScript库，它可以在网页上将时间显示为简短的形式，例如“3小时前”或“1个月前”。这可以帮助您在网页上创建动态时间戳。

使用Timeago非常简单，您只需要在网页上引用timeago.js文件，然后在需要显示时间的元素上添加一个"timeago"类。

调用也十分简单，首先引入timeago.js文件

<script src="//unpkg.com/timeago.js"></script>

然后在需要显示时间的标签上面添加datetime属性

<div class="timeago" datetime="2016-06-30 09:20:00"></div>

最后在javascript里面调用timeago()即可

let timeagoInstance = timeago();timeagoInstance.render(document.querySelectorAll('time'));

如果你需要更改语言，可以在调用timeago的时候传入语言的参数

let timeagoInstance = timeago('zh_CN');timeagoInstance.render(document.querySelectorAll('time'));

这里给出的是最简单的用法，更多用法可以参考文档

js-xss

顾名思义，这个库用于过滤用户的输入以防止 XSS 攻击。它使用白名单指定的配置清理不受信任的 HTML（以防止 XSS）。它在 GitHub 上拥有超过 4.5k 颗星。XSS 攻击是指攻击者利用网站的漏洞，在用户浏览器中插入恶意脚本。

使用 js-xss 的方法如下:

引入js-xss文件

<script src="xss.min.js"></script>

创建xss对象

var xss = new FilterXSS({  whiteList: {...}});

调用xss对象的process函数，传入需要处理的字符串即可

var html = xss.process('<script>alert("XSS")</script>');console.log(html); // 输出 <script>alert("XSS")</script> 被过滤掉了

需要注意的是，默认的白名单可能不能满足所有需求，因此开发者可以根据自己的需要自定义白名单。

这个库是非常有用的，通过这个库可以很好的防止XSS攻击，建议在处理用户输入的数据的时候使用。

本文链接：http://www.28at.com/showinfo-26-39531-0.html下一个项目，建议使用这七个 JavaScript 库

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：我常用的几个经典Python模块

下一篇： Java中通过Elasticsearch实现全局检索功能的方法和步骤及源代码

标签：

热门焦点

5月iOS设备好评榜：iPhone 14仅排第43？

来到新的一月，安兔兔的各个榜单又重新汇总了数据，像安卓阵营的榜单都有着比较大的变动，不过iOS由于设备的更新换代并没有那么快，所以相对来说变化并不大，特别是iOS好评榜，老款设
iPhone卖不动了！苹果股价创年内最大日跌幅：市值一夜蒸发万亿元

8月5日消息，今天凌晨美股三大指数高开低走集体收跌，道指跌0.41%；纳指跌0.36%；标普500指数跌0.52%。热门科技股也都变化极大，其中苹果报181.99美元，跌4.8%，创
一篇聊聊Go错误封装机制

%w 是用于错误包装（Error Wrapping）的格式化动词。它是用于 fmt.Errorf 和 fmt.Sprintf 函数中的一个特殊格式化动词，用于将一个错误（或其他可打印的值）包装在一个新的错误中。使
量化指标是与非：挽救被量化指标扼杀的技术团队

作者 | 刘新翠整理 | 徐杰承本文整理自快狗打车技术总监刘新翠在WOT2023大会上的主题分享，更多精彩内容及现场PPT，请关注51CTO技术栈公众号，发消息【WOT2023PPT】即可直接领取
多线程开发带来的问题与解决方法

使用多线程主要会带来以下几个问题：（一）线程安全问题　　线程安全问题指的是在某一线程从开始访问到结束访问某一数据期间，该数据被其他的线程所修改，那么对于当前线程而言，该线程
破圈是B站头上的紧箍咒

来源 | 光子星球撰文 | 吴坤谚编辑 | 吴先之每年的暑期档都少不了瞄准追剧女孩们的古偶剧集，2021年有优酷的《山河令》，2022年有爱奇艺的《苍兰诀》，今年却轮到小破站抓住了追
华为和江淮汽车合作开发百万元问界MPV？双方回应来了

8月1日消息，郭明錤今天在社交平台发文称，华为正在和江淮汽车合作，开发售价在100万元的问界MPV，预计在2024年第2季度量产，销量目标为上市首年交付5万辆。
苹果、三星、惠普等暂停向印度出口笔记本和平板电脑

集微网消息，据彭博社报道，在8月3日印度突然禁止在没有许可证的情况下向印度进口电脑/平板及显示器等产品后，苹果、三星电子和惠普等大公司暂停向印度
上海举办人工智能大会活动，建设人工智能新高地

人工智能大会在上海浦江两岸隆重拉开帷幕，人工智能新技术、新产品、新应用、新理念集中亮相。8月30日晚，作为大会的特色活动之一的上海人工智能发展盛典人工