JavaScript-Styleguide
Verwenden Sie für alle Ihre JavaScript-Projekte immer die gleichen Programmierkonventionen.
JavaScript-Codierungskonventionen
Codierungskonventionen sind Stilrichtlinien für die Programmierung . Sie umfassen in der Regel:
- Benennungs- und Deklarationsregeln für Variablen und Funktionen.
- Regeln für die Verwendung von Leerzeichen, Einrückungen und Kommentaren.
- Programmierpraktiken und -prinzipien
Kodierkonventionen sichern Qualität :
- Verbessert die Lesbarkeit des Codes
- Vereinfachen Sie die Codepflege
Codierungskonventionen können dokumentierte Regeln sein, die Teams befolgen müssen, oder einfach Ihre individuelle Codierungspraxis sein.
Diese Seite beschreibt die allgemeinen JavaScript-Code-Konventionen, die von W3Schools verwendet werden.
Lesen Sie auch das nächste Kapitel „Best Practices“ und erfahren Sie, wie Sie Fallstricke beim Programmieren 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 umfassendere Diskussion über Benennungsregeln.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
Leerzeichen um Operatoren herum
Setzen Sie immer Leerzeichen um Operatoren ( = + - * / ) und nach Kommas:
Beispiele:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];
Code-Einrückung
Verwenden Sie immer 2 Leerzeichen zum Einrücken von Codeblöcken:
Funktionen:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Verwenden Sie keine Tabulatoren (Tabulatoren) zum Einrücken. Verschiedene Editoren interpretieren Registerkarten 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) Anweisungen:
- Setzen Sie die öffnende Klammer an das 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 einen Doppelpunkt plus ein Leerzeichen zwischen jeder Eigenschaft und ihrem Wert.
- Verwenden Sie Anführungszeichen um Zeichenfolgenwerte, nicht um numerische Werte.
- Fügen Sie nach dem letzten Eigenschaft/Wert-Paar kein Komma hinzu.
- Setzen Sie die schließende Klammer in eine neue Zeile, ohne führende Leerzeichen.
- Beenden Sie eine Objektdefinition immer mit einem Semikolon.
Beispiel
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Kurze Objekte können komprimiert in einer Zeile geschrieben werden, wobei nur Leerzeichen zwischen Eigenschaften verwendet werden, wie folgt:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Zeilenlänge < 80
Vermeiden Sie aus Gründen der Lesbarkeit Zeilen mit mehr als 80 Zeichen.
Wenn eine JavaScript-Anweisung nicht in eine Zeile passt, ist die beste Stelle, um sie zu unterbrechen, nach einem Operator oder einem Komma.
Beispiel
document.getElementById("demo").innerHTML =
"Hello Dolly.";
Regeln der Namensgebung
Verwenden Sie für Ihren gesamten Code immer dieselbe Namenskonvention. Beispielsweise:
- Variablen- und Funktionsnamen als camelCase geschrieben
- Globale Variablen in GROSSBUCHSTABEN geschrieben (Wir nicht, aber es ist ziemlich üblich)
- Konstanten (wie PI) in GROSSBUCHSTABEN geschrieben
Sollten Sie hyp- hens , camelCase oder under_scores in Variablennamen verwenden?
Dies ist eine Frage, die Programmierer häufig diskutieren. Die Antwort hängt davon ab, wen Sie 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 missverstanden werden. Bindestriche sind in JavaScript-Namen nicht erlaubt.
Unterstriche:
Viele Programmierer bevorzugen Unterstriche (Geburtsdatum), insbesondere in SQL-Datenbanken.
Unterstriche werden häufig in der PHP-Dokumentation verwendet.
PascalFall:
PascalCase wird oft von C-Programmierern bevorzugt.
KamelFall:
camelCase wird von JavaScript selbst, von jQuery und anderen JavaScript-Bibliotheken verwendet.
Beginnen Sie Namen nicht mit einem $-Zeichen. Es wird Sie in Konflikt mit vielen JavaScript-Bibliotheksnamen bringen.
Laden von JavaScript in HTML
Verwenden Sie einfache Syntax zum Laden externer Skripte (das type-Attribut ist nicht erforderlich):
<script src="myscript.js"></script>
Zugriff auf HTML-Elemente
Eine Folge der 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-Styleguide .
Dateierweiterungen
HTML-Dateien sollten die Erweiterung .html haben ( .htm ist zulässig).
CSS-Dateien sollten die Erweiterung .css haben .
JavaScript-Dateien sollten die Erweiterung .js haben .
Verwenden Sie Dateinamen in Kleinbuchstaben
Bei den meisten Webservern (Apache, Unix) wird bei Dateinamen zwischen Groß- und Kleinschreibung unterschieden:
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 konsequent sein.
Wenn Sie von einem Server, bei dem die Groß-/Kleinschreibung nicht beachtet wird, auf einen Server wechseln, bei dem die Groß-/Kleinschreibung beachtet wird, können selbst kleine Fehler Ihre Website beschädigen.
Um diese Probleme zu vermeiden, verwenden Sie Dateinamen immer in Kleinbuchstaben (wenn möglich).
Leistung
Codierungskonventionen werden von Computern nicht verwendet. Die meisten Regeln haben wenig Einfluss auf die Ausführung von Programmen.
Einrückungen und zusätzliche Leerzeichen spielen in kleinen Schriften keine Rolle.
Bei Code in der Entwicklung sollte die Lesbarkeit bevorzugt werden. Größere Produktionsskripte sollten minimiert werden.