Richtlinien für das Schreiben von JavaScript-Codebeispielen

Dieser Abschnitt erklärt die allgemeinen Richtlinien, die beim Schreiben von JavaScript-Codebeispielen zu beachten sind. Die späteren Abschnitte werden spezifischere Details behandeln.

Meinungen zur richtigen Einrückung, Leerzeichen und Zeilenlängen waren schon immer kontrovers. Diskussionen über diese Themen lenken von der Erstellung und Pflege von Inhalten ab.

Bei MDN Web Docs verwenden wir Prettier als Code-Formatter, um den Code-Stil konsistent zu halten (und um themenfremde Diskussionen zu vermeiden). Sie können unsere Konfigurationsdatei einsehen, um mehr über die aktuellen Regeln zu erfahren, und die Prettier Dokumentation lesen.

Prettier formatiert den gesamten Code und sorgt für einen konsistenten Stil. Trotzdem gibt es ein paar zusätzliche Regeln, die Sie beachten müssen.

Neue Funktionen können genutzt werden, sobald jeder große Browser — Chrome, Edge, Firefox und Safari — sie unterstützt.

Verwenden Sie zur Erstellung von Arrays Literale und keine Konstruktoren.

Erstellen Sie Arrays so:

const visitedCities = [];

Nicht auf diese Weise beim Erstellen von Arrays:

const visitedCities = new Array(length);

Beim Hinzufügen von Elementen zu einem Array verwenden Sie push() und keine direkte Zuweisung. Betrachten Sie das folgende Array:

const pets = [];

Fügen Sie Elemente zu dem Array so hinzu:

pets.push("cat");

Fügen Sie keine Elemente zu dem Array hinzu auf diese Weise:

pets[pets.length] = "cat";

Das Schreiben asynchroner Codes verbessert die Leistung und sollte nach Möglichkeit verwendet werden. Insbesondere können Sie verwenden:

• Promises
• async/await

Wenn beide Techniken möglich sind, bevorzugen wir die einfachere async/await-Syntax. Leider können Sie await auf oberster Ebene nicht verwenden, es sei denn, Sie befinden sich in einem ECMAScript-Modul. CommonJS-Module, die von Node.js verwendet werden, sind keine ES-Module. Wenn Ihr Beispiel überall verwendet werden soll, vermeiden Sie es, await auf oberster Ebene zu verwenden.

Kommentare sind entscheidend, um gute Codebeispiele zu schreiben. Sie klären die Absicht des Codes und helfen Entwicklern, ihn zu verstehen. Achten Sie besonders auf sie.

• Wenn der Zweck oder die Logik des Codes nicht offensichtlich ist, fügen Sie einen Kommentar mit Ihrer Absicht hinzu, wie unten gezeigt:

  js

  let total = 0;
  
  // Calculate the sum of the four first elements of arr
  for (let i = 0; i < 4; i++) {
    total += arr[i];
  }
  

  Andererseits ist es keine gute Nutzung von Kommentaren, den Code im Text wiederzugeben:

  js

  let total = 0;
  
  // For loop from 1 to 4
  for (let i = 0; i < 4; i++) {
    // Add value to the total
    total += arr[i];
  }
  

• Kommentare sind auch nicht notwendig, wenn Funktionen explizite Namen haben, die beschreiben, was sie tun. Schreiben Sie:

  js

  closeConnection();
  

  Schreiben Sie nicht:

  js

  closeConnection(); // Closing the connection
  

Einzeilige Kommentare werden mit // markiert, im Gegensatz zu Blockkommentaren, die zwischen /* ... */ eingeschlossen sind.

Im Allgemeinen verwenden Sie einzeilige Kommentare, um Code zu kommentieren. Autoren müssen jede Zeile des Kommentars mit // markieren, damit es leichter ist, kommentierte Codes visuell zu bemerken. Darüber hinaus ermöglicht diese Konvention das Auskommentieren von Codeabschnitten mit /* … */ während der Fehlersuche.

