Programmier-Tips
Bewährte Konventionen
Für eine bessere Lesbarkeit und Wartbarkeit von Quellcode ist es ratsam, sich beim Programmieren an einheitliche Konventionen zu halten. Dazu zählen u. a.:
- Namenskonventionen
- Leerzeichen, Einrückungen und Zeilenlänge
- Einbinden von externen Dateien
Namenskonventionen
Es ist ratsam immer die selben Namenskonventionen zu verwenden. Das erhöht die Lesbarkeit und Wartbarkeit von Quellcode. Es gibt folgende bekannte Namenskonventionen:
- camelCase: zu Beginn klein, jedes weitere Wortelement groß
- PascalCase: zu Beginn groß, jedes weitere Wortelement groß
- unterstrich_notierung: alles klein, Wortelemente durch Unterstrich getrennt
Folgendes ist bei der Vergabe von Namen außerdem noch zu beachten:
- Variablen- und Funktionsnamen dürfen nicht mit einer Zahle beginnen
- Variablen- und Funktionsnamen sollten nicht mit „$“ beginnen
- Variablen- und Funktionsnamen dürfen keine Bindestriche enthalten
Leerzeichen, Einrückungen und Zeilenlänge
Folgende Regeln sollten für die Lesbarkeit von Quellcode verwendet werden:
- Zwischen Operatoren sollten Leerzeichen verwendet werden
- Für Einrückungen sollten Leerzeichen und nicht Tabulatoren verwendet werden, da Tabulatoren von verschiedenen Browsern unterschiedlich interpretiert werden
- Eine Zeile sollte nicht mehr als 80 Zeichen enthalten
- Die beste Stelle für einen Zeilenumbruch ist nach einem Operator oder Komma
- Bei Anweisungs-Blöcken sollte die öffnende geschweifte Klammer mit Leerzeichen auf der ersten Zeile stehen und die schließende geschweifte Klammer separat auf der letzten Zeile
- Anweisungs-Blöcke sollten nicht durch Semikolon abgeschlossen werden
- Dafür sollten Objekt-Definitionen, auch wenn sie wie Anweisungs-Blöcke aussehen, immer mit einem Semikolon beendet werden
Einbinden von externen Dateien
Beim Einbinden von externen Skripten sollte immer die einfache Variante, ohne das „type“-Attribut verwendet werden.
Da einige Webserver zwischen Groß- und Kleinschreibung unterscheiden und andere nicht, sollten prinzipiell nur kleine Buchstaben für Dateinamen verwendet werden, um mögliche Fehler zu vermeiden:
Bewährte Vorgehensweisen
Globale Variablen vermeiden
Die Verwendung von globalen Variablen, Objekten und Funktionen sollte vermieden werden. In umfangreichen Programmen und wenn externer JavaScript-Code eingebunden wird, ist kaum zu überblicken, welche Variablennamen bereits verwendet wurden, was dazu führen kann, dass Variablennamen mehrfach verwendet und so Variablen überschrieben werden:
HTML-Datei:
Ergebnis:
Beispiel 1
x1:
y1:
myCalc11():
x1:
myCalc12():
x1:
Deklarationen immer am Anfang
Variablen sollten immer deklariert werden. Dadurch wird verhindert, dass Variablen ungewollt automatisch global deklariert werden. Außerdem ist es ratsam alle Variablen am Anfang eines Programms oder Code-Blocks zu deklarieren. Das verbessert die Übersichtlichkeit und vermindert das Risiko, dass Variablennamen doppelt verwendet werden:
HTML-Datei:
Ergebnis:
Beispiel 2
x2, y2, z2:
myAdd2(x2, y2):
x2, y2, z2:
mySub2(z2, y2):
x2, y2, z2:
Variablen initialisieren
Variablen sollten auch immer initialisiert werden. Dadurch wird der gewollte Typ einer Variablen ersichtlich und vermieden, dass Variablen auf „undefined“ gesetzt werden und ggf. zu ungewollten Ergebnissen führen:
HTML-Datei:
Ergebnis:
Beispiel 3
x3, y3, z3:
x3 + y3:
z3 - x3:
Standardwerte und -fälle
Um ungewolltes Verhalten eines Programms zu vermeiden, sollten immer auch Standardwerte und -fälle definiert werden. So sollten Funktionsparameter daraufhin geprüft werden, ob ihnen ein Wert zugewiesen wurde und bei „if“-Anweisungen auch immer ein „else“-Zweig und bei „switch“-Anweisungen immer ein „default“-Fall definiert werden:
HTML-Datei:
Ergebnis:
Beispiel 4
myAdd4(x4, y4):
myAdd4(x4):
myCheck4(myAdd4()):
Verwendung einfacher Variablen anstelle von Objekten
Für Zahlen, Zeichenketten und Boolesche Werte sollten einfache Variablen und keine Objekte verwendet werden. Die Verwendung von einfachen Variablen verbessert die Performance und ermöglicht Typen-Vergleiche:
HTML-Datei:
Ergebnis:
Beispiel 5
(x5 === y5) =
(a5 === b5) =
Häufige Fehler
Zuweisungsoperator als Vergleichsoperator
Ein häufiger Fehler ist die Verwendung eines Zuweisungsoperators (einfaches Gleichheits-zeichen) innerhalb eines Vergleichs, bei dem ein doppeltes Gleichheitszeichen erforderlich ist. Im folgenden Beispiel führt die fehlerhafte zweite „if...else“-Anweisung nicht nur dazu, dass der falsche Zweig genommen wird, sondern auch, dass ungewollt die Variable „y“ verändert wird:
HTML-Datei:
Ergebnis:
Beispiel 6
if (x6 == 33) =>
if (y6 = 44) =>
Falscher Typ bei „switch“-Anweisungen
Ein weiterer beliebter Fehler ist die Verwendung eines falschen Typs innerhalb einer „switch“-Anweisung. Im folgenden Beispiel ist die zweite „switch“-Anweisung falsch, da der Typ der Variablen nicht mit dem Typ für den „case“-Zweig übereinstimmt:
HTML-Datei:
Ergebnis:
Beispiel 7
switch(x7) { case 11: ... =>
switch(y7) { case 11: ... =>
Fehlerhafter Umbruch von Zeichenketten
In JavaScript sind Zeilenumbrüche innerhalb von Zeichenketten, ohne dass dies kenntlich gemacht wird, nicht erlaubt. Soll eine Zeichenkette umgebrochen werden, muss dazu am Zeilenende ein „Backslash“ („\“) verwendet werden:
HTML-Datei:
Ergebnis:
Beispiel 8
str81 =
str82 =
Fehlerhafter Umbruch von Anweisungen
Anweisungen können nur dann auf mehrere Zeilen umgebrochen werden, wenn die einzelnen Zeilen für sich keine vollständige Anweisung darstellen. Ist eine Anweisung vollständig, fügt JavaScript automatisch am Ende der Zeile ein Semikolon ein. Somit kann z. B. eine „return“-Anweisung nicht umgebrochen werden, da das Schlüsselwort „return“ für sich schon eine vollständige Anweisung ist:
HTML-Datei:
Ergebnis:
Beispiel 9
x9 =
myFunc9() =
Komma nach dem letzten Element
Auch wenn es nicht erforderlich ist, erlaubt JavaScript das Setzen eines Kommas nach dem letzten Element eines Objekts oder eines Arrays. Das sollte aber vermieden werden, da beim Übertragen von Daten mit JSON dies zu einem Fehler führt:
HTML-Datei:
Ergebnis:
Beispiel 10
myObj10.Nachname =
myJObj101.Nachname =
myJObj102.Nachname =
Performance
Anweisungen in Schleifen reduzieren
Eine Möglichkeit die Performance (Geschwindigkeit) von Skripten zu verbessern, ist die Reduzierung von Anweisungen innerhalb von Schleifen. Da bei Schleifen selbst die Anweisungen im Schleifenkopf bei jedem Durchlauf erneut ausgeführt werden, ist es ratsam so viele von diesen Anweisungen wie möglich schon vor der eigentlichen Schleife auszuführen:
HTML-Datei:
Ergebnis:
Beispiel 11
Schlechte Schleife = Millisekunden
Optimierte Schleife = Millisekunden
Zugriff auf DOM-Elemente reduzieren
Ein weiterer Performancegewinn lässt sich erzielen, indem der Zugriff auf DOM-Elemente jeweils immer nur einmal durchgeführt wird. Der Verweis auf das entsprechende DOM-Element wird dazu in einer Variablen vorgehalten, über die dann das DOM-Element ausgelesen oder manipuliert werden kann:
HTML-Datei:
Ergebnis:
Beispiel 12
Schlechter DOM-Zugriff = Millisekunden
Optimierter DOM-Zugriff = Millisekunden
Unnötige Variablen vermeiden
Die Performance lässt sich außerdem verbessern, indem auf unnötige Variablen verzichtet wird. Z. B. sollten Ergebnisse nicht erst in einer Variablen zwischengespeichert werden, bevor sie ausgegeben werden:
HTML-Datei:
Ergebnis:
Beispiel 13
Schlechtes Variablen-Handling = Millisekunden
Optimiertes Variablen-Handling = Millisekunden
JavaScript-Code erst nach dem Parsen laden
Damit eine Webseite möglichst schnell geladen und dargestellt wird, sollte der JavaScript-Code erst nach dem Aufbau der Seite (Parsen) geladen werden. Das kann z. B. dadruch realisiert werden, indem der interne JavaScript-Code an das Ende der HTML-Seite gesetzt wird. Bei externem Code kann das Attribut „defer“ mit dem Wert „true“ verwendet werden, wodurch das Script erst nach dem Aufbau der Seite geladen wird, egal wo das „script“-Tag im HTML-Dokument untergebracht ist:
Reservierte Wörter
In allen Programmiersprachen gibt es reservierte Wörter, die nicht als Namen für eigene Variablen, Objekte und Funktionen verwendet werden dürfen.
In JavaScript dürfen reservierte Wörter aus den folgenden Bereichen nicht verwendet werden:
- Befehlssatz von JavaScript: z. B. var, if, else, for, do, while, true, false, const, try, catch...
- JavaScript-Objekte, -Eigenschaften und -Methoden: z. B. Number, String, Boolean, Array, Object, Date, Math, function, length, toString…
Namen von vordefinierten HTML-Elementen, -Attributen und -Events sowie Windows-Objekten und -Eigenschaften SOLLTEN ebenfalls vermieden werden:
- HTML- und Windows-Objekte und -Eigenschaften: z. B. button, document, event, form, link, clientInformation, screenX, screenY...
- HTML-Events: z. B. onclick, onkeydown, onload, onsubmit...
Hinweis: Eine Liste der reservierten Wörter in JavaScript gibt es u. a. auf der Seite „JavaScript Reserved Words“ von „w3schools.com“!