每个开发人员都应该了解的基本 Web API

Die Beherrschung verschiedener Web-APIs kann die Funktionalität und Benutzererfahrung Ihrer Webanwendung erheblich verbessern. Diese APIs stellen Entwicklern Tools zur Verfügung, mit denen sie auf bisher unmögliche Weise mit Browsern interagieren können. Hier untersuchen wir 12 wichtige Web-APIs, erläutern ihre Funktionalität und stellen Codebeispiele bereit, die Ihnen bei der Implementierung in Ihren Projekten helfen.

---

1. Speicher-API

Mit der Web Storage API (einschließlich localStorage und sessionStorage) können Sie Schlüssel-Wert-Paare in einem Webbrowser speichern. Dies ist nützlich, um Benutzereinstellungen zu speichern oder Daten zwischen Sitzungen beizubehalten.

Codebeispiel:

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

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

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

Erfahren Sie mehr über die Speicher-API

---

2. Zahlungsanforderungs-API

Die Payment Request API vereinfacht den Prozess der Annahme von Zahlungen im Web, indem sie eine konsistente Benutzererfahrung über verschiedene Zahlungsmethoden hinweg bietet.

Codebeispiel:

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);
  });
}

Erfahren Sie mehr über die Zahlungsanforderungs-API

---

3. DOM-API

Mit der DOM (Document Object Model) API können Sie die Struktur, den Stil und den Inhalt des Dokuments manipulieren. Dies ist eine der am häufigsten verwendeten APIs in der Webentwicklung.

Codebeispiel:

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

Erfahren Sie mehr über die DOM-API

---

4. HTML-Sanitizer-API

Die HTML Sanitizer API hilft dabei, nicht vertrauenswürdige HTML-Inhalte zu bereinigen, um Sicherheitsrisiken wie XSS-Angriffe (Cross-Site Scripting) zu vermeiden.

Codebeispiel:

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

Erfahren Sie mehr über die HTML Sanitizer API

---

5. Canvas-API

Mit der Canvas-API können Sie mithilfe der -Funktion Grafiken und Animationen auf einer Webseite zeichnen. Element, perfekt zum Erstellen von Spielen, Visualisierungen oder benutzerdefinierten Grafiken.

Codebeispiel:

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

Erfahren Sie mehr über die Canvas-API

---

6. Verlaufs-API

Mit der Verlaufs-API können Sie mit dem Sitzungsverlauf des Browsers interagieren und so den Verlaufsstapel des Browsers bearbeiten (z. B. pushState, replaceState).

Codebeispiel:

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

Erfahren Sie mehr über die Verlaufs-API

---

7. Zwischenablage-API

Mit der Zwischenablage-API können Sie aus der Zwischenablage lesen und in sie schreiben und so Funktionen wie die Funktion zum Kopieren und Einfügen aktivieren.

Codebeispiel:

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

Erfahren Sie mehr über die Clipboard-API

---

8. Vollbild-API

Mit der Vollbild-API können Sie ein bestimmtes Element oder die gesamte Webseite im Vollbildmodus präsentieren, was für Videos oder immersive Erlebnisse wie Spiele nützlich ist.

Codebeispiel:

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

Erfahren Sie mehr über die Vollbild-API

---

9. FormData-API

Die FormData-API vereinfacht den Prozess der Erstellung von Schlüssel/Wert-Paaren, die Formularfelder und ihre Werte darstellen, um die Übermittlung von Formulardaten über XHR oder Fetch zu erleichtern.

Codebeispiel:

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!');
  }
});

Erfahren Sie mehr über die FormData-API

---

10. API abrufen

Die Abruf-API bietet eine moderne und flexible Möglichkeit, asynchrone Netzwerkanfragen zu stellen und bietet eine einfachere, versprochene Alternative zu XMLHttpRequest.

Codebeispiel:

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

Erfahren Sie mehr über die Fetch-API

---

11. Drag-and-Drop-API

Mit der Drag-and-Drop-API können Sie Drag-and-Drop-Funktionen in Ihren Webanwendungen implementieren und so die Benutzerinteraktionen mit intuitiven UI-Elementen verbessern.

Codebeispiel:

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

Erfahren Sie mehr über die Drag-and-Drop-API

---

12. Geolocation-API

Die Geolocation-API bietet Zugriff auf geografische Standortinformationen vom Gerät des Benutzers und ermöglicht so standortbasierte Dienste und Funktionen.

Codebeispiel:

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

Erfahren Sie mehr über die Geolocation-API

---

Abschluss

Diese Web-APIs eröffnen eine Welt voller Möglichkeiten für die Erstellung hochgradig interaktiver, benutzerfreundlicher Webanwendungen. Von Speicherung und Zahlungen bis hin zu Geolokalisierung und Grafiken – die Beherrschung dieser APIs kann Ihre Webentwicklungsfähigkeiten auf die nächste Stufe heben.

Wenn Sie verstehen, wie Sie diese APIs effektiv in Ihren Projekten implementieren, können Sie sowohl die Funktionalität als auch das Benutzererlebnis erheblich verbessern.

Referenzen:

• MDN-Webdokumente – Einführung in Web-APIs
• W3Schools – Einführung in Web-APIs
• Mozilla Developer Network – Web-APIs
• Web-APIs – Microsoft Learn

Wenn Sie diesen Leitfaden nützlich fanden, denken Sie bitte darüber nach, ihn mit anderen zu teilen! ?

---

本博客提供了每个开发人员都应该了解的基本 Web API 的最新概述，同时为每个 API 提供了清晰的解释和实用的代码示例。

以上是每个开发人员都应该了解的基本 Web API的详细内容。更多信息请关注PHP中文网其他相关文章！