每個開發人員都應該了解的基本 Web API

掌握各種 Web API 可以顯著增強 Web 應用程式的功能和使用者體驗。這些 API 為開發人員提供了以以前不可能的方式與瀏覽器互動的工具。在這裡，我們將探索 12 個基本的 Web API，解釋它們的功能，並提供程式碼範例來幫助您在專案中實現它們。

---

1. 儲存API

Web Storage API（包括 localStorage 和 sessionStorage）可讓您在 Web 瀏覽器中儲存鍵值對。它對於保存使用者首選項或在會話之間保留資料非常有用。

程式碼範例：

// Save data to localStorage
localStorage.setItem('userName', 'Vishal');

// Retrieve data from localStorage
const user = localStorage.getItem('userName');

// Clear localStorage
localStorage.removeItem('userName');

了解更多關於儲存 API 的資訊

---

2. 支付請求接口

付款請求 API 透過在各種付款方式中提供一致的使用者體驗，簡化了在網路上接受付款的流程。

程式碼範例：

if (window.PaymentRequest) {
  const payment = new PaymentRequest([{
    supportedMethods: 'basic-card'
  }], {
    total: { label: 'Total', amount: { currency: 'USD', value: '10.00' } }
  });

  payment.show().then(result => {
    // Process payment result
    console.log(result);
  }).catch(error => {
    console.error('Payment failed:', error);
  });
}

了解更多關於付款請求 API 的資訊

---

3. DOM API

DOM（文件物件模型）API 允許您操作文件的結構、樣式和內容。這是 Web 開發中使用最廣泛的 API 之一。

程式碼範例：

// Select and update an element
const element = document.querySelector('#myElement');
element.textContent = 'Hello, World!';

了解更多關於 DOM API 的資訊

---

4. HTML 清理 API

HTML Sanitizer API 有助於清理不受信任的 HTML 內容，以避免 XSS（跨站腳本）攻擊等安全風險。

程式碼範例：

const dirtyHTML = '<img  src="/static/imghwm/default1.png" data-src="javascript:alert(1)" class="lazy" alt="每個開發人員都應該了解的基本 Web API" >';
const cleanHTML = sanitizer.sanitize(dirtyHTML);
console.log(cleanHTML); // Safe HTML output

了解更多 HTML Sanitizer API 的資訊

---

5. 畫布API

Canvas API 允許您使用 在網頁上繪製圖形和動畫。元素，非常適合創建遊戲、視覺化或自訂圖形。

程式碼範例：

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = 'blue';
context.fillRect(10, 10, 150, 100);

了解更多關於 Canvas API 的資訊

---

6.歷史API

History API 可讓您與瀏覽器的會話歷史記錄進行交互，從而允許您操作瀏覽器的歷史堆疊（例如，pushState、replaceState）。

程式碼範例：

history.pushState({ page: 1 }, 'title', '/page1');
history.replaceState({ page: 2 }, 'title', '/page2');

了解更多歷史API

---

7. 剪貼簿API

剪貼簿 API 讓您可以讀取和寫入剪貼簿，從而啟用複製貼上功能等功能。

程式碼範例：

navigator.clipboard.writeText('Hello, Clipboard!').then(() => {
  console.log('Text copied to clipboard');
}).catch(err => {
  console.error('Failed to copy text:', err);
});

了解更多關於剪貼簿 API 的資訊

---

8. 全螢幕API

全螢幕 API 讓您以全螢幕模式呈現特定元素或整個網頁，這對於視訊或遊戲等沉浸式體驗非常有用。

程式碼範例：

document.getElementById('myElement').requestFullscreen().catch(err => {
  console.error(`Error attempting to enable full-screen mode: ${err.message}`);
});

了解更多關於全螢幕 API 的資訊

---

9. 表單資料API

FormData API 簡化了建立表示表單欄位及其值的鍵/值對的過程，以便透過 XHR 或 Fetch 更輕鬆地提交表單資料。

程式碼範例：

const form = document.querySelector('form');
const formData = new FormData(form);
fetch('/submit', {
  method: 'POST',
  body: formData
}).then(response => {
  if (response.ok) {
    console.log('Form submitted successfully!');
  }
});

了解更多關於 FormData API 的資訊

---

10. 取得API

Fetch API 提供了一種現代且靈活的方式來發出非同步網路請求，為 XMLHttpRequest 提供了更簡單、基於承諾的替代方案。

程式碼範例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error fetching data:', error));

了解更多關於 Fetch API 的資訊

---

11.拖放API

拖放 API 讓您在 Web 應用程式中實現拖放功能，從而透過直覺的 UI 元素增強使用者互動。

程式碼範例：

const item = document.getElementById('item');
item.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', item.id);
});

了解更多關於拖放 API 的資訊

---

12. 地理定位API

地理定位 API 提供對用戶設備地理位置資訊的訪問，從而啟用基於位置的服務和功能。

程式碼範例：

navigator.geolocation.getCurrentPosition((position) => {
  console.log(`Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`);
}, (error) => {
   console.error(`Error getting location: ${error.message}`);
});

了解更多有關地理定位 API 的資訊

---

結論

這些 Web API 為創建高度互動、用戶友好的 Web 應用程式開闢了無限可能。從儲存和支付到地理定位和圖形，掌握這些 API 可以將您的 Web 開發技能提升到一個新的水平。

透過了解如何在專案中有效地實現這些 API，您可以顯著增強功能和使用者體驗。

參考：

• MDN Web 文件 - Web API 簡介
• W3Schools - Web API 簡介
• Mozilla 開發者網路 - Web API
• Web API - Microsoft Learn

如果您發現本指南有用，請考慮與其他人分享！ ？

---

Ce blog fournit un aperçu mis à jour des API Web essentielles que tout développeur devrait connaître, tout en incorporant des explications claires et des exemples de code pratiques pour chacune.

以上是每個開發人員都應該了解的基本 Web API的詳細內容。更多資訊請關注PHP中文網其他相關文章！