关于前端:JavaScript好玩实用的API分享

9次阅读

共计 2183 个字符,预计需要花费 6 分钟才能阅读完成。

这篇文章给大家分享几个好玩确又实用的js api

Battery Status API

在线示例:Battery Status API demo

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


兼容性

正文完
 0