关于前端:你不知道的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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。