JavaScript-Styleguide


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Verwenden Sie für Ihr gesamtes JavaScript immer die gleichen Codierungskonventionen Projekte.


Codierungskonventionen sind Stilrichtlinien für die Programmierung. Sie decken in der Regel Folgendes ab:

  • Benennungs- und Deklarationsregeln für Variablen und Funktionen.

  • Regeln für die Verwendung von Leerzeichen, Einrückungen und Kommentaren.

  • Programmierpraktiken und -prinzipien.

Codierungskonventionen sichere Qualität:

  • Verbessern Sie die Lesbarkeit des Codes

  • Erleichtern Sie die Codepflege

Codierungskonventionen können dokumentierte Regeln sein, die von Teams befolgt werden müssen, oder einfach Ihre individuelle Codierungspraxis sein.

Auf dieser Seite werden die allgemeinen JavaScript-Codekonventionen beschrieben, die von W3Schools verwendet werden.
Lesen Sie auch das nächste Kapitel „Best Practices“ und erfahren Sie, wie Sie Codierungsfallen vermeiden.


Variablennamen

Bei W3schools verwenden wir camelCase für Bezeichnernamen (Variablen und Funktionen).

Alle Namen beginnen mit einem Buchstaben.

Unten auf dieser Seite finden Sie eine ausführlichere Diskussion über die Benennung Regeln.

firstName = "John";
lastName = "Doe";
price = 19.90;
 tax = 0.20;
fullPrice = price + (price * tax);

Leerzeichen um Operatoren

Setzen Sie immer Leerzeichen um Operatoren (=+ - */) und nach Kommas:

Beispiele:

let x = y + z;
const myArray = ["Volvo", "Saab", 
 "Fiat"];


Code-Einrückung

Verwenden Sie zum Einrücken von Codeblöcken immer 2 Leerzeichen:

Funktionen:

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Verwenden Sie zum Einrücken keine Tabulatoren (Tabulatoren). Verschiedene Editoren interpretieren Tabulatoren unterschiedlich.


Anweisungsregeln

Allgemeine Regeln für einfache Aussagen:

  • Beenden Sie eine einfache Anweisung immer mit einem Semikolon.

Beispiele:

const cars = ["Volvo", "Saab", 
 "Fiat"];

const person = {
  firstName: "John",
  
 lastName: "Doe",
  age: 50,
  eyeColor: 
 "blue"
};

Allgemeine Regeln für komplexe (zusammengesetzte) Aussagen:

  • Platzieren Sie die öffnende Klammer am Ende der ersten Zeile.

  • Verwenden Sie ein Leerzeichen vor der öffnenden Klammer.

  • Setzen Sie die schließende Klammer in eine neue Zeile, ohne führende Leerzeichen.

  • Beenden Sie eine komplexe Anweisung nicht mit einem Semikolon.

Funktionen:

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

Schleifen:

for (let i = 0; i < 5; i++) {
  x += i;
}

Bedingungen:

if (time < 20) {
  greeting = "Good day";
} else {
    
 greeting = "Good evening";
}

Objektregeln

Allgemeine Regeln für Objektdefinitionen:

  • Platzieren Sie die öffnende Klammer in derselben Zeile wie der Objektname.

  • Verwenden Sie zwischen jeder Eigenschaft und ihrem Wert einen Doppelpunkt plus ein Leerzeichen.

  • Verwenden Sie Anführungszeichen um Zeichenfolgenwerte, nicht um numerische Werte.

  • Fügen Sie nach dem letzten Eigenschafts-Wert-Paar kein Komma ein.

  • Platzieren Sie die schließende Klammer in einer neuen Zeile, ohne führende Räume.

  • Beenden Sie eine Objektdefinition immer mit einem Semikolon.

Beispiel

Kurze Objekte können komprimiert und nur mit Leerzeichen in einer Zeile geschrieben werden zwischen Eigenschaften, wie folgt:


Leitungslänge < 80

Vermeiden Sie aus Gründen der Lesbarkeit Zeilen mit mehr als 80 Zeilen Figuren.

Wenn eine JavaScript-Anweisung nicht in eine Zeile passt, ist dies die beste Stelle zum Umbrechen es steht nach einem Operator oder einem Komma.

