Unser Code muss so sauber und leicht lesbar wie möglich sein.
Das ist eigentlich die Kunst des Programmierens – eine komplexe Aufgabe so zu programmieren, dass sie sowohl korrekt als auch für Menschen lesbar ist. Ein guter Codestil hilft dabei enorm.
Hier ist ein Spickzettel mit einigen empfohlenen Regeln (weitere Einzelheiten siehe unten):
Lassen Sie uns nun die Regeln und Gründe dafür im Detail besprechen.
Es gibt keine „Du musst“-Regeln
Hier ist nichts in Stein gemeißelt. Dabei handelt es sich um Stilvorlieben, nicht um religiöse Dogmen.
In den meisten JavaScript-Projekten werden geschweifte Klammern im „ägyptischen“ Stil geschrieben, wobei die öffnende Klammer in derselben Zeile wie das entsprechende Schlüsselwort steht – nicht in einer neuen Zeile. Vor der öffnenden Klammer sollte außerdem ein Leerzeichen stehen, etwa so:
if (Bedingung) {
// Mach das
// ...und das
// ...und das
} Ein einzeiliges Konstrukt wie if (condition) doSomething() ist ein wichtiger Randfall. Sollten wir überhaupt eine Zahnspange verwenden?
Hier sind die kommentierten Varianten, damit Sie ihre Lesbarkeit selbst beurteilen können:
? Anfänger machen das manchmal. Schlecht! Geschweifte Klammern sind nicht erforderlich:
if (n < 0) {alert(`Power ${n} wird nicht unterstützt`);}? Ohne geschweifte Klammern in eine separate Zeile aufteilen. Tun Sie das niemals, da beim Hinzufügen neuer Zeilen leicht ein Fehler passieren kann:
wenn (n < 0)
Alert(`Power ${n} wird nicht unterstützt`);? Eine Zeile ohne Klammern – akzeptabel, wenn sie kurz ist:
if (n < 0) warning(`Power ${n} wird nicht unterstützt`);? Die beste Variante:
wenn (n < 0) {
Alert(`Power ${n} wird nicht unterstützt`);
} Für einen sehr kurzen Code ist eine Zeile zulässig, z. B. if (cond) return null . Aber ein Codeblock (die letzte Variante) ist normalerweise besser lesbar.
Niemand liest gerne eine lange horizontale Codezeile. Es empfiehlt sich, sie aufzuteilen.
Zum Beispiel:
// Backtick-Anführungszeichen ` ermöglichen die Aufteilung der Zeichenfolge in mehrere Zeilen let str = ` TC39 von ECMA International ist eine Gruppe von JavaScript-Entwicklern. Implementierer, Akademiker und mehr, die mit der Community zusammenarbeiten die Definition von JavaScript zu pflegen und weiterzuentwickeln. `;
Und für if -Anweisungen:
Wenn (
id === 123 &&
Mondphase === 'Waning Gibbous' &&
Sternzeichen === 'Waage'
) {
letTheSorceryBegin();
}Die maximale Leitungslänge sollte auf Teamebene vereinbart werden. Normalerweise sind es 80 oder 120 Zeichen.
Es gibt zwei Arten von Einzügen:
Horizontale Einzüge: 2 oder 4 Leerzeichen.
Eine horizontale Einrückung erfolgt entweder mit 2 oder 4 Leerzeichen oder mit dem horizontalen Tabulatorsymbol (Taste Tab ). Welche man wählt, ist ein alter heiliger Krieg. Heutzutage sind Leerzeichen häufiger anzutreffen.
Ein Vorteil von Leerzeichen gegenüber Tabulatoren besteht darin, dass Leerzeichen eine flexiblere Konfiguration von Einzügen ermöglichen als das Tabulatorsymbol.
Beispielsweise können wir die Parameter wie folgt an der öffnenden Klammer ausrichten:
show(Parameter,
ausgerichtet, // 5 Leerzeichen auf der linken Seite auffüllen
eins,
nach,
ein anderer
) {
// ...
}Vertikale Einzüge: Leerzeilen zum Aufteilen von Code in logische Blöcke.
Sogar eine einzelne Funktion kann oft in logische Blöcke unterteilt werden. Im folgenden Beispiel sind die Initialisierung von Variablen, die Hauptschleife und die Rückgabe des Ergebnisses vertikal aufgeteilt:
Funktion pow(x, n) {
sei Ergebnis = 1;
// <--
for (sei i = 0; i < n; i++) {
Ergebnis *= x;
}
// <--
Ergebnis zurückgeben;
}Fügen Sie eine zusätzliche neue Zeile ein, wo dies hilft, den Code besser lesbar zu machen. Es sollten nicht mehr als neun Codezeilen ohne vertikale Einrückung vorhanden sein.
Nach jeder Anweisung sollte ein Semikolon stehen, auch wenn es ggf. übersprungen werden könnte.
Es gibt Sprachen, in denen ein Semikolon wirklich optional ist und nur selten verwendet wird. In JavaScript gibt es jedoch Fälle, in denen ein Zeilenumbruch nicht als Semikolon interpretiert wird, wodurch der Code fehleranfällig wird. Mehr dazu erfahren Sie im Kapitel Codestruktur.
Wenn Sie ein erfahrener JavaScript-Programmierer sind, können Sie einen Codestil ohne Semikolons wie StandardJS wählen. Andernfalls verwenden Sie am besten Semikolons, um mögliche Fallstricke zu vermeiden. Die Mehrheit der Entwickler setzt Semikolons.
Versuchen Sie zu vermeiden, dass der Code zu viele Ebenen tief verschachtelt wird.
Beispielsweise ist es in der Schleife manchmal eine gute Idee, die continue Direktive zu verwenden, um zusätzliche Verschachtelungen zu vermeiden.
Anstatt beispielsweise eine verschachtelte if -Bedingung wie diese hinzuzufügen:
for (sei i = 0; i < 10; i++) {
if (cond) {
... // <- eine weitere Verschachtelungsebene
}
}Wir können schreiben:
for (sei i = 0; i < 10; i++) {
if (!cond) continue;
... // <- keine zusätzliche Verschachtelungsebene
} Ähnliches kann mit if/else und return erfolgen.
Beispielsweise sind die beiden folgenden Konstrukte identisch.
Option 1:
Funktion pow(x, n) {
wenn (n < 0) {
alarm("Negativ 'n' nicht unterstützt");
} anders {
sei Ergebnis = 1;
for (sei i = 0; i < n; i++) {
Ergebnis *= x;
}
Ergebnis zurückgeben;
}
}Option 2:
Funktion pow(x, n) {
wenn (n < 0) {
alarm("Negativ 'n' nicht unterstützt");
zurückkehren;
}
sei Ergebnis = 1;
for (sei i = 0; i < n; i++) {
Ergebnis *= x;
}
Ergebnis zurückgeben;
} Die zweite ist besser lesbar, da der „Sonderfall“ von n < 0 frühzeitig behandelt wird. Sobald die Prüfung abgeschlossen ist, können wir mit dem „Haupt“-Codefluss fortfahren, ohne dass eine zusätzliche Verschachtelung erforderlich ist.
Wenn Sie mehrere „Hilfsfunktionen“ und den Code, der sie verwendet, schreiben, gibt es drei Möglichkeiten, die Funktionen zu organisieren.
Deklarieren Sie die Funktionen über dem Code, der sie verwendet:
// Funktionsdeklarationen
Funktion createElement() {
...
}
Funktion setHandler(elem) {
...
}
Funktion walkAround() {
...
}
// der Code, der sie verwendet
let elem = createElement();
setHandler(elem);
walkAround();Erst Code, dann Funktionen
// der Code, der die Funktionen verwendet
let elem = createElement();
setHandler(elem);
walkAround();
// --- Hilfsfunktionen ---
Funktion createElement() {
...
}
Funktion setHandler(elem) {
...
}
Funktion walkAround() {
...
}Gemischt: Eine Funktion wird dort deklariert, wo sie zum ersten Mal verwendet wird.
Meistens wird die zweite Variante bevorzugt.
Denn wenn wir Code lesen, wollen wir zunächst wissen , was er tut . Wenn der Code an erster Stelle steht, ist er von Anfang an klar. Dann müssen wir die Funktionen möglicherweise überhaupt nicht lesen, insbesondere wenn ihre Namen beschreiben, was sie tatsächlich tun.
Ein Styleguide enthält allgemeine Regeln zum „Schreiben“ von Code, z. B. welche Anführungszeichen verwendet werden sollen, wie viele Leerzeichen eingerückt werden sollen, die maximale Zeilenlänge usw. Viele Kleinigkeiten.
Wenn alle Mitglieder eines Teams denselben Styleguide verwenden, sieht der Code einheitlich aus, unabhängig davon, welches Teammitglied ihn geschrieben hat.
Natürlich kann ein Team jederzeit seinen eigenen Styleguide schreiben, aber normalerweise besteht keine Notwendigkeit. Es stehen zahlreiche Leitfäden zur Auswahl.
Einige beliebte Optionen:
Google JavaScript-Styleguide
Airbnb-JavaScript-Styleguide
Idiomatisch.JS
StandardJS
(und viele mehr)
Wenn Sie ein unerfahrener Entwickler sind, beginnen Sie mit dem Spickzettel am Anfang dieses Kapitels. Anschließend können Sie andere Styleguides durchsuchen, um weitere Ideen zu sammeln und zu entscheiden, welcher Ihnen am besten gefällt.
Linters sind Tools, die den Stil Ihres Codes automatisch überprüfen und Verbesserungsvorschläge machen können.
Das Tolle daran ist, dass die Stilprüfung auch einige Fehler finden kann, wie etwa Tippfehler in Variablen- oder Funktionsnamen. Aufgrund dieser Funktion wird die Verwendung eines Linters empfohlen, auch wenn Sie sich nicht an einen bestimmten „Codestil“ halten möchten.
Hier sind einige bekannte Fusselwerkzeuge:
JSLint – einer der ersten Linters.
JSHint – mehr Einstellungen als JSLint.
ESLint – wahrscheinlich das neueste.
Alle können den Job machen. Der Autor verwendet ESLint.
Die meisten Linters sind in viele gängige Editoren integriert: Aktivieren Sie einfach das Plugin im Editor und konfigurieren Sie den Stil.
Für ESLint sollten Sie beispielsweise Folgendes tun:
Installieren Sie Node.js.
Installieren Sie ESLint mit dem Befehl npm install -g eslint (npm ist ein JavaScript-Paketinstallationsprogramm).
Erstellen Sie eine Konfigurationsdatei mit dem Namen .eslintrc im Stammverzeichnis Ihres JavaScript-Projekts (in dem Ordner, der alle Ihre Dateien enthält).
Installieren/aktivieren Sie das Plugin für Ihren Editor, der in ESLint integriert ist. Die meisten Redakteure haben eine.
Hier ist ein Beispiel einer .eslintrc Datei:
{
„extends“: „eslint:recommended“,
„env“: {
"Browser": wahr,
„Knoten“: wahr,
„es6“: wahr
},
"Regeln": {
„no-console“: 0,
"Einzug": 2
}
} Hier bedeutet die Direktive "extends" , dass die Konfiguration auf dem Einstellungssatz „eslint:recommended“ basiert. Danach geben wir unsere eigenen an.
Es ist auch möglich, Stilregelsätze aus dem Internet herunterzuladen und diese stattdessen zu erweitern. Weitere Details zur Installation finden Sie unter https://eslint.org/docs/user-guide/getting-started.
Außerdem verfügen bestimmte IDEs über integriertes Linting, was zwar praktisch, aber nicht so anpassbar ist wie ESLint.
Alle in diesem Kapitel (und in den Styleguides, auf die verwiesen wird) beschriebenen Syntaxregeln zielen darauf ab, die Lesbarkeit Ihres Codes zu verbessern. Sie alle sind umstritten.
Wenn wir darüber nachdenken, „besseren“ Code zu schreiben, sollten wir uns folgende Fragen stellen: „Was macht den Code lesbarer und verständlicher?“ und „Was kann uns helfen, Fehler zu vermeiden?“ Dies sind die wichtigsten Dinge, die Sie bei der Auswahl und Diskussion von Codestilen beachten sollten.
Durch das Lesen beliebter Styleguides bleiben Sie über die neuesten Ideen zu Codestiltrends und Best Practices auf dem Laufenden.
Wichtigkeit: 4
Was stimmt mit dem folgenden Codestil nicht?
Funktion pow(x,n)
{
let result=1;
for(let i=0;i<n;i++) {result*=x;}
Ergebnis zurückgeben;
}
sei x=prompt("x?",''), n=prompt("n?",'')
wenn (n<=0)
{
Alert(`Power ${n} wird nicht unterstützt, bitte geben Sie eine Ganzzahl größer als Null ein`);
}
anders
{
alarm(pow(x,n))
}Repariere es.
Sie könnten Folgendes beachten:
Funktion pow(x,n) // <- kein Leerzeichen zwischen den Argumenten
{ // <- Zahlenklammer in einer separaten Zeile
let result=1; // <- keine Leerzeichen vor oder nach =
for(let i=0;i<n;i++) {result*=x;} // <- keine Leerzeichen
// Der Inhalt von { ... } sollte in einer neuen Zeile stehen
Ergebnis zurückgeben;
}
let x=prompt("x?",''), n=prompt("n?",'') // <-- technisch möglich,
// aber besser zwei Zeilen, außerdem gibt es keine Leerzeichen und fehlt ;
if (n<=0) // <- keine Leerzeichen innerhalb (n <= 0) und darüber sollte eine zusätzliche Zeile stehen
{ // <- Zahlenklammer in einer separaten Zeile
// unten – lange Zeilen können zur besseren Lesbarkeit in mehrere Zeilen aufgeteilt werden
Alert(`Power ${n} wird nicht unterstützt, bitte geben Sie eine Ganzzahl größer als Null ein`);
}
else // <- könnte es in einer einzelnen Zeile schreiben wie „} else {“
{
alarm(pow(x,n)) // keine Leerzeichen und fehlende ;
}Die feste Variante:
Funktion pow(x, n) {
sei Ergebnis = 1;
for (sei i = 0; i < n; i++) {
Ergebnis *= x;
}
Ergebnis zurückgeben;
}
let x = prompt("x?", "");
let n = prompt("n?", "");
if (n <= 0) {
warning(`Power ${n} wird nicht unterstützt,
Bitte geben Sie eine ganze Zahl größer als Null ein`);
} anders {
alarm( pow(x, n) );
}