API 是 Application Programming Interface 的缩写，它定义了软件架构层次之间的交互。借助 API，程序员可以在软件开发中轻松地执行复杂的任务。如果没有 API，那么程序员的生活会很悲惨，没有合适（例如安全）的数据访问，要了解不必要的底层细节，等等。
在 Web API 中，有非常有用的对象、属性和函数可用于执行小到访问 DOM 这样的小任务，大到处理音频、视频、图形这样的复杂任务。
一些著名的 Web API
如果你有 Web 开发背景，那么你已经在使用其中的许多工具了。下面是一些非常著名的 Web API。
Canvas
Fetch
History
Geolocation
DOM
Console
Drag & Drop API
在本文中，我将介绍另外 10 个不那么流行的 Web API。不那么流行并不意味着它们没有用处。你可以在项目的各种用例中使用它们。让我们逐个看一下。
摘要
如果你想立即查看源代码或演示，请移步下面的链接：
源代码：
https://github.com/atapas/demolab/tree/master/code/src/demos/web-apis
演示：
https://demo.greenroots.info/categories/web-apis/
注意：Web API 只不过是使用原生 JavaScript 编写和公开的接口、函数、对象和属性。然而，Web API 的使用并不仅限于基于原生 JavaScript 的应用程序。在基于 Angular、React 或 Vue 开发的应用程序中使用它们也非常简单。
本文中演示 Web API 的所有示例都是用 ReactJS 编写的。你可以在上面提到的 GitHub 链接中找到它们。欢迎创建分支、修改及使用！
Web API 的一大痛点
使用 Web API 的一大痛点是，它们中的大多数还没有标准化。这意味着，对 Web API 的支持可能因浏览器供应商的不同而有所不同。例如，你可能会发现一个 API 可以在 Chrome 浏览器上使用，但是 Firefox 或 Edge 浏览器还不支持它。
我建议通过以下两种方法进行检查：
在 Can I Use 网站上查看 Web API 的支持情况，只需要输入名称即可；
如果特定的 Web API 不受支持，则实现回退或反馈。大多数 Web API 都提供了方法检查 Web API 是否受支持。当不受支持的时候，你可以实现回退，或者至少向用户提供反馈。
不那么知名但有用的 Web API
好了，让我们来看下这些 API，希望对你有用。
1. Fullscreen API
你是否需要在全屏模式下显示什么 DOM 元素？游戏应用程序、在线视频平台（如 YouTube）等是非常需要全屏的用例。
Fullscreen API 提供了以全屏模式显示特定元素（及其子元素）的方法。有一个方法可以让我们在不需要全屏模式时退出该模式。不仅如此，当 DOM 元素转换到全屏模式或脱离全屏模式时，这个 API 还可以帮助执行任何操作。
在下面的例子中，我最喜欢的圣诞老人可以轻松地进入全屏模式及退出。
你是否需要在全屏模式下显示什么 DOM 元素？游戏应用程序、在线视频平台（如 YouTube）等是非常需要全屏的用例。
Fullscreen API提供了以全屏模式显示特定元素（及其子元素）的方法。有一个方法可以让我们在不需要全屏模式时退出该模式。不仅如此，当 DOM 元素转换到全屏模式或脱离全屏模式时，这个 API 还可以帮助执行任何操作。
在下面的例子中，我最喜欢的圣诞老人可以轻松地进入全屏模式及退出。
在下面的代码中，manageFullScreen() 函数在一个 id 为 fs_id 的元素上使用 requestFullscreen()API。
const manageFullscreen = () => {
document.getElementById('fs_id').requestFullscreen();
}
Id 为 fs_id 的元素是一个包含子元素（即圣诞老人图片）的 DIV。
<div className="column">
<div id="fs_id">
<Img fixed={imageData.image.childImageSharp.fixed} alt="santa" />
</div>
<StyledButton
onClick={manageFullscreen}>
Enter Fullscreen with Santa
</StyledButton>
</div>
你可以检查一下浏览器是否支持 Fullscreen API。
if (document.fullscreenEnabled) {
setSupported(true);
} else {
setSupported(false);
}
{1}
另外可以留意下这两个有用的处理程序：
另外可以留意下这两个有用的处理程序：
onfullscreenchange：一个处理 fullscreenchange 事件的事件处理程序；
onfullscreenerror：一个处理 fullscreenerror 事件的事件处理程序。
演示链接：
https://demo.greenroots.info/web-apis/web-apis-fullscreen/
2. Clipboard Async API
什么是剪切板？
剪切板是一些操作系统提供的一个缓冲区，用于短期存储，以及应用程序内部和应用程序之间的数据传输。
使用剪切板主要可以执行三种操作，它们是copy、cut和paste。Clipboard API 提供 了响应这三种操作的能力。
有趣的是，复制内容到剪切板是开放的，不需要用户许可。但是，要将内容从剪切板粘贴到用户应用程序则需要授权。这是使用另一个名为 Permission API 的 Web API 实现的。
下面是一个简单的复制 - 粘贴操作示例：
下面的代码检查浏览器是否支持该 API：
if (navigator.clipboard
&& navigator.clipboard.read
&& navigator.clipboard.write) {
setSupported(true);
} else {
setSupported(false);
}
下面是将内容写入剪切板的 Async API 函数：
async function performCopy(event) {
event.preventDefault();
try {
await navigator.clipboard.writeText(copyText);
console.log(`${copyText} copied to clipboard`);
} catch (err) {
console.error('Failed to copy: ', err);
}
}
Async API 函数从剪切板读取内容，并用它做一些事情：
async function performPaste(event) {
event.preventDefault();
try {
const text = await navigator.clipboard.readText();
setPastetext(text);
console.log('Pasted content: ', text);
} catch (err) {
console.error('Failed to read clipboard contents: ', err);
}
}
注意：通过包含 Clipboard Async API，就可以不用 document.execCommad() 函数了，因为它现在已经过时了。
演示链接：
https://demo.greenroots.info/web-apis/web-apis-clipboard-apis/