Beispiel

document.getElementById("demo").innerHTML =
  "Hello Dolly.";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>My Web Page</h2>

<p>The best place to break a code line is after an operator or a comma.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello Dolly.";
</script>

</body>
</html>

Regeln der Namensgebung

Verwenden Sie für Ihren gesamten Code immer dieselbe Namenskonvention. Zum Beispiel:

  • Variablen- und Funktionsnamen geschrieben als camelCase

  • Globale Variablen, die in GROSSBUCHSTABEN geschrieben sind (wir tun das nicht, aber es ist so durchaus üblich)

  • Konstanten (wie PI) in GROSSBUCHSTABEN geschrieben

Sollten Sie Bindestriche, camelCase oder verwenden under_scores in Variablennamen?

Dies ist eine Frage, die Programmierer oft diskutieren. Die Antwort hängt davon ab, wer Sie sind fragen:

Bindestriche in HTML und CSS:

HTML5-Attribute können mit data- (data-quantity, data-price) beginnen.

CSS verwendet Bindestriche in Eigenschaftsnamen (Schriftgröße).

Bindestriche können als Subtraktionsversuche verwechselt werden. Bindestriche sind in JavaScript-Namen nicht zulässig.

Unterstriche:

Viele Programmierer bevorzugen die Verwendung von Unterstrichen (Geburtsdatum), insbesondere in SQL Datenbanken.

In der PHP-Dokumentation werden häufig Unterstriche verwendet.

PascalCase:

PascalCase wird oft von C-Programmierern bevorzugt.

camelCase:

camelCase wird von JavaScript selbst, von jQuery und anderem JavaScript verwendet Bibliotheken.

Beginnen Sie Namen nicht mit einem $-Zeichen. Dadurch geraten Sie in Konflikt mit vielen JavaScript-Bibliotheksnamen.


Laden von JavaScript in HTML

Verwenden Sie eine einfache Syntax zum Laden externer Skripte (das Typattribut ist nicht vorhanden). notwendig):

<script src="myscript.js"></script>

Zugriff auf HTML-Elemente

Die Verwendung „unordentlicher“ HTML-Stile kann zu JavaScript-Fehlern führen.

Diese beiden JavaScript-Anweisungen führen zu unterschiedlichen Ergebnissen:

const obj = getElementById("Demo")

const obj = getElementById("demo")

Verwenden Sie nach Möglichkeit dieselbe Namenskonvention (wie JavaScript) in HTML.

Besuchen Sie den HTML Style Guide.


Dateierweiterungen

HTML-Dateien sollten die Erweiterung .html haben (.htm ist zulässig). <p>CSS-Dateien sollten die Erweiterung .css haben.

JavaScript-Dateien sollten die Erweiterung .js haben.


Verwenden Sie Dateinamen in Kleinbuchstaben

Die meisten Webserver (Apache, Unix) achten bei Dateinamen auf die Groß-/Kleinschreibung:

Auf london.jpg kann nicht als London.jpg zugegriffen werden.

Bei anderen Webservern (Microsoft, IIS) wird die Groß-/Kleinschreibung nicht beachtet:

Auf london.jpg kann als London.jpg oder london.jpg zugegriffen werden.

Wenn Sie eine Mischung aus Groß- und Kleinschreibung verwenden, müssen Sie äußerst vorsichtig sein konsistent.

Wenn Sie von einem Server ohne Berücksichtigung der Groß-/Kleinschreibung zu einem Server mit Berücksichtigung der Groß-/Kleinschreibung wechseln, sogar klein Fehler können Ihre Website zerstören.

Um diese Probleme zu vermeiden, verwenden Sie (wenn möglich) immer Dateinamen in Kleinbuchstaben.


Leistung

Codierungskonventionen werden von Computern nicht verwendet. Die meisten Regeln haben geringe Auswirkungen auf die Ausführung von Programmen.

Einrückungen und zusätzliche Leerzeichen spielen in kleinen Skripten keine Rolle.

Bei Code in der Entwicklung sollte die Lesbarkeit bevorzugt werden. Größere Produktion Skripte sollten minimiert werden.