Richtlinien zum Schreiben von JavaScript-Codebeispielen
Die folgenden Richtlinien decken das Schreiben von JavaScript-Beispielcode für MDN Web Docs ab. Dieser Artikel ist eine Liste von Regeln für das Schreiben von prägnanten Beispielen, die von möglichst vielen Menschen verstanden werden.
Allgemeine Richtlinien für JavaScript-Codebeispiele
Dieser Abschnitt erklärt die allgemeinen Richtlinien, die Sie beim Schreiben von JavaScript-Codebeispielen beachten sollten. Die späteren Abschnitte behandeln spezifischere Details.
Wahl eines Formats
Meinungen zur richtigen Einrückung, Leerzeichen und Zeilenlängen waren schon immer umstritten. Diskussionen zu diesen Themen lenken vom Erstellen und Pflegen von Inhalten ab.
Auf MDN Web Docs verwenden wir Prettier als Code-Formatter, um den Codestil konsistent zu halten (und um Off-Topic-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 hält den Stil konsistent. Dennoch gibt es ein paar zusätzliche Regeln, die Sie befolgen müssen.
Verwendung moderner JavaScript-Funktionen
Sie können neue Funktionen verwenden, sobald jeder große Browser — Chrome, Edge, Firefox und Safari — diese unterstützt.
Arrays
Array-Erzeugung
Zum Erzeugen von Arrays verwenden Sie Literale und keine Konstruktoren.
Erstellen Sie Arrays wie folgt:
const visitedCities = [];
Tun Sie dies nicht bei der Erstellung von Arrays:
const visitedCities = new Array(length);
Hinzufügen von Elementen
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 wie folgt dem Array hinzu:
pets.push("cat");
Fügen Sie keine Elemente dem Array wie folgt hinzu:
pets[pets.length] = "cat";
Asynchrone Methoden
Das Schreiben von asynchronem Code verbessert die Leistung und sollte, wenn möglich, verwendet werden. Insbesondere können Sie verwenden:
Wenn beide Techniken möglich sind, bevorzugen wir die einfachere async
/await
-Syntax. Leider können Sie await
nicht auf der oberen Ebene 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 das obere await
.
Kommentare
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:
jslet total = 0; // Calculate the sum of the four first elements of arr for (let i = 0; i < 4; i++) { total += arr[i]; }
Die Wiederholung des Codes in Prosa ist hingegen kein guter Gebrauch von Kommentaren:
jslet 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 eindeutige Namen haben, die beschreiben, was sie tun. Schreiben Sie:
jscloseConnection();
Schreiben Sie nicht:
jscloseConnection(); // Closing the connection
Verwenden Sie einzeilige Kommentare
Einzeilige Kommentare werden mit //
gekennzeichnet, im Gegensatz zu Blockkommentaren, die zwischen /* … */
eingeschlossen sind.
Verwenden Sie im Allgemeinen einzeilige Kommentare, um Code zu kommentieren. Autoren müssen jede Zeile des Kommentars mit //
markieren, damit es einfacher ist, auskommentierten Code visuell zu erkennen. Außerdem ermöglicht diese Konvention, Codeabschnitte mit /* … */
während des Debuggens auszukommentieren.
-
Lassen Sie einen Abstand zwischen den Schrägstrichen und dem Kommentar. Beginnen Sie mit einem Großbuchstaben, wie bei einem Satz, enden Sie den Kommentar jedoch nicht mit einem Punkt.
js// This is a well-written single-line comment
-
Wenn ein Kommentar nicht direkt nach einer neuen Einrückungsebene beginnt, fügen Sie eine Leerzeile ein und dann den Kommentar. Es wird einen Codeblock erstellen, der offensichtlich macht, worauf sich der Kommentar bezieht. Setzen Sie Ihre Kommentare auch auf separate Zeilen vor dem Code, auf den sie sich beziehen. Dies wird im folgenden Beispiel gezeigt:
jsfunction 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); }
Ausgabe von Logs
-
In Code, der in einer Produktionsumgebung ausgeführt werden soll, müssen Sie selten kommentieren, wenn Sie einige Daten protokollieren. In Codebeispielen verwenden wir oft
console.log()
,console.error()
oder ähnliche Funktionen, um wichtige Werte auszugeben. Um dem Leser zu helfen zu verstehen, was ohne Ausführen des Codes passieren wird, können Sie einen Kommentar nach der Funktion mit dem erzeugten Log hinzufügen. Schreiben Sie:jsfunction exampleFunc(fruitBasket) { console.log(fruitBasket); // ['banana', 'mango', 'orange'] }
Schreiben Sie nicht:
jsfunction exampleFunc(fruitBasket) { // Logs: ['banana', 'mango', 'orange'] console.log(fruitBasket); }
-
Falls die Zeile zu lang wird, setzen Sie den Kommentar nach der Funktion, wie folgt:
jsfunction exampleFunc(fruitBasket) { console.log(fruitBasket); // ['banana', 'mango', 'orange', 'apple', 'pear', 'durian', 'lemon'] }
Mehrzeilige Kommentare
Kurze Kommentare sind normalerweise besser, also versuchen Sie, sie in einer Zeile von 60–80 Zeichen zu halten. Wenn dies nicht möglich ist, 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 */
Verwenden Sie Kommentare, um Auslassungen zu kennzeichnen
Das Auslassen von redundantem Code mit Auslassungszeichen (…) ist notwendig, um Beispiele kurz zu halten. Dennoch sollten Autoren es sorgfältig tun, da Entwickler häufig Beispiele in ihren Code kopieren und einfügen und alle unsere Codebeispiele gültiges JavaScript sein sollten.
In JavaScript sollten Sie die Auslassungszeichen (…
) in einem Kommentar setzen. Wann immer möglich, geben Sie an, welche Aktion jemand, der diesen Ausschnitt wiederverwendet, hinzufügen soll.
Die Verwendung eines Kommentars für die Auslassungszeichen (…) ist expliziter und verhindert Fehler, wenn ein Entwickler einen Beispielcode kopiert und einfügt. Schreiben Sie:
function exampleFunc() {
// Add your code here
// …
}
Verwenden Sie Auslassungszeichen (…) nicht so:
function exampleFunc() {
…
}
Kommentieren Sie Parameter aus
Beim Schreiben von Code lassen Sie normalerweise Parameter aus, die Sie nicht benötigen. Aber in einigen Codebeispielen möchten Sie zeigen, dass Sie einige mögliche Parameter nicht verwendet haben.
Verwenden Sie dazu /* … */
in der Parameterliste. Dies ist eine Ausnahme zur Regel, nur einzeilige Kommentare (//
) zu verwenden.
array.forEach((value /* , index, array */) => {
// …
});
Funktionen
Funktionsnamen
Für Funktionsnamen verwenden Sie camel case, beginnend mit einem Kleinbuchstaben. Verwenden Sie kurze, menschenlesbare und semantische Namen, wo angebracht.
Das folgende Beispiel ist ein korrektes Beispiel eines Funktionsnamens:
function sayHello() {
console.log("Hello!");
}
Verwenden Sie keine Funktionsnamen wie diese:
function SayHello() {
console.log("Hello!");
}
function doIt() {
console.log("Hello!");
}
Funktionsdeklarationen
-
Soweit möglich, verwenden Sie die Funktionsdeklaration anstelle von Funktionsausdrücken, um Funktionen zu definieren.
Hier ist die empfohlene Methode, um eine Funktion zu deklarieren:
jsfunction sum(a, b) { return a + b; }
Dies ist keine gute Methode, um eine Funktion zu definieren:
jslet sum = function (a, b) { return a + b; };
-
Wenn Sie anonyme Funktionen als Rückrufe (eine Funktion, die an eine andere Methodenaufruf übergeben wird) verwenden, verwenden Sie eine Pfeilfunktion, wenn Sie nicht auf
this
zugreifen müssen, um den Code kürzer und klarer zu gestalten.Hier ist die empfohlene Methode:
jsconst array1 = [1, 2, 3, 4]; const sum = array1.reduce((a, b) => a + b);
Anstelle von:
jsconst array1 = [1, 2, 3, 4]; const sum = array1.reduce(function (a, b) { return a + b; });
-
Vermeiden Sie, eine Pfeilfunktion zu verwenden, um eine Funktion einem Bezeichner zuzuweisen. Verwenden Sie insbesondere keine Pfeilfunktionen für Methoden. Verwenden Sie Funktionsdeklarationen mit dem Schlüsselwort
function
:jsfunction x() { // … }
Tun Sie nicht:
jsconst x = () => { // … };
-
Wenn Sie Pfeilfunktionen verwenden, nutzen Sie die implizite Rückgabe (auch bekannt als expression body), wann immer es möglich ist:
jsarr.map((e) => e.id);
Und nicht:
jsarr.map((e) => { return e.id; });
Schleifen und bedingte Anweisungen
Schleifeninitialisierung
Wenn Schleifen erforderlich sind, wählen Sie die passende aus for(;;)
, for...of
, while
, usw.
-
Wenn Sie durch alle Elemente einer Sammlung iterieren, verwenden Sie nicht die klassische
for (;;)
-Schleife; bevorzugen Siefor...of
oderforEach()
. Beachten Sie, dass wenn Sie eine Sammlung verwenden, die keinArray
ist, Sie überprüfen müssen, dassfor...of
tatsächlich unterstützt wird (es erfordert, dass die Variable iterierbar ist), oder dass die MethodeforEach()
tatsächlich vorhanden ist.Verwenden Sie
for...of
:jsconst dogs = ["Rex", "Lassie"]; for (const dog of dogs) { console.log(dog); }
Oder
forEach()
:jsconst 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 Sie müssen auch die Länge des Arrays verfolgen. Dies kann für Anfänger fehleranfällig sein.jsconst dogs = ["Rex", "Lassie"]; for (let i = 0; i < dogs.length; i++) { console.log(dogs[i]); }
-
Stellen Sie sicher, dass Sie den Initialisierer ordnungsgemäß mit dem Schlüsselwort
const
fürfor...of
oderlet
für die anderen Schleifen definieren. Lassen Sie es nicht aus. Diese sind korrekte Beispiele:jsconst cats = ["Athena", "Luna"]; for (const cat of cats) { console.log(cat); } for (let i = 0; i < 4; i++) { result += arr[i]; }
Das unten stehende Beispiel folgt nicht den empfohlenen Richtlinien für die Initialisierung (es erzeugt implizit eine globale Variable und wird im Strict-Modus fehlschlagen):
jsconst cats = ["Athena", "Luna"]; for (i of cats) { console.log(i); }
-
Wenn Sie sowohl auf den Wert als auch auf den Index zugreifen müssen, können Sie
.forEach()
anstelle vonfor (;;)
verwenden. Schreiben Sie:jsconst gerbils = ["Zoé", "Chloé"]; gerbils.forEach((gerbil, i) => { console.log(`Gerbil #${i}: ${gerbil}`); });
Schreiben Sie nicht:
jsconst gerbils = ["Zoé", "Chloé"]; for (let i = 0; i < gerbils.length; i++) { console.log(`Gerbil #${i}: ${gerbils[i]}`); }
Warnung: Verwenden Sie niemals for...in
mit Arrays und Strings.
Hinweis: Überlegen Sie, überhaupt keine for
-Schleife zu verwenden. Wenn Sie ein Array
(oder ein String
für einige Operationen) verwenden, sollten Sie statt dessen mehr semantische Iterationsmethoden wie map()
, every()
, findIndex()
, find()
, includes()
und viele mehr verwenden.
Kontrollanweisungen
Es gibt einen bemerkenswerten Fall, den Sie für die Kontrollanweisungen if...else
im Auge behalten sollten. Wenn die if
-Anweisung mit einem return
endet, fügen Sie keine else
-Anweisung hinzu.
Fahren Sie direkt 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
// …
}
Verwenden Sie geschweifte Klammern mit Kontrollflussanweisungen und Schleifen
Obwohl Kontrollflussanweisungen wie if
, for
und while
keine geschweiften Klammern erfordern, wenn der Inhalt aus einem einzigen Satz 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 vergessen wird, die geschweiften Klammern hinzuzufügen, wenn weitere Anweisungen hinzugefügt werden.
Switch-Anweisungen
Switch-Anweisungen können etwas knifflig sein.
-
Fügen Sie keine
break
-Anweisung nach einerreturn
-Anweisung in einem spezifischen Fall hinzu. Stattdessen schreiben Siereturn
-Anweisungen wie folgt:jsswitch (species) { case "chicken": return farm.shed; case "horse": return corral.entry; default: return ""; }
Wenn Sie eine
break
-Anweisung hinzufügen, wird sie nicht erreichbar. Schreiben Sie nicht:jsswitch (species) { case "chicken": return farm.shed; break; case "horse": return corral.entry; break; default: return ""; }
-
Verwenden Sie
default
als letzten Fall und beenden Sie ihn nicht mit einerbreak
-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, müssen Sie geschweifte Klammern verwenden, um einen Gültigkeitsbereich zu definieren:
jsswitch (fruits) { case "Orange": { const slice = fruit.slice(); eat(slice); break; } case "Apple": { const core = fruit.extractCore(); recycle(core); break; } }
Fehlerbehandlung
-
Wenn bestimmte Zustände Ihres Programms ungefangene Fehler werfen, werden sie die Ausführung stoppen und möglicherweise die Nützlichkeit des Beispiels verringern. Sie sollten daher Fehler mit einem
try...catch
-Block abfangen, wie unten gezeigt:jstry { console.log(getResult()); } catch (e) { console.error(e); }
-
Wenn Sie den Parameter der
catch
-Anweisung nicht benötigen, lassen Sie ihn weg:jstry { console.log(getResult()); } catch { console.error("An error happened!"); }
Hinweis: Denken Sie daran, dass nur wiederherstellbare Fehler abgefangen und behandelt werden sollten. Alle nicht wiederherstellbaren Fehler sollten durchgelassen werden und den Aufrufstapel hochsteigen.
Objekte
Objektnamen
-
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 Objektenamen und Methodennamen.
-
Beim Definieren einer Objektinstanz, entweder als Literal oder über einen Konstruktor, verwenden Sie camelCase, beginnend mit einem Kleinbuchstaben, für den Instanznamen. Zum Beispiel:
jsconst hanSolo = new Person("Han Solo", 25, "he/him"); const luke = { name: "Luke Skywalker", age: 25, pronouns: "he/him", };
Objekterzeugung
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();
Objektklassen
-
Verwenden Sie die ES-Klassensyntax für Objekte, nicht die alte Konstruktor-Stil.
Zum Beispiel wird dies empfohlen:
jsclass 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 das Erben:jsclass Teacher extends Person { // … }
Methoden
Um Methoden zu definieren, verwenden Sie die Methodendefinitionssyntax:
const obj = {
foo() {
// …
},
bar() {
// …
},
};
Anstelle von:
const obj = {
foo: function () {
// …
},
bar: function () {
// …
},
};
Objekteigenschaften
-
Die Methode
Object.prototype.hasOwnProperty()
wurde zugunsten vonObject.hasOwn()
veraltet. -
Verwenden Sie, wenn möglich, die Kurzform und vermeiden Sie die Duplizierung des Eigenschaftsbezeichners. Schreiben Sie:
jsfunction createObject(name, age) { return { name, age }; }
Schreiben Sie nicht:
jsfunction createObject(name, age) { return { name: name, age: age }; }
Operatoren
Dieser Abschnitt listet unsere Empfehlungen auf, welche Operatoren verwendet werden sollen und wann.
Bedingte Operatoren
Wenn Sie je nach Bedingung einen wörtlichen Wert einer Variablen zuweisen möchten, verwenden Sie einen konditionalen (ternären) Operator anstelle einer if...else
-Anweisung. Diese Regel gilt auch, wenn ein Wert zurückgegeben wird. 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, um Informationen zu protokollieren. In solchen Fällen führt die Verwendung einer regulären if...else
-Anweisung zu langen Codeblöcken für eine Nebenoperation wie Logging, die den zentralen Punkt des Beispiels verdecken.
Strikter Gleichheitsoperator
Bevorzugen Sie den strikten Gleichheitsoperator (dreifaches Gleichheitszeichen) und Unstimmigkeitsoperatoren über die losen Gleichheits- (doppeltes Gleichheitszeichen) und Unstimmigkeitsoperatoren.
Verwenden Sie die strikten Gleichheits- und Unstimmigkeitsoperatoren wie folgt:
name === "Shilpa";
age !== 25;
Verwenden Sie nicht die losen Gleichheits- und Unstimmigkeitsoperatoren, wie unten gezeigt:
name == "Shilpa";
age != 25;
Wenn Sie ==
oder !=
verwenden müssen, bedenken Sie, dass == null
der einzige akzeptable Fall ist. Da TypeScript bei allen anderen Fällen fehlschlagen wird, wollen wir sie nicht in unserem Beispielcode haben. Überlegen Sie, einen Kommentar hinzuzufügen, um zu erklären, warum Sie es brauchen.
Abkürzungen für boolesche Tests
Bevorzugen Sie Abkürzungen für boolesche Tests. Zum Beispiel verwenden Sie if (x)
und if (!x)
, nicht if (x === true)
und if (x === false)
, es sei denn, es werden unterschiedliche Arten von truthy oder falsy Werten unterschiedlich behandelt.
Strings
Zeichenfolgen-Literale können innerhalb einzelner Anführungszeichen, wie in 'Ein String'
, oder innerhalb doppelter Anführungszeichen, wie in "Ein String"
, eingeschlossen werden. Machen Sie sich keine Sorgen darüber, welche zu verwenden; Prettier hält es konsistent.
Template-Literale
Für das Einfügen von Werten in Zeichenfolgen verwenden Sie Template-Literale.
-
Hier ist ein Beispiel für die empfohlene Verwendung von Template-Literalen. Ihre Verwendung verhindert viele Abstandsfehler.
jsconst name = "Shilpa"; console.log(`Hi! I'm ${name}!`);
Verkettete Strings nicht so:
jsconst name = "Shilpa"; console.log("Hi! I'm" + name + "!"); // Hi! I'mShilpa!
-
Überbeanspruchen Sie Template-Literale nicht. Wenn es keine Ersetzungen gibt, verwenden Sie stattdessen ein normales Zeichenfolgenliteral.
Variablen
Variablennamen
Gute Variablennamen sind wesentlich, um den Code zu verstehen.
-
Verwenden Sie kurze Bezeichner und vermeiden Sie nicht gebräuchliche Abkürzungen. Gute Variablennamen sind in der Regel 3 bis 10 Zeichen lang, aber nur als Anhaltspunkt. Zum Beispiel ist
accelerometer
beschreibender alsacclmtr
zur Kürzung der Zeichenzahl. -
Versuchen Sie, realitätsnahe Beispiele zu verwenden, bei denen jede Variable klare Semantik hat. Greifen Sie nur auf Platzhalternamen wie
foo
undbar
zurück, wenn das Beispiel einfach und gekünstelt ist. -
Verwenden Sie die Hungarian notation-Namenskonvention nicht. Präfixieren Sie den Variablennamen nicht mit seinem Typ. Zum Beispiel schreiben Sie
bought = car.buyer !== null
anstelle vonbBought = oCar.sBuyer != null
odername = "John Doe"
anstelle vonsName = "John Doe"
. -
Für Sammlungen vermeiden Sie es, den Typ wie Liste, Array, Warteschlange im Namen zu verwenden. Verwenden Sie den Inhaltsnamen in Pluralform. Zum Beispiel für ein Array von Autos verwenden Sie
cars
und nichtcarArray
odercarList
. Es kann Ausnahmen geben, wie wenn Sie die abstrakte Form einer Funktion ohne den Kontext einer bestimmten Anwendung zeigen möchten. -
Für primitive Werte verwenden Sie camelCase, beginnend mit einem Kleinbuchstaben. Verwenden Sie nicht
_
. Verwenden Sie kurze, menschenlesbare und semantische Namen, wo angebracht. Zum Beispiel verwenden SiecurrencyName
anstattcurrency_name
. -
Vermeiden Sie es, Artikel und Possessivformen zu verwenden. Zum Beispiel verwenden Sie
car
anstattmyCar
oderaCar
. Es kann Ausnahmen geben, wie wenn Sie eine Funktion im Allgemeinen ohne praktischen Kontext beschreiben. -
Verwenden Sie Variablennamen, wie hier gezeigt:
jsconst playerScore = 0; const speed = distance / time;
Benennen Sie Variablen nicht wie folgt:
jsconst thisIsaveryLONGVariableThatRecordsPlayerscore345654 = 0; const s = d / t;
Hinweis: Der einzige Ort, an dem es erlaubt ist, keine menschenlesbaren, semantischen Namen zu verwenden, ist der, wo es eine sehr allgemein anerkannte Konvention gibt, wie z.B. die Verwendung von i
und j
für Schleifeniteratoren.
Variablendeklarationen
Beim Deklarieren von Variablen und Konstanten verwenden Sie die let
- und const
-Schlüsselwörter, nicht var
. Die folgenden Beispiele zeigen, was auf MDN Web Docs empfohlen wird und was nicht:
-
Wenn eine Variable nicht neu zugewiesen wird, bevorzugen Sie
const
, wie folgt:jsconst name = "Shilpa"; console.log(name);
-
Wenn Sie den Wert einer Variable ändern, verwenden Sie
let
, wie unten gezeigt:jslet age = 40; age++; console.log("Happy birthday!");
-
Das unten stehende Beispiel verwendet
let
, wo esconst
sein sollte. Der Code wird funktionieren, aber wir wollen diese Verwendung in MDN Web Docs-Codebeispielen vermeiden.jslet name = "Shilpa"; console.log(name);
-
Das unten stehende Beispiel verwendet
const
für eine Variable, die neu zugewiesen wird. Die Neuzuweisung wird einen Fehler auslösen.jsconst age = 40; age++; console.log("Happy birthday!");
-
Das unten stehende Beispiel verwendet
var
und verunreinigt den globalen Gültigkeitsbereich:jsvar age = 40; var name = "Shilpa";
-
Deklarieren Sie eine Variable pro Zeile, wie folgt:
jslet var1; let var2; let var3 = "Apapou"; let var4 = var3;
Deklarieren Sie keine mehrere Variablen in einer Zeile, indem Sie sie durch Kommas trennen oder Kettendeklarationen verwenden. Vermeiden Sie Variablen wie folgt zu deklarieren:
jslet var1, var2; let var3 = var4 = "Apapou"; // var4 is implicitly created as a global variable; fails in strict mode
Type Coercion
Vermeiden Sie implizite Typumwandlungen. Verwenden Sie insbesondere nicht +val
, um einen Wert in eine Zahl umzuwandeln, und "" + val
, um ihn in eine Zeichenfolge umzuwandeln. 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;
}
}
Zu vermeidende Web-APIs
Zusätzlich zu diesen JavaScript-Sprachfunktionen empfehlen wir einige Richtlinien im Zusammenhang mit Web-APIs, die Sie beachten sollten.
Vermeiden Sie Browser-Präfixe
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 hinzugefügte Komplexität von Präfixen. Schreiben Sie nicht:
const AudioContext = window.AudioContext || window.webkitAudioContext;
const context = new AudioContext();
Die gleiche Regel gilt für CSS-Präfixe.
Vermeiden Sie veraltete APIs
Wenn eine Methode, eine Eigenschaft oder eine ganze Schnittstelle veraltet ist, verwenden Sie sie nicht (außer in deren Dokumentation). Verwenden Sie stattdessen die moderne API.
Hier ist eine nicht erschöpfende Liste von zu vermeidenden Web-APIs und was Sie stattdessen verwenden sollten:
- Verwenden Sie
fetch()
anstelle von XHR (XMLHttpRequest
). - Verwenden Sie
AudioWorklet
anstelle vonScriptProcessorNode
in der Web Audio API.
Verwenden Sie sichere und zuverlässige APIs
-
Verwenden Sie nicht
Element.innerHTML
, um rein textuellen Inhalt in ein Element einzufügen; verwenden Sie stattdessenNode.textContent
. Die EigenschaftinnerHTML
führt zu Sicherheitsproblemen, wenn ein Entwickler den Parameter nicht kontrolliert. Je mehr wir als Autoren es vermeiden, sie zu verwenden, desto weniger Sicherheitslücken entstehen, wenn ein Entwickler unseren Code kopiert und einfügt.Das unten stehende Beispiel zeigt die Verwendung von
textContent
.jsconst 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.jsconst 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 innerhalb eines<iframe>
befinden. Darüber hinaus ist sie für das gesamte Fenster modal, was störend ist. In statischen Codebeispielen verwenden Sieconsole.log()
oderconsole.error()
. In Live-Beispielen vermeiden Sieconsole.log()
undconsole.error()
, da sie nicht angezeigt werden. Verwenden Sie ein spezielles UI-Element.
Verwenden Sie die passende Log-Methode
- Bei der Protokollierung einer Nachricht verwenden Sie
console.log()
. - Bei der Protokollierung eines Fehlers verwenden Sie
console.error()
.
Siehe auch
JavaScript Sprachreferenz - Durchsuchen Sie unsere JavaScript-Referenzseiten, um sich einige gute, prägnante und bedeutungsvolle JavaScript-Snippets anzusehen.