鲜为人知的Web API

API是应用程序编程接口的首字母缩写，它定义了多个软件体系结构层之间的交互。程序员在软件开发中使用API可以轻松地执行复杂的任务。如果没有API，程序员的生活将是悲惨的，因为没有适当的(例如，安全的)数据访问，知道不必要的低级细节等。

当涉及到WebAPI时，有非常有用的对象、属性和函数可用于执行从访问DOM到管理音频、视频、图形等复杂任务。

如果您来自Web开发背景，那么您已经在使用它们中的许多了。以下是非常知名的Web API列表。

在这篇文章中，我将谈论另外10个不太流行的WebAPI。不太受欢迎并不意味着它们没有用处。您可以在项目的各种用例中使用它们。请看一下。

如果您想立即进入源代码或观看演示，这里有指向它们的快速链接：

注意：WebAPI只不过是使用普通JavaScript编写和公开的接口、函数、对象和属性。然而，webAPI的使用并不仅限于基于普通JavaScript的应用程序。将它们与基于角度、反应或VUE的应用程序一起使用也非常简单。

我用来演示本文中的webAPI的所有示例都是使用reactjs编写的。您可以在上面提到的GitHub链接中找到它们。请随意分叉、更换和使用！

使用Web API的一大(痛点)是，它们中的大多数还没有标准化。这意味着，不同的浏览器供应商对Web API的支持可能不同。例如，您可能会发现一个API可以与Chrome浏览器一起使用，但Firefox或Edge浏览器还不支持该API。

只需输入网站的名称，即可查看是否支持Can I Use WebSite中的Web API。

如果某个Web API不受支持，则实施回退或反馈。大多数Web API都提供了检查API是否受支持的方法。您可以选择在不受支持时实现后备，或者至少通过证明反馈消息来通知您的用户。

您是否需要以全屏模式显示任何DOM元素？全屏使用案例对游戏应用程序、在线视频平台(如YouTube)等要求很高。

FullScreen API提供了以全屏模式呈现特定元素(及其子元素)的方法。有一种方法可以在不再需要时退出全屏模式。不仅如此，当DOM元素转换为全屏模式或退出全屏模式时，此API还可以帮助执行任何操作。

在下面的例子中，我最喜欢的圣诞老人可以进入全屏模式，然后轻松地走出来。

在下面的代码中，manageFullScreen()函数对id为fs_id的元素使用requestFullscreen()API。

这个id为fs_id的元素是一个包含子元素的DIV，即圣诞老人图像。

剪贴板是一些操作系统提供的缓冲区，用于在应用程序内和应用程序之间进行短期存储和传输。

使用剪贴板可以执行的操作主要有三种。它们是复制、剪切和粘贴。剪贴板API提供响应这三个操作的功能。

有趣的是，将内容复制到剪贴板是打开的，如中所示，不需要用户权限。但是，要将内容从剪贴板粘贴到用户应用程序，用户需要授予其权限。它是使用另一个称为权限API的Web API来实现的。

异步函数(Event){event.prevenentDefault()；try{await Navigator.clipboard.writeText(Copy Text)；console.log(`${copy Text}Copy to clipboard`)；}catch(Err){console.error('；复制失败：'；，err)；}}。

异步API功能从剪贴板读取内容并对其进行操作，

异步函数(Event){event.prevenentDefault()；try{const text=await Navigator.clipboard.readText()；setPastetext(Text)；console.log('；粘贴内容：'；，text)；}catch(Err){console.error('；无法读取剪贴板内容：'；，err)；}}。

注意：随着剪贴板异步API的加入，您可以免去document()函数的使用，因为它现在已经过时了。

是否要根据对DOM元素的内容或边框的更改执行某些操作？您是否在考虑自己编写一个处理程序？如果我告诉您，web API实现已经提供了一个呢？

这里有一个关于哑巴按钮的故事。我们使用范围滑块来调整按钮的大小。在调整按钮大小的同时，我们还希望控制文本颜色，而不让按钮了解太多信息。

首先，创建一个按钮并指定一个id，这样我们以后就可以使用id访问该按钮。

现在，我们使用HTML5中的Range输入类型创建一个滑块。当滑块值更改时，将调用resize()函数。

Resize()函数只是将按钮的宽度设置为滑块范围值，以便可以动态调整其大小。

Const resize=event=>；{const value=event.target.valueAsNumber；setRangeValue(Value)；let dumbBtn=Document.getElementById('；dumbBtnId'；)；dumbBtn.style.width=`${value}px`；}。

到现在为止还好?。现在，每次更改范围值时，都会调整按钮的大小。我们有一个ResizeWatch观察此更改，并更改按钮文本的颜色。

