你不知道的JavaScript APIs

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。 更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ，包含一线大厂面试完整考点、资料以及我的系列文章。

最近，看到一些好用但不太常用的JS API，觉得挺不错的，分享给大家。

• Page Visibility API
• Web Share API
• Broadcast Channel API
• Internationalization API

下面，我们来看下应该在哪里使用它们，以及如何使用它们。

Page Visibility API

这个APi 可以让我们知道用户何时离开了页面。准确地说，只要页面的可见性状态发生变化，无论是用户最小化、最大化窗口还是切换标签，该API都会触发一个事件 visibilitychange 。

在过去，我不得不使用一些黑科技来确认用户是否切换了标签或最小化了窗口。最流行的是使用blur和foucs浏览器事件。

window.addEventListener("focus", function () {
    // User is back on the page
    // Do Something
});

window.addEventListener("blur", function () {
    // User left the page
    // Do Something
});

上面的代码可以工作，但不像预期的那样。因为blur事件是在页面失去焦点时触发的，所以当用户点击搜索栏、警报对话框、控制台或窗口边框时，它就会被触发。所以，blur和foucs只告诉我们页面是否被激活，但不告诉我们页面的内容是否被隐藏或可见。

案例

一般来说，我们希望使用 Page Visibility API，在用户没有看到页面时停止不必要的进程，或者执行一些后台操作。可以下面这几种情况：

• 当用户离开页面时，暂停视频、轮播图或动画。
• 停止一些实时获取数据的API
• 发送一些用户信息

如何使用它？

Page Visibility API 有两个属性和一个事件来访问页面可见性状态。

document.hidden 它是全局可用的，而且是只读的。尽量避免使用它，因为它现在已经被废弃了，但是当被访问时，如果页面是隐藏的，它将返回 true，如果是可见的，它将返回 false。

Document.visibilityState （只读属性）

返回document的可见性，即当前可见元素的上下文环境。由此可以知道当前文档 (即为页面) 是在背后，或是不可见的隐藏的标签页，或者 (正在) 预渲染。可用的值如下：

• 'visible' : 此时页面内容至少是部分可见。即此页面在前景标签页中，并且窗口没有最小化。
• 'hidden' : 此时页面对用户不可见。即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态'
• 'prerender' : 页面此时正在渲染中，因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始，永远不能从其他值变为此状态。

visibilitychange

当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改) 事件。

document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
        // page is visible
    } else {
        // page is hidden
    }
});

Web Share API

Web Share API 它可以让我们访问操作系统的本地共享机制，这对移动用户特别有用。通过这个API，可以分享文本、链接和文件，而不需要创建自己的分享机制或使用第三方的机制。

使用案例

可以用它来分享网页上的内容到社交媒体上，或者把它复制到用户的剪贴板上。

如何使用它？

网络共享API给了我们两个接口来访问用户的共享系统。

navigator.canShare(data);

如果对 Navigator.share() 的调用成功，则 Web Share API 的 Navigator.canShare() 方法将返回 true。data 包含要共享的数据的对象，该对象要与 Navigator.share() 方法传递的数据相匹配。

navigator.share(data)

Navigator.share() 方法通过调用本机的共享机制作为 Web Share API 的一部分。如果不支持 Web Share API，则此方法为 undefined。

data 包含要共享的数据的对象。必须至少指定以下字段之一。可用选项包括：

• url: 要共享的 URL（ USVString ）
• text: 要共享的文本（ USVString ）
• title: 要共享的标题（ USVString）
• files: 要共享的文件（“FrozenArray”）

该方法将会返回一个 Promise。一旦用户完成分享，这个 promise 将会接受。如果指定的共享数据格式不正确，promise 将会立即拒绝；如果用户取消了分享，promise 也会拒绝。

事例

navigator.share({
  title: document.title,
  text: 'Hello World',
  url: 'https://developer.mozilla.org',
}); // 分享 MDN 的 URL

Broadcast Channel API

Broadcast Channel API 可以实现同 源 下浏览器不同窗口，Tab 页，frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。

const broadcast = new BroadcastChannel("new_channel");

BroadcastChannel 接口非常简单。通过创建一个 BroadcastChannel 对象，一个客户端就加入了某个指定的频道。只需要向 构造函数 传入一个参数：频道名称。如果这是首次连接到该广播频道，相应资源会自动被创建。

发送消息

