這篇文章給大家分享幾個好玩確又實用的js api

Battery Status API

Battery API提供了有關係統充電級別的資訊並提供了通過電池等級或者充電狀態的改變提醒使用者的事件。這個可以在裝置電量低的時候調整應用的資源使用狀態，或者在電池用盡前儲存應用中的修改以防資料丟失。

Battery Status API 向 window.navigator 擴充套件了一個 navigator.getBattery 方法，其返回了一個battery promise, 完成後傳遞一個 BatteryManager 物件，並提供了一些新的可以操作電池狀態的事件。

這個例子中，我們同時監聽放電狀態和電池等級和剩餘事件的事件（不論是否正在充電還是在使用電池）。這可以通過監聽 chargingchange, levelchange, chargingtimechange, dischargingtimechange 事件完成。

navigator.getBattery().then(function(battery) {

  console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
  console.log("Battery level: " + battery.level * 100 + "%");
  console.log("Battery charging time: " + battery.chargingTime + " seconds");
  console.log("Battery discharging time: " + battery.dischargingTime + " seconds");

  battery.addEventListener('chargingchange', function() {
    console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
  });

  battery.addEventListener('levelchange', function() {
    console.log("Battery level: " + battery.level * 100 + "%");
  });

  battery.addEventListener('chargingtimechange', function() {
    console.log("Battery charging time: " + battery.chargingTime + " seconds");
  });

  battery.addEventListener('dischargingtimechange', function() {
    console.log("Battery discharging time: " + battery.dischargingTime + " seconds");
  });

});

測試：

測試發現充電、放電的時間一直是Infinity,電量和是否充電還是可以正確讀取的
相容性

Broadcast Channel API

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

廣播頻道會被命名和繫結到指定的源。

通過建立一個監聽某個頻道下的 BroadcastChannel 物件，你可以接收傳送給該頻道的所有訊息。一個有意思的點是，你不需要再維護需要通訊的 iframe 或 worker 的索引。它們可以通過構造 BroadcastChannel 來簡單地“訂閱”特定頻道，並在它們之間進行全雙工（雙向）通訊。

建立或加入某個頻道

BroadcastChannel 介面非常簡單。通過建立一個 BroadcastChannel 物件，一個客戶端就加入了某個指定的頻道。只需要向建構函式傳入一個引數：頻道名稱。如果這是首次連線到該廣播頻道，相應資源會自動被建立。

// 連線到廣播頻道
var bc = new BroadcastChannel('test_channel');

傳送訊息

現在傳送訊息就很簡單了，只需要呼叫 BroadcastChannel 物件上的postMessage() 方法即可。該方法的引數可以是任意物件。最簡單的例子就是傳送 DOMString 文字訊息：

// 傳送簡單訊息的示例
bc.postMessage('This is a test message.');

不只是 DOMString，任意型別的物件都可以被髮送。此 API 不會將訊息與任何的語義相關聯，因此通道的參與者有必要知道預期的訊息型別和訊息的消費方式。

接收訊息

當訊息被髮送之後，所有連線到該頻道的 BroadcastChannel 物件上都會觸發 message 事件。該事件沒有預設的行為，但是可以使用 onmessage 事件處理程式來定義一個函式來處理訊息。

// 簡單示例，用於將事件列印到控制檯
bc.onmessage = function (ev) { console.log(ev); }

與頻道斷開連線

通過呼叫 BroadcastChannel 物件的 close() 方法，可以離開頻道。這將斷開該物件和其關聯的頻道之間的聯絡，並允許它被垃圾回收。

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

線上示例：
傳送訊息 demo
接收訊息 demo

Kapture 2021-09-22 at 13.50.34.gif
相容性

JavaScript好玩實用的API分享