最近看到一些有用但不常用的JSAPI。PageVisibilityAPIWebShareAPIBroadcastChannelAPIInternationalizationAPI下面，让我们看看在哪里以及如何使用它们。页面可见性API此API使我们能够知道用户何时离开页面。准确地说，每当页面的可见性状态发生变化时，无论用户是最小化、最大化窗口还是切换选项卡，API都会触发事件visibilitychange。过去，我不得不使用一些骇人听闻的技术来查看用户是否切换了选项卡或最小化了窗口。最流行的是使用blur和focs浏览器事件。窗户。addEventListener("focus",function(){//用户返回页面//DoSomething});窗户。addEventListener("blur",function(){//用户离开了页面//DoSomething});上面的代码有效，但不是预期的那样。因为blur事件在页面失去焦点时触发，所以它会在用户单击搜索栏、警告对话框、控制台或窗口边框时触发。所以，blur和focs只告诉我们页面是否被激活，而不能告诉我们页面内容是隐藏还是可见。案例一般情况下，我们希望使用PageVisibilityAPI，在用户看不到页面时停止不必要的进程，或者执行一些后台操作。可以使用以下情况：当用户离开页面时暂停视频、轮播或动画。停止一些实时获取数据的API，发送一些用户信息如何使用？页面可见性API有两个属性和一个访问页面可见性状态的事件。document.hidden全局可用且只读。尽量避免使用它，因为它现在已被弃用，但访问时如果页面隐藏则返回true，如果页面可见则返回false。Document.visibilityState（只读属性）返回文档的可见性，即当前可见元素的上下文。从这里你可以知道当前文档（即页面）是否在后台，或者不可见的隐藏选项卡，或者（正在）预渲染。可用值如下：'visible'：此时页面内容至少部分可见。也就是说，页面位于前台选项卡中，并且窗口未最小化。'hidden'：该页面此时对用户不可见。也就是说，文档处于后台选项卡或窗口最小化，或操作系统处于“prerender”的“锁定屏幕”状态：页面当前正在呈现，因此它是不可见的（出于以下目的被认为是隐藏的）文档.隐藏）。文档只能从这个状态开始，永远不能从其他值改变到这个状态。visibilitychange当其选项卡的内容变为可见或隐藏时，visibilitychange事件在文档上被触发。document.addEventListener("visibilitychange",()=>{if(document.visibilityState==="visible"){//页面可见}else{//页面隐藏}});WebShareAPIWebShareAPI它可以让我们访问操作系统的原生共享机制，这对移动用户特别有用。通过此API，无需创建您自己的共享机制或使用第三方机制即可共享文本、链接和文件。用例可能是使用它来将网页内容共享到社交媒体，或将其复制到用户的剪贴板。如何使用NetworkSharingAPI为我们提供了两个接口来访问用户的共享系统。navigator.canShare(数据);如果调用Navigator.share()成功，WebShareAPI的Navigator.canShare()方法将返回true。data包含要共享的数据的对象，匹配Navigator.share()方法传递的数据。navigator.share(data)Navigator.share()方法调用本机共享机制作为Web共享API的一部分。如果不支持WebShareAPI，则此方法未定义。data包含要共享的数据的对象。至少必须指定以下字段之一。可用选项有：url：要共享的URL(USVString)text：要共享的文本(USVString)title：要共享的标题(USVString)files：要共享的文件（“FrozenArray”）此方法将返回一个Promise。一旦用户完成共享，该承诺将被接受。如果指定的共享数据格式不正确，promise将立即拒绝；如果用户取消分享，promise也会拒绝。示例navigator.share({title:document.title,text:'HelloWorld',url:'https://developer.mozilla.org',});//分享MDN的URLBroadcastChannelAPIBroadcastChannelAPI可以实现同源不同浏览器窗口、标签页、框架或iframe下的浏览器上下文（通常是同一网站下的不同页面）之间的简单通信。constbroadcast=newBroadcastChannel("new_channel");BroadcastChannel接口非常简单。通过创建BroadcastChannel对象，客户端可以加入指定的频道。只有一个参数需要传递给构造函数：通道名称。如果是第一次连接广播频道，会自动创建相应的资源。发送消息现在发送消息就像在BroadcastChannel对象上调用postMessage()方法一样简单。此方法的参数可以是任何对象。最简单的示例是发送DOMString文本消息：broadcast.postMessage("Examplemessage");不只是DOMString，任何类型的对象都可以发送。断开连接您可以通过调用BroadcastChannel对象的close()方法离开频道。这将断开对象与其关联通道的连接并允许它被垃圾收集。//Disconnectthechannelbc.close()InternationalizationAPI在开发网页或应用程序时，需要将其内容翻译成其他语言以覆盖更广泛的受众是很常见的。然而，仅仅将您的网页文本翻译成您需要的任何语言并不足以让使用该语言的人可以访问您的内容，因为日期、数字、单位等在不同国家/地区是不同的，并且可能会发生变化造成混淆为您的用户。假设您想在网页上显示日期“2022年11月8日”，例如“11/8/22”。根据读者所在的国家/地区，可以通过三种不同的方式阅读此数据。“2022年11月8日”或美国的MM/DD/YY“2022年8月11日”或欧洲的DD/MM/YY“2011年8月22日”或中国、日本的YY/MM/DD。这就是国际化API（或I18nAPI）用于解决不同语言和区域设置的格式问题的地方。I18nAPI是一个神奇的工具，有很多用途，但我不会在这里深入研究它，以免使这篇文章太长。如何使用I18nAPI使用语言环境标识符来工作。locales参数必须是BCP47语言标签的字符串，或包含多个语言标签的数组。如果未提供或未定义locales参数，将使用运行时默认区域设置。一个BCP47语言标签代表一种语言或一个地区（两者没有太大区别）。在其最常见的形式中，它按以下顺序包含这些内容：语言代码、脚本代码和国家/地区代码，全部由连字符分隔。例如：“hi”：印地语（主要语言）。“de-AT”：奥地利使用的德语（带有国家代码的主要语言）。“zh-Hans-CN”：在中国使用的简体中文（带有文字和国家代码的主要语言）。更准确地说，I18nAPI提供了一个Intl对象，它提供精确的字符串比较、数字格式和日期时间格式。Collat??or、NumberFormat和DateTimeFormat对象的构造函数是Intl对象的属性。该页面的文档涵盖了这些属性，以及用于国际化的其他语言中的构造函数和方法等常用函数。Intl.Collat??orcollat??ors的构造函数，支持语言敏感字符串比较的对象。Intl.DateTimeFormat用于启用语言敏感日期和时间格式的对象的构造函数。Intl.ListFormat启用语言敏感列表格式的对象构造函数。Intl.NumberFormat用于启用语言敏感数字格式的对象的构造函数。Intl.PluralRules用于启用多个格式敏感和多语言规则的对象的构造函数。Intl.RelativeTimeFormat用于启用对语言敏感的相对时间格式的对象的构造函数。在我们的例子中，我们关注Intl.DateTimeFormat()构造函数以根据用户的区域设置格式化报价的dateAdded属性。Intl.DateTimeFormat()构造函数采用两个参数：定义日期格式约定的语言环境字符串和用于自定义日期格式的选项对象。创建的Intl.DateTimeFormat()对象有一个format()方法，该方法采用两个参数：我们要格式化的Date对象和一个用于自定义格式化日期显示方式的选项对象。constlogDate=(locale)=>{constnewDate=newDate("2022-10-24");//YY/MM/DDconstdateTime=newIntl.DateTimeFormat(locale,{timeZone:"UTC"});constformattedDate=dateTime.format(newDate);console.log(formattedDate);};logDate("en-US");//10/24/2022logDate("de-DE");//24.10.2022logDate("zh-TW");//2022/10/24dateTime.format()根据本地日期格式约定更改日期。我们可以使用navigator.language全局属性在引用日期实现此行为，该属性包含用户的首选语言环境。为此，我们将创建一个新函数，它接受一个日期字符串（YYYY-MM-DD格式）并返回根据用户区域设置格式化的日期。constformatDate=(dateString)=>{constdate=newDate(dateString);constlocale=navigator.language;constdateTimeFormat=newIntl.DateTimeFormat(locale,{timeZone:"UTC"});返回dateTimeFormat.format(日期);};代码部署后，无法实时获知可能存在的BUG。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://www.smashingmagazine.com/2022/09/javascript-api-guide/