现在发送消息就很简单了，只需要调用 BroadcastChannel 对象上的 postMessage() 方法即可。该方法的参数可以是任意对象。最简单的例子就是发送 DOMString 文本消息：

broadcast.postMessage("Example message");

不只是 DOMString，任意类型的对象都可以被发送。

断开连接

通过调用 BroadcastChannel 对象的 close() 方法，可以离开频道。这将断开该对象和其关联的频道之间的联系，并允许它被垃圾回收。

// 断开频道连接
bc.close()

Internationalization API

在开发一个网页或应用程序时，需要将其内容翻译成其他语言以覆盖更广泛的受众是非常常见的。然而，仅仅将你的网页文本翻译成你所需要的任何语言，并不足以使你的内容对讲该语言的人可用，因为像日期、数字、单位等东西在不同国家是不同的，可能会给你的用户带来混乱。

假设你想在你的网页上显示日期 "2022年11月8日"，如 "11/8/22"。根据读者的国家，这个数据可以用三种不同的方式来阅读。

• “November 8, 2022” 或者 MM/DD/YY 来自美国
• “August 11, 2022” or DD/MM/YY 来自欧洲
• “August 22, 2011” or YY/MM/DD 来自中国、日本。

这就是国际化API（或I18n API）来解决不同语言和地区的格式问题的地方。I18n API是一个了不起的工具，有多种用途，但这里不会深入研究，以免使本文过于冗长。

如何使用它？

I18n API 使用 locale 标识符来工作。locales 参数必须是一个 BCP 47 语言标记的字符串，或者是一个包括多个语言标记的数组。如果 locales 参数未提供或者是 undefined，便会使用运行时默认的 locale。

一个 BCP 47 语言标记代表了一种语言或者区域（两者没有很大的区别）。在其最常见的格式中，它以这样的顺序囊括了这些内容：语言代码，脚本代码，和国家代码，全部由连字符分隔开。例如：

• "hi"：印地语 (primary language)。
• "de-AT": 在奥地利使用的德语 (primary language with country code)。
• "zh-Hans-CN"：在中国使用的简体中文 (primary language with script and country codes)。

更准确地说，I18n API提供了一个Intl对象，它提供了精确的字符串对比、数字格式化，和日期时间格式化。Collator，NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。本页文档内容包括了这些属性，以及国际化使用的构造器和其他语言的方法等常见的功能。

Intl.Collator

collators 的构造函数，用于启用对语言敏感的字符串比较的对象。

Intl.DateTimeFormat

用于启用语言敏感的日期和时间格式的对象的构造函数。

Intl.ListFormat

启用对语言敏感的列表格式化的对象的构造函数。

Intl.NumberFormat

用于启用语言敏感数字格式的对象的构造函数。

Intl.PluralRules

用于启用多种敏感格式和多种语言语言规则的对象的构造函数。

Intl.RelativeTimeFormat

用于启用语言敏感的相对时间格式化的对象的构造函数。

在我们的例子中，我们重点关注 Intl.DateTimeFormat() 构造函数，以根据用户的区域设置来格式化报价的 dateAdded 属性。Intl.DateTimeFormat() 构造函数需要两个参数：定义日期格式化惯例的 locale 字符串和用于自定义日期格式的 options 对象。

创建的 Intl.DateTimeFormat() 对象有一个 format() 方法，它需要两个参数：我们要格式化的Date对象和用于自定义如何显示格式化日期的 options 对象。

const logDate = (locale) => {
    const newDate = new Date("2022-10-24"); // YY/MM/DD
    const dateTime = new Intl.DateTimeFormat(locale, {timeZone: "UTC"});
    const formatedDate = dateTime.format(newDate);
    console.log(formatedDate);
};

logDate("en-US"); // 10/24/2022
logDate("de-DE"); // 24.10.2022
logDate("zh-TW"); // 2022/10/24

dateTime.format() 根据当地的日期格式约定改变日期。我们可以使用navigator.language全局属性在报价单的日期上实现这一行为，该全局属性持有用户的首选区域设置。为此，我们将创建一个新的函数，接收一个日期字符串（YYYY-MM-DD格式），并根据用户的locale返回格式化的日期。

const formatDate = (dateString) => {
    const date = new Date(dateString);
    const locale = navigator.language;
    const dateTimeFormat = new Intl.DateTimeFormat(locale, {timeZone: "UTC"});

    return dateTimeFormat.format(date);

};

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://www.smashingmagazine....

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。