MDN之學習 Web 開發(一)【Web API簡介】

學習 Web 開發 >JavaScript 客戶端> Web API >Web API簡介

首先，我們將從一個高層次看看API - 它們是什麼；他們如何工作；如何在程式碼中使用它們，以及它們是如何組織的。我們也將看看不同主要類別的API以及它們的用途。

預備知識	基本計算機知識，對於HTML和CSS的基本理解（見JavaScript 第一步，建立JavaScript程式碼塊，JavaScript 物件入門）。
目標	熟悉API，他們可以做什麼，以及如何在程式碼中使用它們。

什麼是API?

應用程式介面（API）是以程式語言提供的結構，允許開發人員更容易地建立複雜的功能。它們抽象出更復雜的程式碼，並提供一些簡單的語法來使用。

來看一個現實世界中的例子：想想您的房子、公寓或其他住宅的電力供應，如果您想在您的房子裡使用一個裝置，您只需把它插入到一個插座中；您並不會直接把它連線到電源上 - 這樣做效率會非常低，而且如果您不是電工，這麼做將是困難和危險的。

圖片來自：Overloaded plug socket 提供者： The Clear Communication People於Flickr。

同樣，比如說，程式設計來顯示一些3D圖形，使用以更高階語言編寫的API（例如JavaScript或Python）將會比直接編寫直接控制計算機的GPU或其他圖形功能的低階程式碼（比如C或C++）來執行操作要容易得多。

客戶端JavaScript中的API

客戶端JavaScript中有很多可用的API — 他們本身並不是JavaScript語言的一部分，卻建立在JavaScript語言核心的頂部，為使用JavaScript程式碼提供額外的超強能力。他們通常分為兩類：

• 瀏覽器API內建於Web瀏覽器中，能從瀏覽器和電腦周邊環境中提取資料，並用來做有用的複雜的事情 。例如Geolocation API提供了一些簡單的JavaScript結構以獲得位置資料，因此您可以在Google地圖上標示您的位置。在後臺，瀏覽器確實使用一些複雜的低階程式碼（例如C++）與裝置的GPS硬體（或可以決定位置資料的任何設施）通訊來獲取位置資料並把這些資料返回給您的程式碼中使用瀏覽器環境；但是，這種複雜性通過API抽象出來，因而與您無關。
• 第三方API預設情況下不會內建於瀏覽器中，通常必須在Web中的某個地方獲取程式碼和資訊。例如Twitter API 使您能做一些顯示最新推文這樣的事情，它提供一系列特殊的結構，可以用來請求Twitter服務並返回特殊的資訊。

 

 

 

JavaScript，API和其他JavaScript工具之間的關係

如上所述，我們討論了什麼是客戶端JavaScript API，以及它們與JavaScript語言的關係。讓我們回顧一下，使其更清晰，並提及其他JavaScript工具的適用位置：

• JavaScript — 一種內建於瀏覽器的高階指令碼語言，您可以用來實現Web頁面/應用中的功能。注意JavaScript也可用於其他象Node這樣的的程式設計環境。但現在您不必考慮這些。
• 客戶端API — 內建於瀏覽器的結構程式，位於JavaScript語言頂部，使您可以更容易的實現功能。
• 第三方API — 置於第三方普通的結構程式（例如Twitter，Facebook），使您可以在自己的Web頁面中使用那些平臺的某些功能（例如在您的Web頁面顯示最新的Tweets）。
• JavaScript庫 — 通常是包含具有特定功能的一個或多個JavaScript檔案，把這些檔案關聯到您的Web頁以快速或授權編寫常見的功能。例如包含jQuery和Mootools
• JavaScript框架 — 從庫開始的下一步，JavaScript框架檢視把HTML、CSS、JavaScript和其他安裝的技術打包在一起，然後用來從頭編寫一個完整的Web應用。

API可以做什麼？

在主流瀏覽器中有大量的可用API，您可以在程式碼中做許多的事情，對此可以檢視MDN API index page。

常見瀏覽器API

特別地，您將使用的最常見的瀏覽器API類別（以及我們將更詳細地介紹的）是：

