回到基础JavaScript-API

作者：Timothy Robards

翻译：疯狂的技术宅

原文：https://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 是什么，以及我们如何在项目中使用它们！

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

• 深入理解 Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13 个帮你提高开发效率的现代 CSS 框架
• 快速上手 BootstrapVue
• JavaScript 引擎是如何工作的？从调用栈到 Promise 你需要知道的一切
• WebSocket 实战：在 Node 和 React 之间进行实时通信
• 关于 Git 的 20 个面试题
• 深入解析 Node.js 的 console.log
• Node.js 究竟是什么？
• 30 分钟用 Node.js 构建一个 API 服务器
• Javascript 的对象拷贝
• 程序员 30 岁前月薪达不到 30K，该何去何从
• 14 个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩展插件
• Node.js 多线程完全指南
• 把 HTML 转成 PDF 的 4 个方案及实现

• 更多文章 …