UseEffect(()=>；{try{let dumbBtn=Document.getElementById('；dumbBtnId'；)；var size zeWatch=new ResizeWatch(Entries=>；{for(Const Entry Of Entries){//获取按钮元素并为其上色//基于如下所示的范围值，entry.target.style.color='；green`；}})；realzeObserverver。}}，[rangeValue])；

有一些很酷和有用的API围绕用户媒体，如音频，视频等。我喜欢图像捕获API，它可以帮助我们从视频设备(如网络摄像头)捕获图像或抓取帧。不仅如此，您还可以执行捕捉图像或抓取帧的操作。

首先，获取用户的媒体访问权限。在这种情况下，我们将获得网络摄像头访问权限。

Navigator.mediaDevices.getUserMedia({video：true}).Then(mediaStream=>；{document ent.querySelector('；video'；).srcObject=mediaStream；const Track=mediaStream.getVideoTracks()[0]；setTrack(Track)；}).catch(error=>；{console.error(`${error}尚不支持`。

就像剪贴板粘贴操作一样，网络摄像头媒体访问权限必须由用户授予。

现在抓起一副相框，做点什么。在本例中，我只是在画布上绘制框架。

Const imageCapture=new ImageCapture(Track)；imageCapture.grabFrame().Then(imageBitmap=>；{const canvas=Docent.querySelector('；#grabFrameCanvas'；)；draCanvas(canvas，imageBitmap)；}).catch(error=>；{console.log(Error)；setError(Error)；})；

Const imageCapture=new ImageCapture(Track)；imageCapture.takPhoto().Then(blob=>；createImageBitmap(Blob)).Then(imageBitmap=>；{const canvas=Document.querySelector('；#takPhotoCanvas'；)；drawCanvas(Canvas，imageBitmap)；}).catch(Error=>；{。

要停止网络摄像头的视频流，只需在正在运行的视频轨道上调用方法stop()即可。

广播频道API允许在浏览上下文(窗口、选项卡、IFRAME)和同一来源的工作人员之间进行通信。想一想这样的用例，一旦您从浏览器选项卡中运行的应用程序注销，您希望将其广播到在同一浏览器的其他选项卡中打开的应用程序实例。

这里是发送者向接收者发送消息并且该消息被广播到其浏览上下文(在这种情况下是制表符)的示例，

第一步是通过为广播频道指定唯一名称来创建该频道。还要定义要广播的内容(消息)。

Const Channel_name="；greenroot_channel"；；const BC=new BroadCastChannel(Channel_Name)；const message='；我很棒！'；；

要广播消息，请通过传递消息在通道上调用postMessage()方法。

在接收端，任何正在收听广播的人都会收到发送的消息通知。

Const Channel_name="；greenroot_channel"；；const BC=new BroadCastChannel(Channel_Name)；bc.addEventListener('；message'；，function(Event){console.log(`Received message，"；${event.data}"；，on the channel，"；${Channel_name}"；`)；const output=document.getElementById('；

您是否想了解有关笔记本电脑、PC或设备电池的所有信息？是的，还有一个用于此的Web API，即电池状态API。此API有助于了解所有信息，如电池是否正在充电、剩余电量以及处理与充电相关的状态变化的处理程序。

下面的示例显示了当我插入和拔出笔记本电脑充电器时的状态变化，

下面的代码解释了如何处理手柄和处理与电池相关的信息。

Navigator.getBattery().Then(函数(电池){//处理充电更改事件battery.addEventListener("；Chargingchange"；，function(){console.log("；Battery Charging？"；Yes"；："；No"；)；})；//处理充电级别更改电池.addEventListener("；，function(){console.log("；电池电量："；+battery.level*100+"；%"；)；})；//处理充电时间变化电池。addEventListener("；chargingtimechange"；，function(){console.log("；电池充电时间："；+battery.chargingTime+"；秒"；)；})；//处理放电时间更改battery.addEventListener("；dischargingtimchangange"；，function(){console.log("；Battery放电时间："；+battery.dischargingTime+"；秒"；)；})；

我喜欢这个API，使用它很有趣。不好笑的是，此API可能会在未来几天过时。

网络信息API提供有关网络类型(例如，WiFi、蜂窝等)、节省数据模式、带宽等的信息。

这是您可以连接到系统硬件并执行操作的另一个示例。Visionation API提供了启动和停止设备振动(瞬间或一段时间)的方法。

UseEffect(()=>；{IF(START){//振动2秒导航器.Viviate(2000)；}Else{//停止振动导航器.Viviate(0)；}}，[START])；

支付请求接口：为商家和用户提供一致的支付体验。

触摸事件：提供可用于支持特定于应用程序的多点触摸交互(如两指手势)的相对低级API。

页面可见性：提供您可以监视的事件，以了解文档何时变为可见或隐藏

通道消息传递API：在浏览上下文中发送消息的另一种很好的方式。然而，与广播不同的是，这里是发送1对1的消息。

我将很快将这些示例添加到Web API DemoLab中。

如果它对你有用，请点赞/分享，这样其他人也能收到。要获得有关我最新帖子的电子邮件通知，请点击页面顶部的订阅按钮订阅我的博客。封面图片是在弗里皮克一件酷炫作品的基础上即兴创作的。