回到基礎：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 是什麼，以及咱們如何在項目中使用它們！

歡迎關注前端公衆號：前端先鋒，領取前端工程化實用工具包。