回到基础：JavaScript API[每日前端夜话0xA0]

JavaScript 中的 API

JavaScript 有许多可用的 API，通常被定义为浏览器 API或第三方 API。我们来分别学习它们。

浏览器 API

浏览器 API 内置于浏览器中 —— 包含来自浏览器的数据。通过这些数据，我们可以做很多有用的事情，从简单地操作 window 或 element 到使用 WebGL 之类的 API 生成复杂的效果。

一些常见的浏览器 API 是：

用于文档操作的API： DOM（文档对象模型）实际上是一个 API！它允许你操作 HTML 和 CSS —— 创建，删除和更改 HTML，动态地将新样式应用于页面等。
用于获取服务器数据的 API：例如 XMLHttpRequest 和 Fetch API，我们经常把它们用于数据交换和局部页面的更新。这种技术通常称为 Ajax。
用于处理图形的API：这里我们讨论的是 Canvas 和 WebGL，它允许你以编程方式更新 HTML 的 <canvas> 元素中包含的像素数据，用来创建 2D 和 3D 场景。
音频/视频API ：例如 HTMLMediaElement 和 Web Audio API。你可以用它们来创建用于播放音频和视频的自定义控件，显示文字轨道（如字幕和字幕）以及视频。对于音频，你可以为音轨添加效果（例如增益，失真等）。
设备API：用于操作和检索设备硬件中的数据。例如通知用户更新可用。

第三方 API

第三方 API 并未内置于浏览器中，你需要从其他位置找到其代码和相关信息。你可以访问第三方 API并使用API提供的方法。

一些常见的第三方 API 有：

Openweathermap.org：允许你查询天气数据。例如你可以捕获用户位置并显示其当前温度。
Twitter API：可以在你的网站上显示自己的最新推文。
Google Maps API：允许你完全自定义要包含在网页中的地图。
YouTube API：允许你在自己的网站上嵌入YouTube视频，搜索YouTube并自动生成播放列表。
Twilio API：此API提供了一个框架，用于在你的应用中构建语音和视频通话功能，从你的应用发送短信或彩信等。

那么 API 是如何运作的？

尽管不同的 API 以不同的方式工作，但它们都有一些共同的基本因素，让我们来看一下：

API 基于对象！

你写的与 API 进行交互的代码将使用一个或多个 JavaScript 对象。这些对象充当 API 使用的数据的容器（包含在对象属性中）以及 API 提供的功能（包含在对象方法中）。

让我们看一下 Web Audio API 的例子 —— API 由许多对象组成。例如，我们有：

AudioContext 表示一个音频的图形界面，可以操纵浏览器内的音频播放，并有许多方法和属性可用于操作该音频。
MediaElementAudioSourceNode 表示一个元素，包含你想要在音频上下文中播放和操作的声音。
AudioDestinationNode 表示音频的目的地，即计算机上实际输出的设备 —— 通常是扬声器或耳机。

这些对象是怎样相互作用的？我们来看看这段 HTML：

1<audio src = "funkybeats.mp3"></audio>2<button class = "paused">Play</button>3<br>4<input type = "range" min = "0" max = "1" step = "0.10" value = "1" class="volume">

在这里有一个 <audio> 元素，我们用它把 MP3 嵌入到页面中，代码中不包含任何默认浏览器控件。然后添加了一个 <button>，用它来播放和停止音乐，还有一个 <input> 元素，用来在播放时调整音量。

让我们看看这个例子的 JavaScript 代码.

首先创建一个 AudioContext 实例来操作我们的音轨：

1const AudioContext = window.AudioContext || window.webkitAudioContext;2const audioCtx = new AudioContext();

然后创建存储对 <audio>、<button> 和 <input> 元素的引用的常量，并用 AudioContext.createMediaElementSource() 方法创建一个 MediaElementAudioSourceNode 来表示我们的音频源，也就是它将要播放的 <audio> 元素：

1const audioElement = document.querySelector('audio');2const playBtn = document.querySelector('button');3const volumeSlider = document.querySelector('.volume');const audioSource = audioCtx.createMediaElementSource(audioElement);

接下来，我们将包含几个事件处理程序，每当按下按钮时，它们会在播放和暂停之间切换，并在歌曲播放完毕后重置为初始状态：

