JavaScript好玩实用的API分享前端javascript

这篇文章给大家分享几个好玩确又实用的js api
Battery Status API 在线示例：Battery Status API demo
Battery API提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件。这个可以在设备电量低的时候调整应用的资源使用状态，或者在电池用尽前保存应用中的修改以防数据丢失。
Battery Status API 向 window.navigator 扩展了一个 navigator.getBattery 方法，其返回了一个battery promise, 完成后传递一个 BatteryManager 对象，并提供了一些新的可以操作电池状态的事件。
【JavaScript好玩实用的API分享】这个例子中，我们同时监听放电状态和电池等级和剩余事件的事件（不论是否正在充电还是在使用电池）。这可以通过监听 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 事件处理程序来定义一个函数来处理消息。