回到基础：JavaScript API

做者：Timothy Robards

翻译：疯狂的技术宅

原文：itnext.io/javascript-…

未经容许严禁转载

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 表示一个 <audio> 元素，包含你想要在音频上下文中播放和操做的声音。
• AudioDestinationNode 表示音频的目的地，即计算机上实际输出的设备 —— 一般是扬声器或耳机。

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

<audio src = "funkybeats.mp3"></audio>
<button class = "paused">Play</button>
<br>
<input type = "range" min = "0" max = "1" step = "0.10" value = "1" class="volume">
复制代码

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

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

首先建立一个 AudioContext 实例来操做咱们的音轨：

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();
复制代码

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

const audioElement = document.querySelector('audio');
const playBtn = document.querySelector('button');
const volumeSlider = document.querySelector('.volume');const audioSource = audioCtx.createMediaElementSource(audioElement);
复制代码

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

// Play + Pause audio
playBtn.addEventListener('click', function() {
    // check if context is in suspended state (autoplay policy)
    if (audioCtx.state === 'suspended') {
        audioCtx.resume();
    }  // If track is stopped, play it
    if (this.getAttribute('class') === 'paused') {
        audioElement.play();
        this.setAttribute('class', 'playing');
        this.textContent = 'Pause'
  // If track is playing, stop it
} else if (this.getAttribute('class') === 'playing') {
        audioElement.pause();
        this.setAttribute('class', 'paused');
        this.textContent = 'Play';
    }
});// If the track ends
audioElement.addEventListener('ended', function() {
    playBtn.setAttribute('class', 'paused');
    this.textContent = 'Play'
});
复制代码

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

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

const gainNode = audioCtx.createGain();volumeSlider.addEventListener('input', function() {
    gainNode.gain.value = this.value;
});
复制代码

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

audioSource.connect(gainNode).connect(audioCtx.destination);
复制代码

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

API 具备可识别的入口点

不管什么时候使用API，请确保知道入口点的位置！在 Web Audio API 中，它是 AudioContext 对象，在你须要进行任何操做时都要用到它。

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

// Create a new em element
let em = document.createElement('em'); // Reference an existing p element
let p = document.querySelector('p'); // Give em some text content
em.textContent = 'Hello, world!'; // Embed em inside 
p.appendChild(em);
复制代码

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

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
复制代码

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

Circle.prototype.draw = function() {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
    ctx.fill();
};
复制代码

API 处理状态随事件的变化

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

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

let requestURL = 'https://a-website.com/json/usernames.json';
let request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
    let usernames = request.response;
    populateHeader(usernames);
    showNames(usernames);
}
复制代码

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

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

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

结论

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

欢迎关注前端公众号：前端先锋，领取前端工程化实用工具包。