1// Play + Pause audio 2playBtn.addEventListener('click', function() { 3    // check if context is in suspended state (autoplay policy) 4    if (audioCtx.state === 'suspended') { 5        audioCtx.resume(); 6    }  // If track is stopped, play it 7    if (this.getAttribute('class') === 'paused') { 8        audioElement.play(); 9        this.setAttribute('class', 'playing');10        this.textContent = 'Pause'11  // If track is playing, stop it12} else if (this.getAttribute('class') === 'playing') {13        audioElement.pause();14        this.setAttribute('class', 'paused');15        this.textContent = 'Play';16    }17});// If the track ends18audioElement.addEventListener('ended', function() {19    playBtn.setAttribute('class', 'paused');20    this.textContent = 'Play'21});

注意：正在使用的 play() 和 pause() 方法实际上是 HTMLMediaElement API的一部分，而不是 Web Audio API（尽管它们密切相关！）。

现在我们用 AudioContext.createGain() 方法创建一个 GainNode 对象，该方法可用于调整音频的音量，并创建另一个事件处理句柄，用于每当滑块值改变时改变音频图形增益（音量）的值：

1const gainNode = audioCtx.createGain();volumeSlider.addEventListener('input', function() {2    gainNode.gain.value = this.value;3});

最后用 AudioNode.connect()方法将音频图中的不同节点连接起来：

1audioSource.connect(gainNode).connect(audioCtx.destination);

音频从源开始，然后连接到增益节点，以便调整音频的音量。然后将增益节点连接到目标节点，以便可以在你的计算机上播放声音（AudioContext.destination 属性表示计算机硬件上可用的默认 AudioDestinationNode，例如你的扬声器）。

API 具有可识别的入口点

无论何时使用API，请确保知道入口点的位置！在 Web Audio API 中，它是 AudioContext 对象，在你需要进行任何操作时都要用到它。

当使用文档对象模型（DOM）API 时，它的特征往往是挂在 Document 对象上，或者是你想以某种方式影响的HTML元素的实例，例如：

1// Create a new em element2let em = document.createElement('em'); // Reference an existing p element3let p = document.querySelector('p'); // Give em some text content4em.textContent = 'Hello, world!'; // Embed em inside 5p.appendChild(em);

Canvas API 还依赖于获取用于操作事物的上下文对象。它的上下文对象是通过获取你想要绘制的 <canvas> 元素的引用，然后调用它的 HTMLCanvasElement.getContext() 方法来创建的：

1let canvas = document.querySelector('canvas');2let ctx = canvas.getContext('2d');

然后，我们想要对画布做的任何事情都是通过调用上下文对象的属性和方法（它是 CanvasRenderingContext2D 的一个实例）来实现的例如：

1Circle.prototype.draw = function() {2    ctx.beginPath();3    ctx.fillStyle = this.color;4    ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);5    ctx.fill();6};

API 处理状态随事件的变化

当使用 XMLHttpRequest 对象（每个对象表示对服务器的 HTTP 请求以检索新资源）时，我们有许多可用的事件，例如当成功返回包含请求资源的响应时，会触发 load 事件。

以下代码演示了该如何使用它：

 1let requestURL = 'https://a-website.com/json/usernames.json'; 2let request = new XMLHttpRequest(); 3request.open('GET', requestURL); 4request.responseType = 'json'; 5request.send(); 6request.onload = function() { 7    let usernames = request.response; 8    populateHeader(usernames); 9    showNames(usernames);10}

前五行指定我们想要获取的资源的位置，使用 XMLHttpRequest() 构造函数创建请求对象的新实例，打开HTTP GET 请求来检索指定的资源，并指定响应以 JSON 格式发送，然后发送请求。

然后，onload 函数指定对响应的处理方式。我们知道响应将在 load 事件需要之后成功返回并可用（除非发生错误），因此我们把包含返回的 JSON 的响应保存在 usernames 变量中，然后将其传递给两个不同的函数进行进一步处理。

在下一篇文章中，我们将更详细地介绍从服务器获取数据。

结论

这就是今天的内容！我们已经了解了 API 是什么以及它们如何工作，并比较了浏览器和第三方 API，最后研究了许多 API 的一些常见特征。我希望这篇介绍能让你更深入地了解 API 是什么，以及我们如何在项目中使用它们！

原文：https://itnext.io/javascript-fundamentals-understanding-apis-3552c822c3e8