JavaScript-Style-Richtlinien

Verwenden Sie immer die gleichen Codekonventionen für alle Ihre JavaScript-Projekte.

JavaScript-Codekonventionen

Codekonventionen (Coding conventions) beziehen sich aufStilrichtlinien für die ProgrammierungDiese Prinzipien umfassen im Allgemeinen:

  • Namen und Deklarationsregeln für Variablen und Funktionen
  • Regeln für den Gebrauch von Leerzeichen, Einrückungen und Kommentaren
  • Programmiergewohnheiten und -grundsätze

CodekonventionenStellen Sie sicher, dass die Qualität gewährleistet ist:

  • Verbessern Sie die Lesbarkeit des Codes
  • Erhöhen Sie die Wartbarkeit des Codes

Codekonventionen können schriftliche Regeln sein, die von einem Team befolgt werden, oder Ihre persönliche Coding-Gewohnheiten sein.

Diese Seite beschreibt die allgemeinen JavaScript-Codekonventionen, die von CodeW3C.com verwendet werden.

Sie sollten das nächste Kapitel „Best Practices“ fortsetzen und lernen, wie Sie Encoding-Fallen vermeiden können.

Variablenname

Auf CodeW3C.com verwenden wir für Identifikatornamen (Variablen und Funktionen) denKapitälchenstil.

Alle Namen beginnen mitBuchstabenAnfang.

Wir werden am Ende dieser Seite ausführlich über Namensregeln sprechen.

firstName = "Bill";
lastName = "Gates";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

Leerzeichen um Operator

Verwenden Sie immer ein Leerzeichen um Operator ( = + - * / ) und Kommas herum:

Beispiel

var x = y + z;
var values = ["Volvo", "Saab",  "Fiat"];

Codeeinrückung

Verwenden Sie immer 4 Leerzeichen für die Einrückung von Codeblöcken:

Funktion

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

Verwenden Sie keine Tabulatoren für Einrückung. Verschiedene Editoren interpretieren Tabs unterschiedlich.

Anweisungsregeln

Allgemeine Regeln für einfache Anweisungen:

Verwenden Sie immer ein Semikolon zum Beenden eines einzelnen Anweisungen:

Beispiel

var values = ["Volvo", "Saab",  "Fiat"];
var person = {
    firstName: "Bill",
     lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

Allgemeine Regeln für komplexe Anweisungen (compound):

  • Schreiben Sie das Öffnende Klammer am Ende der ersten Zeile
  • Verwenden Sie einen Leerzeichen vor dem Öffnenden Klammern
  • Schreiben Sie das Schließende Klammer in einer neuen Zeile, ohne führende Leerzeichen
  • Verwenden Sie kein Semikolon zum Beenden komplexer Anweisungen

Funktion:

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

Schleife:

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

Bedingung:

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

Objektregeln

Allgemeine Regeln für Objektdefinitionen:

  • Platzieren Sie den Öffnenden Klammern und den Objektname auf einer Zeile
  • Verwenden Sie einen Doppelpunkt mit einem Leerzeichen zwischen jedem Attribut und seinem Wert
  • Schreiben Sie kein Komma nach dem letzten Attributwertpaar
  • Schreiben Sie das Schließende Klammer in einer neuen Zeile, ohne führende Leerzeichen
  • Verwenden Sie immer ein Semikolon am Ende der Objektdefinition

Beispiel

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

Kann ein kurzes Objekt in einer Zeile komprimiert werden, indem nur zwischen den Attributen Leerzeichen verwendet werden, wie folgt:

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

Zeilenlänge weniger als 80

Um die Lesbarkeit zu verbessern, vermeiden Sie, jede Zeile über 80 Zeichen lang zu machen.

Wenn ein JavaScript-Ausdruck über die Länge einer Zeile hinausgeht, ist der beste Ort für Zeilenumbrüche nach Operatoren oder Kommas.

Beispiel

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

Probieren Sie selbst aus

Namenskonvention

Verwenden Sie immer die gleiche Namenskonvention für all Ihr Code. Zum Beispiel:

  • Variablen- und Funktionsnamen mitGroß-Klein-Schreibung (CamelCase)um zu schreiben
  • Globale Variablen verwendenGroßbuchstaben(Wir tun das nicht, aber es ist ziemlich verbreitet)
  • Konstanten (wie PI) verwendenGroßbuchstaben

Sollten wir sie in Variablennamen verwenden?Bindestriche,Groß-Klein-Schreibung (CamelCase)oderUnterschiedeoder?

Dies ist ein oft diskutiertes Thema unter Programmierern. Die Antwort hängt davon ab, wer diese Frage beantwortet:

Bindestriche in HTML und CSS:

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

CSS verwendet Bindestriche in Property-Namen (font-size).

Bindestriche können fälschlicherweise als Minus-Operator betrachtet werden. JavaScript-Namen erlauben keine Bindestriche.

Unterschiede:

Viele Programmierer bevorzugen Unterschiede (date_of_birth), insbesondere in SQL-Datenbanken.

Unterschiede werden oft in PHP-Dokumentationen verwendet.

Pascal-Namenskonvention (PascalCase):

Programmierer, die C-Sprache verwenden, nutzen oft die Pascal-Namenskonvention.

Groß-Klein-Schreibung (CamelCase):

JavaScript selbst, jQuery und andere JavaScript-Bibliotheken verwenden Gross-Klein-Schreibung (CamelCase).

JavaScript-Namen sollten nicht mit dem Dollar-Symbol ($) beginnen. Dies kann zu Namenskonflikten in JavaScript führen.

JavaScript im HTML laden

Verwenden Sie eine einfache Syntax, um externe Skripte zu laden (das Attribut type ist nicht erforderlich):

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

Zugriff auf HTML-Elemente

Die Konsequenzen einer "unordentlichen" HTML-Style, möglicherweise führen zu JavaScript-Fehlern.

Diese zwei JavaScript-Anweisungen erzeugen unterschiedliche Ergebnisse:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Wenn möglich, verwenden Sie im HTML die gleiche Namenskonvention (wie in JavaScript).

Zugriff auf die HTML-Style-Anleitung.

Dateierweiterungen

HTML-Dateien sollten .html Erweiterung (statt .htm).

CSS-Dateien sollten .css Erweiterung.

JavaScript-Dateien sollten .js Erweiterung.

Verwenden Sie kleine Dateinamen

Die meisten Webserver (Apache, Unix) sind大小写sensitiv für Dateinamen:

london.jpg kann nicht als London.jpg aufgerufen werden.

Andere Webserver (Microsofts IIS) sind nicht大小写sensitiv:

london.jpg kann sowohl als London.jpg als auch als london.jpg aufgerufen werden.

Wenn Sie Mischung von Groß- und Kleinschreibung verwenden, müssen Sie streng konsistent und kontinuierlich bleiben.

Wenn Sie eine Website von einem nicht大小写敏感的服务器 auf einen大小写敏感的服务器 übertragen, kann auch dieser kleine Fehler Ihre Website beschädigen.

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

Leistung

Computer verwenden keine Codekonventionen. Die meisten Regeln haben einen geringen Einfluss auf die Ausführung des Programms.

Einrücken und zusätzliche Leerzeichen sind für kurze Skripte nicht wichtig.

Für Skripte im Entwicklungsprozess sollte der Lesbarkeit Vorrang eingeräumt werden. Größere Produktions-Skripte sollten verkürzt werden.