• 操作文件的API內建於瀏覽器中。最明顯的例子是DOM（文件物件模型）API，它允許您操作HTML和CSS — 建立、移除以及修改HTML，動態地將新樣式應用到您的頁面，等等。每當您看到一個彈出視窗出現在一個頁面上，或者顯示一些新的內容時，這都是DOM的行為。 您可以在在Manipulating documents中找到關於這些型別的API的更多資訊。
• 從伺服器獲取資料的API 用於更新網頁的一小部分是相當好用的。這個看似很小的細節能對網站的效能和行為產生巨大的影響 — 如果您只是更新一個股票列表或者一些可用的新故事而不需要從伺服器重新載入整個頁面將使網站或應用程式感覺更加敏感和“活潑”。使這成為可能的API包括XMLHttpRequest和Fetch API。您也可能會遇到描述這種技術的術語Ajax。您可以在Fetching data from the server找到關於類似的API的更多資訊。
• 用於繪製和操作圖形的API目前已被瀏覽器廣泛支援 — 最流行的是允許您以程式設計方式更新包含在HTML canvas 元素中的畫素資料以建立2D和3D場景的Canvas和WebGL。例如，您可以繪製矩形或圓形等形狀，將影象匯入到畫布上，然後使用Canvas API對其應用濾鏡（如棕褐色濾鏡或灰度濾鏡），或使用WebGL建立具有光照和紋理的複雜3D場景。這些API經常與用於建立動畫迴圈的API（例如window.requestAnimationFrame()）和其他API一起不斷更新諸如動畫和遊戲之類的場景。
• 音訊和視訊API例如HTMLMediaElement，Web Audio API和WebRTC允許您使用多媒體來做一些非常有趣的事情，比如建立用於播放音訊和視訊的自定義UI控制元件，顯示字幕字幕和您的視訊，從網路攝像機抓取視訊，通過畫布操縱（見上），或在網路會議中顯示在別人的電腦上，或者新增效果到音軌（如增益，失真，平移等） 。
• 裝置API基本上是以對網路應用程式有用的方式操作和檢索現代裝置硬體中的資料的API。我們已經討論過訪問裝置位置資料的地理定位API，因此您可以在地圖上標註您的位置。其他示例還包括通過系統通知（參見Notifications API）或振動硬體（參見Vibration API）告訴使用者Web應用程式有用的更新可用。
• 客戶端儲存API在Web瀏覽器中的使用變得越來越普遍 - 如果您想建立一個應用程式來儲存頁面載入之間的狀態，甚至讓裝置在處於離線狀態時可用，那麼在客戶端儲存資料將會是非常有用的。例如使用Web Storage API的簡單的鍵 - 值儲存以及使用IndexedDB API的更復雜的表格資料儲存。

常見第三方API

第三方API種類繁多; 下列是一些比較流行的你可能遲早會用到的第三方API:

• The Twitter API, 允許您在您的網站上展示您最近的推文等。
• The Google Maps API 允許你在網頁上對地圖進行很多操作（這很有趣，它也是Google地圖的驅動器）。現在它是一整套完整的，能夠勝任廣泛任務的API。其能力已經被Google Maps API Picker見證。
• The Facebook suite of API 允許你將很多Facebook生態系統中的功能應用到你的app，使之受益，比如說它提供了通過Facebook賬戶登入、接受應用內購買、推送有針對性的廣告活動等功能。
• The YouTube API, 允許你將Youtube上的視訊嵌入到網站中去，同時提供搜尋Youtube，建立播放列表等眾多功能。
• The Twilio API, 其為您的app提供了針對語音通話和視訊聊天的框架，以及從您的app傳送簡訊息或多媒體資訊等諸多功能。

API如何工作？

不同的JavaScript API以稍微不同的方式工作，但通常它們具有共同的特徵和相似的主題。

它們是基於物件的

 API使用一個或多個 JavaScript objects 在您的程式碼中進行互動，這些物件用作API使用的資料（包含在物件屬性中）的容器以及API提供的功能（包含在物件方法中）。

讓我們回到Geolocation API的例子 - 這是一個非常簡單的API，由幾個簡單的物件組成：

• Geolocation, 其中包含三種控制地理資料檢索的方法
• Position, 表示在給定的時間的相關裝置的位置。 — 它包含一個當前位置的Coordinates物件。還包含了一個時間戳,這個時間戳表示獲取到位置的時間。
• Coordinates, 其中包含有關裝置位置的大量有用資料，包括經緯度，高度，運動速度和運動方向等。

那麼這些物件如何相互作用？如果您檢視我們的 maps-example.html 示例 (也可以參考:see it live also), 您將看到以下程式碼：:

navigator.geolocation.getCurrentPosition(function(position) {
  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true
  }
  var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
});

我們首先要使用Geolocation.getCurrentPosition()方法返回裝置的當前位置。瀏覽器的 Geolocation物件通過呼叫Navigator.geolocation屬性來訪問.

navigator.geolocation.getCurrentPosition(function(position) { ... });

這相當於做同樣的事情

var myGeo = navigator.geolocation;
myGeo.getCurrentPosition(function(position) { ... });

但是我們可以使用 "點運算子" 將我們的屬性和方法的訪問連結在一起，減少了我們必須寫的行數。

Geolocation.getCurrentPosition() 方法只有一個必須的引數，這個引數是一個匿名函式，當裝置的當前位置被成功取到時，這個函式會執行。  這個函式本身有一個引數，它包含一個表示當前位置資料的 Position 物件。

僅在操作完成時呼叫函式的模式在JavaScript API中非常常見 - 確保一個操作已經完成，然後在另一個操作中嘗試使用該操作返回的資料。這些被稱為 asynchronous  “非同步”操作。由於獲取裝置的當前位置依賴於外部元件（裝置的GPS或其他地理定位硬體）， 我們不能保證會立即使用返回的資料。 因此，這樣子是行不通的：

var position = navigator.geolocation.getCurrentPosition();
var myLatitude = position.coords.latitude;

