最近，看到一些好用但不太常用的JS API，覺得挺不錯的，分享給大家。

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

下面，我們來看下應(yīng)該在哪里使用它們，以及如何使用它們。

Page Visibility API

這個APi 可以讓我們知道用戶何時離開了頁面。準(zhǔn)確地說，只要頁面的可見性狀態(tài)發(fā)生變化，無論是用戶最小化、最大化窗口還是切換標(biāo)簽，該API都會觸發(fā)一個事件 visibilitychange 。

在過去，我不得不使用一些黑科技來確認用戶是否切換了標(biāo)簽或最小化了窗口。最流行的是使用blur和foucs瀏覽器事件。

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

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

上面的代碼可以工作，但不像預(yù)期的那樣。因為blur事件是在頁面失去焦點時觸發(fā)的，所以當(dāng)用戶點擊搜索欄、警報對話框、控制臺或窗口邊框時，它就會被觸發(fā)。所以，blur和foucs只告訴我們頁面是否被激活，但不告訴我們頁面的內(nèi)容是否被隱藏或可見。

案例

一般來說，我們希望使用 Page Visibility API，在用戶沒有看到頁面時停止不必要的進程，或者執(zhí)行一些后臺操作。可以下面這幾種情況：

• 當(dāng)用戶離開頁面時，暫停視頻、輪播圖或動畫。
• 停止一些實時獲取數(shù)據(jù)的API
• 發(fā)送一些用戶信息

如何使用它？

Page Visibility API 有兩個屬性和一個事件來訪問頁面可見性狀態(tài)。

document.hidden它是全局可用的，而且是只讀的。盡量避免使用它，因為它現(xiàn)在已經(jīng)被廢棄了，但是當(dāng)被訪問時，如果頁面是隱藏的，它將返回 true，如果是可見的，它將返回 false。

Document.visibilityState （只讀屬性）

返回document的可見性，即當(dāng)前可見元素的上下文環(huán)境。由此可以知道當(dāng)前文檔 (即為頁面) 是在背后，或是不可見的隱藏的標(biāo)簽頁，或者 (正在) 預(yù)渲染?？捎玫闹等缦拢?/p>

• 'visible' : 此時頁面內(nèi)容至少是部分可見。即此頁面在前景標(biāo)簽頁中，并且窗口沒有最小化。
• 'hidden' : 此時頁面對用戶不可見。即文檔處于背景標(biāo)簽頁或者窗口處于最小化狀態(tài)，或者操作系統(tǒng)正處于 '鎖屏狀態(tài)'
• 'prerender' : 頁面此時正在渲染中，因此是不可見的 (considered hidden for purposes of document.hidden). 文檔只能從此狀態(tài)開始，永遠不能從其他值變?yōu)榇藸顟B(tài)。

visibilitychange

當(dāng)其選項卡的內(nèi)容變得可見或被隱藏時，會在文檔上觸發(fā) visibilitychange (能見度更改) 事件。

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

Web Share API

Web Share API 它可以讓我們訪問操作系統(tǒng)的本地共享機制，這對移動用戶特別有用。通過這個API，可以分享文本、鏈接和文件，而不需要創(chuàng)建自己的分享機制或使用第三方的機制。

使用案例

可以用它來分享網(wǎng)頁上的內(nèi)容到社交媒體上，或者把它復(fù)制到用戶的剪貼板上。

如何使用它？

網(wǎng)絡(luò)共享API給了我們兩個接口來訪問用戶的共享系統(tǒng)。

navigator.canShare(data);

如果對 Navigator.share() 的調(diào)用成功，則 Web Share API 的 Navigator.canShare() 方法將返回 true。data 包含要共享的數(shù)據(jù)的對象，該對象要與 Navigator.share() 方法傳遞的數(shù)據(jù)相匹配。

navigator.share(data)

Navigator.share() 方法通過調(diào)用本機的共享機制作為 Web Share API 的一部分。如果不支持 Web Share API，則此方法為 undefined。

data 包含要共享的數(shù)據(jù)的對象。必須至少指定以下字段之一?？捎眠x項包括：

• url: 要共享的 URL（ USVString ）
• text: 要共享的文本（ USVString ）
• title: 要共享的標(biāo)題（ USVString）
• files: 要共享的文件（“FrozenArray”）

該方法將會返回一個 Promise。一旦用戶完成分享，這個 promise 將會接受。如果指定的共享數(shù)據(jù)格式不正確，promise 將會立即拒絕；如果用戶取消了分享，promise 也會拒絕。

事例

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

Broadcast Channel API

Broadcast Channel API 可以實現(xiàn)同 源 下瀏覽器不同窗口，Tab 頁，frame 或者 iframe 下的 瀏覽器上下文 (通常是同一個網(wǎng)站下不同的頁面) 之間的簡單通訊。

const broadcast = new BroadcastChannel("new_channel");