• Lassen Sie ein Leerzeichen zwischen den Schrägstrichen und dem Kommentar. Beginnen Sie mit einem Großbuchstaben, wie in einem Satz, aber enden Sie den Kommentar nicht mit einem Punkt.

  js

  // This is a well-written single-line comment
  

• Wenn ein Kommentar nicht sofort nach einer neuen Einrückungsebene beginnt, fügen Sie eine Leerzeile hinzu und dann den Kommentar. Es wird einen Codeblock erstellen, der deutlich macht, worauf sich der Kommentar bezieht. Außerdem setzen Sie Ihre Kommentare auf separate Zeilen, die dem Code, den sie betreffen, vorausgehen. Dies wird im folgenden Beispiel gezeigt:

  js

  function checkout(goodsPrice, shipmentPrice, taxes) {
    // Calculate the total price
    const total = goodsPrice + shipmentPrice + taxes;
  
    // Create and append a new paragraph to the document
    const para = document.createElement("p");
    para.textContent = `Total price is ${total}`;
    document.body.appendChild(para);
  }
  

• In Code, der in einer Produktionsumgebung ausgeführt werden soll, müssen Sie selten kommentieren, wenn Sie einige Daten protokollieren. In Codebeispielen verwenden wir häufig console.log(), console.error() oder ähnliche Funktionen, um wichtige Werte auszugeben. Um dem Leser zu helfen, zu verstehen, was passiert, ohne den Code auszuführen, können Sie einen Kommentar nach der Funktion mit dem Log schreiben, das erzeugt wird. Schreiben Sie:

  js

  function exampleFunc(fruitBasket) {
    console.log(fruitBasket); // ['banana', 'mango', 'orange']
  }
  

  Schreiben Sie nicht:

  js

  function exampleFunc(fruitBasket) {
    // Logs: ['banana', 'mango', 'orange']
    console.log(fruitBasket);
  }
  

• Falls die Zeile zu lang wird, setzen Sie den Kommentar nach der Funktion, wie folgt:

  js

  function exampleFunc(fruitBasket) {
    console.log(fruitBasket);
    // ['banana', 'mango', 'orange', 'apple', 'pear', 'durian', 'lemon']
  }
  

Kurze Kommentare sind in der Regel besser, daher versuchen Sie, sie in einer Zeile von 60–80 Zeichen zu halten. Ist das nicht möglich, verwenden Sie // am Anfang jeder Zeile:

// This is an example of a multi-line comment.
// The imaginary function that follows has some unusual
// limitations that I want to call out.
// Limitation 1
// Limitation 2

Verwenden Sie nicht /* … */:

/* This is an example of a multi-line comment.
  The imaginary function that follows has some unusual
  limitations that I want to call out.
  Limitation 1
  Limitation 2 */

Um redundanten Code zu überspringen und Beispiele kurz zu halten, sollten Autoren es trotzdem mit Bedacht tun, da Entwickler häufig Beispiele in ihren Code kopieren & einfügen und alle unsere Codebeispiele validen JavaScript-Code darstellen sollten.

In JavaScript sollten Sie die Ellipsen (…) in einem Kommentar setzen. Wenn möglich, geben Sie an, welche Aktion jemand, der diesen Ausschnitt wiederverwendet, hinzufügen soll.

Ein Kommentar für die Ellipsen (…) ist expliziter und verhindert Fehler, wenn ein Entwickler einen Beispielcode kopiert und einfügt. Schreiben Sie:

function exampleFunc() {
  // Add your code here
  // …
}

Verwenden Sie Ellipsen (…) nicht so:

function exampleFunc() {
  …
}

Beim Schreiben von Code lassen Sie normalerweise Parameter weg, die Sie nicht benötigen. Aber in einigen Codebeispielen möchten Sie demonstrieren, dass Sie einige mögliche Parameter nicht verwendet haben.