如果第一行還沒有返回結果，則第二行將會出現錯誤，因為位置資料還不可用。 出於這個原因，涉及同步操作的API被設計為使用 callback functions “回撥函式”，或更現代的 Promises 系統，這些系統在ECMAScript 6中可用，並被廣泛用於較新的API。

我們將Geolocation API與第三方API（Google Maps API）相結合， — 我們正在使用它來繪製Google地圖上由 getCurrentPosition()返回的位置。 我們通過連結到頁面上使這個API可用。 — 你會在HTML中找到這一行：

<script type="text/javascript" src="https://maps.google.com/maps/API/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>

要使用該API, 我們首先使用google.maps.LatLng()建構函式建立一個LatLng物件例項， 該建構函式需要我們的地理定位 Coordinates.latitude 和 Coordinates.longitude值作為引數：

var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

該物件例項被設定為 myOptions物件的center屬性的值。然後我們通過呼叫google.maps.Map()建構函式建立一個物件例項來表示我們的地圖， 並傳遞它兩個引數 — 一個引數是我們要渲染地圖的 div 元素的引用 (ID為 map_canvas), 以及另一個引數是我們在上面定義的myOptions物件

var myOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.TERRAIN,
  disableDefaultUI: true
}

var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);

這樣做一來，我們的地圖呈現了。

最後一塊程式碼突出顯示了您將在許多API中看到的兩種常見模式。 首先，API物件通常包含建構函式，可以呼叫這些建構函式來建立用於編寫程式的物件的例項。 其次，API物件通常有幾個可用的options(如上面的myOptions物件)，可以調整以獲得您的程式所需的確切環境(根據不同的環境,編寫不同的Options物件)。 API建構函式通常接受options物件作為引數，這是您設定這些options的地方。

它們有可識別的入口點

使用API時，應確保知道API入口點的位置。 在Geolocation API中，這非常簡單 - 它是 Navigator.geolocation 屬性, 它返回瀏覽器的 Geolocation 物件，所有有用的地理定位方法都可用。

文件物件模型 (DOM) API有一個更簡單的入口點 —它的功能往往被發現掛在 Document 物件, 或任何你想影響的HTML元素的例項，例如：

var em = document.createElement('em'); // create a new em element
var para = document.querySelector('p'); // reference an existing p element
em.textContent = 'Hello there!'; // give em some text content
para.appendChild(em); // embed em inside para

其他API具有稍微複雜的入口點，通常涉及為要編寫的API程式碼建立特定的上下文。例如，Canvas API的上下文物件是通過獲取要繪製的 canvas 元素的引用來建立的，然後呼叫它的HTMLCanvasElement.getContext()方法：

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

然後，我們想通過呼叫內容物件 (它是CanvasRenderingContext2D的一個例項)的屬性和方法來實現我們想要對畫布進行的任何操作, 例如：

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

它們使用事件來處理狀態的變化

我們之前已經在課程中討論了事件，在我們的  事件介紹文章中 - 詳細介紹了客戶端Web事件是什麼以及它們在程式碼中的用法。如果您還不熟悉客戶端Web API事件的工作方式，則應繼續閱讀。

一些Web API不包含事件，但有些包含一些事件。當事件觸發時，允許我們執行函式的處理程式屬性通常在單獨的 “Event handlers”(事件處理程式) 部分的參考資料中列出。作為一個簡單的例子，XMLHttpRequest 物件的例項  （每一個例項都代表一個到伺服器的HTTP請求,來取得某種新的資源）都有很多事件可用，例如  onload 事件在成功返回時就觸發包含請求的資源，並且現在就可用。

下面的程式碼提供了一個簡單的例子來說明如何使用它：

var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();

request.onload = function() {
  var superHeroes = request.response;
  populateHeader(superHeroes);
  showHeroes(superHeroes);
}

前五行指定了我們要獲取的資源的位置，使用XMLHttpRequest() 建構函式建立請求物件的新例項  ，開啟HTTP 的 GET 請求以取得指定資源，指定響應以JSON格式傳送，然後傳送請求。

然後 onload 處理函式指定我們如何處理響應。 我們知道請求會成功返回，並在需要載入事件（如onload 事件）之後可用（除非發生錯誤），所以我們將包含返回的JSON的響應儲存在superHeroes變數中，然後將其傳遞給兩個不同的函式以供進一步處理。

它們在適當的地方有額外的安全機制

WebAPI功能受到與JavaScript和其他Web技術（例如同源政策）相同的安全考慮 但是他們有時會有額外的安全機制。例如，一些更現代的WebAPI將只能在通過HTTPS提供的頁面上工作，因為它們正在傳輸潛在的敏感資料（例如  服務工作者  和  推送）。

另外，一旦呼叫WebAPI請求，使用者就可以在您的程式碼中啟用一些WebAPI請求許可權。作為一個例子，在載入我們之前的Geolocation  示例時，您可能注意到了類似下面的對話方塊  ：

該  通知API  請求以類似的方式許可：

這些許可提示會被提供給使用者以確保安全 - 如果這些提示不在適當位置，那麼網站可能會在您不知情的情況下開始祕密跟蹤您的位置，或者通過大量惱人的通知向您傳送垃圾郵件。