BroadcastChannel 接口非常簡單。通過創(chuàng)建一個 BroadcastChannel 對象，一個客戶端就加入了某個指定的頻道。只需要向 構(gòu)造函數(shù) 傳入一個參數(shù)：頻道名稱。如果這是首次連接到該廣播頻道，相應(yīng)資源會自動被創(chuàng)建。

發(fā)送消息

現(xiàn)在發(fā)送消息就很簡單了，只需要調(diào)用 BroadcastChannel 對象上的 postMessage() 方法即可。該方法的參數(shù)可以是任意對象。最簡單的例子就是發(fā)送 DOMString 文本消息：

broadcast.postMessage("Example message");

不只是 DOMString，任意類型的對象都可以被發(fā)送。

斷開連接

通過調(diào)用 BroadcastChannel 對象的 close() 方法，可以離開頻道。這將斷開該對象和其關(guān)聯(lián)的頻道之間的聯(lián)系，并允許它被垃圾回收。

// 斷開頻道連接
bc.close()

Internationalization API

在開發(fā)一個網(wǎng)頁或應(yīng)用程序時，需要將其內(nèi)容翻譯成其他語言以覆蓋更廣泛的受眾是非常常見的。然而，僅僅將你的網(wǎng)頁文本翻譯成你所需要的任何語言，并不足以使你的內(nèi)容對講該語言的人可用，因為像日期、數(shù)字、單位等東西在不同國家是不同的，可能會給你的用戶帶來混亂。

假設(shè)你想在你的網(wǎng)頁上顯示日期 "2022年11月8日"，如 "11/8/22"。根據(jù)讀者的國家，這個數(shù)據(jù)可以用三種不同的方式來閱讀。

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

這就是國際化API（或I18n API）來解決不同語言和地區(qū)的格式問題的地方。I18n API是一個了不起的工具，有多種用途，但這里不會深入研究，以免使本文過于冗長。

如何使用它？

I18n API 使用 locale 標(biāo)識符來工作。locales 參數(shù)必須是一個 BCP 47 語言標(biāo)記的字符串，或者是一個包括多個語言標(biāo)記的數(shù)組。如果 locales 參數(shù)未提供或者是 undefined，便會使用運行時默認的 locale。

一個 BCP 47 語言標(biāo)記代表了一種語言或者區(qū)域（兩者沒有很大的區(qū)別）。在其最常見的格式中，它以這樣的順序囊括了這些內(nèi)容：語言代碼，腳本代碼，和國家代碼，全部由連字符分隔開。例如：

• "hi"：印地語 (primary language)。
• "de-AT": 在奧地利使用的德語 (primary language with country code)。
• "zh-Hans-CN"：在中國使用的簡體中文 (primary language with script and country codes)。

更準(zhǔn)確地說，I18n API提供了一個Intl對象，它提供了精確的字符串對比、數(shù)字格式化，和日期時間格式化。Collator，NumberFormat 和 DateTimeFormat 對象的構(gòu)造函數(shù)是 Intl 對象的屬性。本頁文檔內(nèi)容包括了這些屬性，以及國際化使用的構(gòu)造器和其他語言的方法等常見的功能。

Intl.Collator

collators 的構(gòu)造函數(shù)，用于啟用對語言敏感的字符串比較的對象。

Intl.DateTimeFormat

用于啟用語言敏感的日期和時間格式的對象的構(gòu)造函數(shù)。

Intl.ListFormat

啟用對語言敏感的列表格式化的對象的構(gòu)造函數(shù)。

Intl.NumberFormat

用于啟用語言敏感數(shù)字格式的對象的構(gòu)造函數(shù)。

Intl.PluralRules

用于啟用多種敏感格式和多種語言語言規(guī)則的對象的構(gòu)造函數(shù)。

Intl.RelativeTimeFormat

用于啟用語言敏感的相對時間格式化的對象的構(gòu)造函數(shù)。

在我們的例子中，我們重點關(guān)注 Intl.DateTimeFormat() 構(gòu)造函數(shù)，以根據(jù)用戶的區(qū)域設(shè)置來格式化報價的 dateAdded 屬性。Intl.DateTimeFormat() 構(gòu)造函數(shù)需要兩個參數(shù)：定義日期格式化慣例的 locale 字符串和用于自定義日期格式的 options 對象。

創(chuàng)建的 Intl.DateTimeFormat() 對象有一個 format() 方法，它需要兩個參數(shù)：我們要格式化的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() 根據(jù)當(dāng)?shù)氐娜掌诟袷郊s定改變?nèi)掌凇Ｎ覀兛梢允褂胣avigator.language全局屬性在報價單的日期上實現(xiàn)這一行為，該全局屬性持有用戶的首選區(qū)域設(shè)置。為此，我們將創(chuàng)建一個新的函數(shù)，接收一個日期字符串（YYYY-MM-DD格式），并根據(jù)用戶的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，花了大量的時間進行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。

原文：https://www.smashingmagazine.com/2022/09/javascript-api-guide/