Verwenden Sie /* … */ in der Parameterliste, um dies zu tun. Dies ist eine Ausnahme von der Regel, nur einzeilige Kommentare (//) zu verwenden.

array.forEach((value /* , index, array */) => {
  // …
});

Verwenden Sie für Funktionsnamen das camel case Format, beginnend mit einem Kleinbuchstaben. Verwenden Sie prägnante, menschenlesbare und semantische Namen, wo dies angebracht ist.

Das Folgende ist ein korrektes Beispiel für einen Funktionsnamen:

function sayHello() {
  console.log("Hello!");
}

Verwenden Sie Funktionsnamen nicht wie die folgenden:

function SayHello() {
  console.log("Hello!");
}

function doIt() {
  console.log("Hello!");
}

• Wo möglich, verwenden Sie die Funktionsdeklaration (function declaration) über Funktionsausdrücke (function expressions) zur Definition von Funktionen.

  Hier ist die empfohlene Art, eine Funktion zu deklarieren:

  js

  function sum(a, b) {
    return a + b;
  }
  

  Dies ist keine gute Möglichkeit, eine Funktion zu definieren:

  js

  let sum = function (a, b) {
    return a + b;
  };
  

• Wenn anonyme Funktionen als Callback verwendet werden (eine Funktion, die einer anderen Methodenaufruf übergeben wird), verwenden Sie eine Pfeilfunktion, um den Code kürzer und sauberer zu machen, wenn Sie nicht auf this zugreifen müssen.

  Hier ist die empfohlene Methode:

  js

  const array1 = [1, 2, 3, 4];
  const sum = array1.reduce((a, b) => a + b);
  

  Anstelle von:

  js

  const array1 = [1, 2, 3, 4];
  const sum = array1.reduce(function (a, b) {
    return a + b;
  });
  

• Vermeiden Sie es, eine Pfeilfunktion zu verwenden, um einer Funktion einen Bezeichner zuzuordnen. Insbesondere verwenden Sie keine Pfeilfunktionen für Methoden. Verwenden Sie Funktionsdeklarationen mit dem Schlüsselwort function:

  js

  function x() {
    // …
  }
  

  Tun Sie dies nicht:

  js

  const x = () => {
    // …
  };
  

• Wenn Sie Pfeilfunktionen verwenden, nutzen Sie die implizite Rückgabe (auch bekannt als expression body), wenn möglich:

  js

  arr.map((e) => e.id);
  

  Und nicht:

  js

  arr.map((e) => {
    return e.id;
  });
  

Wenn Schleifen erforderlich sind, wählen Sie die passende aus for(;;), for...of, while, etc.

• Wenn alle Elemente einer Sammlung durchlaufen werden, vermeiden Sie die klassische for (;;) -Schleife; bevorzugen Sie for...of oder forEach(). Beachten Sie, dass wenn Sie eine Sammlung verwenden, die kein Array ist, Sie überprüfen müssen, dass for...of tatsächlich unterstützt wird (es erfordert, dass die Variable iterierbar ist), oder dass die forEach()-Methode tatsächlich vorhanden ist.

  Verwenden Sie for...of:

  js

  const dogs = ["Rex", "Lassie"];
  for (const dog of dogs) {
    console.log(dog);
  }
  

  Oder forEach():

  js

  const dogs = ["Rex", "Lassie"];
  dogs.forEach((dog) => {
    console.log(dog);
  });
  

  Verwenden Sie nicht for (;;) — nicht nur müssen Sie einen zusätzlichen Index i hinzufügen, sondern auch die Länge des Arrays nachverfolgen. Dies kann für Anfänger fehleranfällig sein.

  js

  const dogs = ["Rex", "Lassie"];
  for (let i = 0; i < dogs.length; i++) {
    console.log(dogs[i]);
  }
  

• Stellen Sie sicher, dass Sie den Initialisierer richtig definieren, indem Sie das const-Schlüsselwort für for...of oder let für die anderen Schleifen verwenden. Lassen Sie es nicht aus. Dies sind korrekte Beispiele:

  js

  const cats = ["Athena", "Luna"];
  for (const cat of cats) {
    console.log(cat);
  }
  
  for (let i = 0; i < 4; i++) {
    result += arr[i];
  }
  

  Das folgende Beispiel folgt nicht den empfohlenen Richtlinien für die Initialisierung (es erstellt implizit eine globale Variable und schlägt im strengen Modus fehl):

  js

  const cats = ["Athena", "Luna"];
  for (i of cats) {
    console.log(i);
  }
  

• Wenn Sie sowohl auf den Wert als auch den Index zugreifen müssen, können Sie .forEach() anstelle von for (;;) verwenden. Schreiben Sie:

  js

  const gerbils = ["Zoé", "Chloé"];
  gerbils.forEach((gerbil, i) => {
    console.log(`Gerbil #${i}: ${gerbil}`);
  });
  

  Schreiben Sie nicht:

  js

  const gerbils = ["Zoé", "Chloé"];
  for (let i = 0; i < gerbils.length; i++) {
    console.log(`Gerbil #${i}: ${gerbils[i]}`);
  }
  

Es gibt einen bemerkenswerten Fall, der für if...else-Kontrollstrukturen zu beachten ist. Wenn die if-Anweisung mit einem return endet, fügen Sie keine else-Anweisung hinzu.

Fahren Sie nach der if-Anweisung fort. Schreiben Sie:

if (test) {
  // Perform something if test is true
  // …
  return;
}

// Perform something if test is false
// …

Schreiben Sie nicht:

if (test) {
  // Perform something if test is true
  // …
  return;
} else {
  // Perform something if test is false
  // …
}

Während Kontrollflussanweisungen wie if, for und while die Verwendung von geschweiften Klammern nicht erfordern, wenn der Inhalt aus nur einer Anweisung besteht, sollten Sie immer geschweifte Klammern verwenden. Schreiben Sie:

for (const car of storedCars) {
  car.paint("red");
}

Schreiben Sie nicht:

for (const car of storedCars) car.paint("red");

Dies verhindert, dass Sie vergessen, die geschweiften Klammern hinzuzufügen, wenn Sie weitere Anweisungen hinzufügen.

Switch-Anweisungen können etwas knifflig sein.

• Fügen Sie keine break-Anweisung nach einer return-Anweisung in einem bestimmten Fall hinzu. Stattdessen schreiben Sie return-Anweisungen so:

  js

  switch (species) {
    case "chicken":
      return farm.shed;
    case "horse":
      return corral.entry;
    default:
      return "";
  }
  

  Wenn Sie eine break-Anweisung hinzufügen, wird diese unerreichbar. Schreiben Sie nicht:

  js

  switch (species) {
    case "chicken":
      return farm.shed;
      break;
    case "horse":
      return corral.entry;
      break;
    default:
      return "";
  }
  

• Verwenden Sie default als letzten Fall und enden Sie nicht mit einer break-Anweisung. Wenn Sie es anders machen müssen, fügen Sie einen Kommentar hinzu, der erklärt warum.

• Denken Sie daran, dass wenn Sie eine lokale Variable für einen Fall deklarieren, Sie geschweifte Klammern verwenden müssen, um einen Geltungsbereich zu definieren:

  js

  switch (fruits) {
    case "Orange": {
      const slice = fruit.slice();
      eat(slice);
      break;
    }
    case "Apple": {
      const core = fruit.extractCore();
      recycle(core);
      break;
    }
  }
  

• Wenn bestimmte Zustände Ihres Programms nicht abgefangene Fehler auslösen, beenden sie die Ausführung und verringern möglicherweise die Nützlichkeit des Beispiels. Daher sollten Sie Fehler mit einem try...catch-Block abfangen, wie unten gezeigt:

  js

  try {
    console.log(getResult());
  } catch (e) {
    console.error(e);
  }
  

• Wenn Sie den Parameter der catch-Anweisung nicht benötigen, lassen Sie ihn weg:

  js

  try {
    console.log(getResult());
  } catch {
    console.error("An error happened!");
  }
  

• Beim Definieren einer Klasse verwenden Sie PascalCase (beginnend mit einem Großbuchstaben) für den Klassennamen und camelCase (beginnend mit einem Kleinbuchstaben) für die Objektattribut- und Methodennamen.

• Beim Definieren einer Objektinstanz verwenden Sie entweder ein Literal oder einen Konstruktor mit camelCase, beginnend mit einem Kleinbuchstaben, für den Instanznamen. Zum Beispiel:

  js

  const hanSolo = new Person("Han Solo", 25, "he/him");
  
  const luke = {
    name: "Luke Skywalker",
    age: 25,
    pronouns: "he/him",
  };
  

Zum Erstellen allgemeiner Objekte (d.h. wenn keine Klassen beteiligt sind) verwenden Sie Literale und keine Konstruktoren.

Zum Beispiel so:

const object = {};

Erstellen Sie kein allgemeines Objekt so:

const object = new Object();

• Verwenden Sie für Objekte die ES-Klassensyntax, nicht alte Konstruktorstile.

  Zum Beispiel ist dies die empfohlene Methode:

  js

  class Person {
    constructor(name, age, pronouns) {
      this.name = name;
      this.age = age;
      this.pronouns = pronouns;
    }
  
    greeting() {
      console.log(`Hi! I'm ${this.name}`);
    }
  }
  

• Verwenden Sie extends für Vererbung:

  js

  class Teacher extends Person {
    // …
  }
  

Um Methoden zu definieren, verwenden Sie die Methodendefinitionssyntax:

const obj = {
  foo() {
    // …
  },
  bar() {
    // …
  },
};

Stattdessen:

const obj = {
  foo: function () {
    // …
  },
  bar: function () {
    // …
  },
};

• Die Methode Object.prototype.hasOwnProperty() wurde zugunsten von Object.hasOwn() veraltet.

• Wann immer möglich, verwenden Sie die Kurzschreibweise und vermeiden Sie die doppelte Nennung des Eigenschaftsbezeichners. Schreiben Sie:

  js

  function createObject(name, age) {
    return { name, age };
  }
  

  Schreiben Sie nicht:

  js

  function createObject(name, age) {
    return { name: name, age: age };
  }
  

Dieser Abschnitt listet unsere Empfehlungen auf, welche Operatoren wann verwendet werden sollten.

Wenn Sie einer Variablen einen Literalwert je nach einer Bedingung zuweisen möchten, verwenden Sie einen bedingten (ternären) Operator anstelle einer if...else-Anweisung. Diese Regel gilt auch beim Zurückgeben eines Werts. Schreiben Sie:

const x = condition ? 1 : 2;

Schreiben Sie nicht:

let x;
if (condition) {
  x = 1;
} else {
  x = 2;
}

Der bedingte Operator ist hilfreich beim Erstellen von Zeichenfolgen zum Protokollieren von Informationen. In solchen Fällen führt die Verwendung einer normalen if...else-Anweisung zu langen Codeblöcken für eine Nebenoperation wie das Protokollieren, die den zentralen Punkt des Beispiels verschleiert.

Bevorzugen Sie die strikte Gleichheit (drei gleich) und Ungleichheitsoperatoren über die lose Gleichheit (zwei gleich) und Ungleichheitsoperatoren.

Verwenden Sie die strikten Gleichheits- und Ungleichheitsoperatoren wie folgt:

name === "Shilpa";
age !== 25;

Verwenden Sie keine losen Gleichheits- und Ungleichheitsoperatoren, wie unten gezeigt:

name == "Shilpa";
age != 25;

Wenn Sie == oder != verwenden müssen, denken Sie daran, dass == null der einzige akzeptable Fall ist. Da TypeScript in allen anderen Fällen fehlschlägt, wollen wir sie nicht in unseren Beispielcode haben. Erwägen Sie, einen Kommentar hinzuzufügen, um zu erklären, warum Sie ihn benötigen.

Bevorzugen Sie Abkürzungen für Boolesche Tests. Verwenden Sie zum Beispiel if (x) und if (!x), nicht if (x === true) und if (x === false), es sei denn, verschiedene Arten von truthy oder falsy Werten werden unterschiedlich gehandhabt.

Zeichenfolgenliterale können innerhalb von einfachen Anführungszeichen, wie in 'A string', oder in doppelte Anführungszeichen eingeschlossen werden, wie in "A string". Machen Sie sich keine Sorgen darüber, welche Sie verwenden sollten; Prettier hält es konsistent.

Zum Einfügen von Werten in Zeichenfolgen verwenden Sie template literals.

• Hier ist ein Beispiel für die empfohlene Verwendung von template literals. Ihr Gebrauch verhindert viele Platzierungsfehler.

  js

  const name = "Shilpa";
  console.log(`Hi! I'm ${name}!`);
  

  Verkettete Strings nicht so:

  js

  const name = "Shilpa";
  console.log("Hi! I'm" + name + "!"); // Hi! I'mShilpa!
  

• Verwenden Sie template literals nicht übermäßig. Wenn keine Ersetzungen erforderlich sind, verwenden Sie stattdessen ein normales Zeichenfolgenliteral.

Gute Variablennamen sind essentiell für das Verständnis von Code.

• Verwenden Sie kurze Bezeichner und vermeiden Sie nicht allgemeine Abkürzungen. Gute Variablennamen sind in der Regel zwischen 3 bis 10 Zeichen lang, aber das ist nur ein Hinweis. Zum Beispiel ist accelerometer beschreibender als das Abkürzen zu acclmtr der Zeichenlänge wegen.

• Versuchen Sie, realistisch relevante Beispiele zu verwenden, bei denen jede Variable eine klare Semantik hat. Greifen Sie nur auf Platzhalternamen wie foo und bar zurück, wenn das Beispiel einfach und konstruiert ist.

• Verwenden Sie nicht die ungarische Notation. Präfixieren Sie den Variablennamen nicht mit seinem Typ. Zum Beispiel, schreiben Sie bought = car.buyer !== null anstelle von bBought = oCar.sBuyer != null oder name = "John Doe" statt sName = "John Doe".

• Für Sammlungen, vermeiden Sie das Hinzufügen des Typs wie Liste, Array, Warteschlange im Namen. Verwenden Sie den Inhaltsnamen in der Pluralform. Zum Beispiel für ein Array von Autos verwenden Sie cars und nicht carArray oder carList. Es kann Ausnahmen geben, wie wenn Sie die abstrakte Form eines Merkmals ohne den Kontext einer bestimmten Anwendung zeigen möchten.

• Verwenden Sie für primitive Werte camelCase, beginnend mit einem Kleinbuchstaben. Verwenden Sie nicht _. Verwenden Sie prägnante, menschenlesbare und semantische Namen, wo angemessen. Zum Beispiel verwenden Sie currencyName statt currency_name.

• Vermeiden Sie die Verwendung von Artikeln und Possessivpronomen. Verwenden Sie zum Beispiel car anstelle von myCar oder aCar. Es kann Ausnahmen geben, wie beim Beschreiben eines Merkmals im Allgemeinen ohne praktischen Kontext.

• Verwenden Sie Variablennamen, wie hier gezeigt:

  js

  const playerScore = 0;
  const speed = distance / time;
  

  Benennen Sie Variablen nicht wie folgt:

  js

  const thisIsaveryLONGVariableThatRecordsPlayerscore345654 = 0;
  const s = d / t;
  

Beim Deklarieren von Variablen und Konstanten verwenden Sie die Schlüsselwörter let und const, nicht var. Die folgenden Beispiele zeigen, was bei MDN Web Docs empfohlen wird und was nicht:

• Wenn eine Variable nicht neu zugewiesen wird, bevorzugen Sie const, wie folgt:

  js

  const name = "Shilpa";
  console.log(name);
  

• Wenn Sie den Wert einer Variable ändern, verwenden Sie let wie unten gezeigt:

  js

  let age = 40;
  age++;
  console.log("Happy birthday!");
  

• Das Beispiel unten verwendet let, wo es const sein sollte. Der Code wird funktionieren, aber wir wollen diese Verwendung in MDN Web Docs-Beispielcodes vermeiden.

  js

  let name = "Shilpa";
  console.log(name);
  

• Das Beispiel unten verwendet const für eine Variable, die neu zugewiesen wird. Die Neuzuweisung wird einen Fehler werfen.

  js

  const age = 40;
  age++;
  console.log("Happy birthday!");
  

• Das Beispiel unten verwendet var, das den globalen Bereich verschmutzt:

  js

  var age = 40;
  var name = "Shilpa";
  

• Deklarieren Sie eine Variable pro Zeile, wie folgt:

  js

  let var1;
  let var2;
  let var3 = "Apapou";
  let var4 = var3;
  

  Deklarieren Sie nicht mehrere Variablen in einer Zeile, indem Sie sie mit Kommas trennen oder eine Kettendeklaration verwenden. Vermeiden Sie es, Variablen so zu deklarieren:

  js

  let var1, var2;
  let var3 = var4 = "Apapou"; // var4 is implicitly created as a global variable; fails in strict mode
  

Vermeiden Sie implizite Typumwandlungen. Insbesondere vermeiden Sie +val, um einen Wert zu einer Zahl zu zwingen, und "" + val, um ihn zu einer Zeichenfolge zu zwingen. Verwenden Sie stattdessen Number() und String(), ohne new. Schreiben Sie:

class Person {
  #name;
  #birthYear;

  constructor(name, year) {
    this.#name = String(name);
    this.#birthYear = Number(year);
  }
}

Schreiben Sie nicht:

class Person {
  #name;
  #birthYear;

  constructor(name, year) {
    this.#name = "" + name;
    this.#birthYear = +year;
  }
}

Zusätzlich zu diesen JavaScript-Sprachfunktionen empfehlen wir einige Richtlinien zu Web-APIs, die beachtet werden sollten.

Wenn alle großen Browser (Chrome, Edge, Firefox und Safari) eine Funktion unterstützen, präfixieren Sie die Funktion nicht. Schreiben Sie:

const context = new AudioContext();

Vermeiden Sie die zusätzliche Komplexität von Präfixen. Schreiben Sie nicht:

const AudioContext = window.AudioContext || window.webkitAudioContext;
const context = new AudioContext();

Dieselbe Regel gilt für CSS-Präfixe.

Wenn eine Methode, eine Eigenschaft oder eine ganze Schnittstelle veraltet ist, verwenden Sie sie nicht (außer in ihrer Dokumentation). Verwenden Sie stattdessen die moderne API.

Hier ist eine nicht erschöpfende Liste von Web-APIs, die vermieden werden sollten, und womit sie ersetzt werden sollten:

• Verwenden Sie fetch() anstelle von XHR (XMLHttpRequest).
• Verwenden Sie AudioWorklet anstelle von ScriptProcessorNode in der Web Audio API.

• Verwenden Sie Element.innerHTML nicht, um rein textuellen Inhalt in ein Element einzufügen; verwenden Sie stattdessen Node.textContent. Die Eigenschaft innerHTML führt zu Sicherheitsproblemen, wenn ein Entwickler den Parameter nicht kontrolliert. Je mehr wir als Autoren vermeiden, sie zu verwenden, desto weniger Sicherheitslücken entstehen, wenn ein Entwickler unseren Code kopiert und einfügt.

  Das folgende Beispiel demonstriert die Verwendung von textContent.

  js

  const text = "Hello to all you good people";
  const para = document.createElement("p");
  para.textContent = text;
  

  Verwenden Sie innerHTML nicht, um reinen Text in DOM-Knoten einzufügen.

  js

  const text = "Hello to all you good people";
  const para = document.createElement("p");
  para.innerHTML = text;
  

• Die Funktion alert() ist unzuverlässig. Sie funktioniert nicht in Live-Beispielen auf MDN Web Docs, die sich in einem <iframe> befinden. Darüber hinaus ist sie modal zum gesamten Fenster, was ärgerlich ist. In statischen Codebeispielen verwenden Sie console.log() oder console.error(). In Live-Beispielen vermeiden Sie console.log() und console.error(), da sie nicht angezeigt werden. Verwenden Sie ein dediziertes UI-Element.

• Beim Protokollieren einer Nachricht verwenden Sie console.log().
• Beim Protokollieren eines Fehlers verwenden Sie console.error().

JavaScript-Sprachreferenz - Durchsuchen Sie unsere JavaScript-Referenzseiten, um gute, prägnante, sinnvolle JavaScript-Snippets zu finden.