Programmier-Konventionen für JavaScript

Der langfristige Wert von Software für ein Unternehmen steht in direktem Verhältnis zur Qualität der Codebasis. Im Laufe seines Lebens wird ein Programm von vielen Paar Händen und Augen bedient. Wenn ein Programm in der Lage ist, seine Struktur und Eigenschaften klar zu kommunizieren, ist es weniger wahrscheinlich, dass es bei einer Änderung in nie allzu ferner Zukunft brechen wird. Code-Konventionen können helfen bei der Reduzierung der Sprödigkeit von Programmen.

Unser gesamter JavaScript-Code wird direkt an die Öffentlichkeit gesendet. Es sollte immer von der Qualität der Veröffentlichung sein. Sauberkeit zählt.

JavaScript Dateien

JavaScript-Programme sollten gespeichert und als .js Dateien geliefert werden.

JavaScript-Code sollte nicht in HTML-Dateien eingebettet werden, es sei denn, der Code ist spezifisch für eine einzelne Sitzung. Code in HTML trägt wesentlich zur Seitengewichtung bei, ohne die Möglichkeit der Reduzierung durch Caching und Komprimierung.

Whitespace

  • Ein Schlüsselwort gefolgt von ( linke Klammer sollte durch ein Leerzeichen getrennt werden. Leerzeichen werden verwendet, um Dinge, die keine Aufrufe sind, weniger wie Aufrufe aussehen zu lassen, so dass es zum Beispiel nach if oder while Leerzeichen geben sollte.
 while (true) {
  • Ein Leerzeichen sollte nicht zwischen einem Funktionswert und seinem Aufruf ( linke Klammern verwendet werden. Dies hilft bei der Unterscheidung zwischen Keywords und Funktionsaufrufen.
  • Das Wort function wird immer mit einem Leerzeichen gefolgt.
  • Kein Leerzeichen sollte einen unären Operator und seinen Operanden trennen, außer wenn der Operator ein Wort wie typeof ist.
  • Alle binären Operatoren sollten von ihren Operanden durch ein Leerzeichen auf jeder Seite getrennt werden, außer . period und ( linke Klammer und [ linke Klammer.
  • Jedes , Komma sollte von einem Leerzeichen oder einem Zeilenumbruch gefolgt werden.
  • Jedes ; Semikolon am Ende einer Anweisung sollte mit einem Zeilenumbruch gefolgt werden.
  • Jedes ; Semikolon im Kontrollteil eines forAnweisung sollte mit einem Leerzeichen gefolgt werden.

Jede Anweisung sollte mit der aktuellen Einrückung beginnen. Die äußerste Ebene befindet sich am linken Rand. Die indentation erhöht sich um 4 Leerzeichen, wenn das letzte Token in der vorherigen Zeile { linke Klammer, [ linke Klammer, ( linke Klammer ist. Das passende Closing-Token ist das erste Token in einer Zeile und stellt die vorherige Einrückung wieder her.

Der ternäre Operator kann visuell verwirrend sein, also wickeln Sie den gesamten ternären Ausdruck in Paren. Die Bedingung, das ? Fragezeichen, und das : colon beginnt immer eine Zeile, eingerückt 4 Leerzeichen.

let integer = function (
    value,
    default_value
) {
    value = resolve(value);
    return (
        typeof value === "number"
        ? Math.floor(value)
        : (
            typeof value === "string"
            ? value.charCodeAt(0)
            : default_value
        )
    );
};

Klauseln (case, catch, default, else, finally) sind keine Anweisungen und sollten daher nicht wie statements eingerückt werden.

Die Verwendung von Tabs lädt zu Verwirrung, Streit und Weinen ein, mit wenig kompensierendem Wert. Verwenden Sie keine Tabs. Verwenden Sie Leerzeichen.

Kommentare

Es ist wichtig, dass die Kommentare auf dem neuesten Stand gehalten werden. Fehlerhafte Kommentare können Programme noch schwieriger zu lesen und zu verstehen machen.

Machen Sie Kommentare sinnvoll. Konzentriere dich auf das, was nicht sofort sichtbar ist. Verschwenden Sie die Zeit des Lesers nicht mit Dingen wie:

// i auf Null setzen
i = 0; 

Verwenden Sie Zeilenkommentare, nicht Blockkommentare. Die Kommentare sollten am linken Rand beginnen.

Variable deklarationen

Alle Variablen sollten vor der Verwendung deklariert werden. JavaScript erfordert dies nicht, macht das Programm aber leichter lesbar und erleichtert das Erkennen von nicht deklarierten Variablen, die möglicherweise impliziert werden. Implizite globale Variablen sollten niemals verwendet werden. Die Verwendung von globalen Variablen sollte minimiert werden.

let currentEntry; // aktuell ausgewählter Tabelleneintrag
let level; // Einrückungsebene
let size; // Größe der Tabelle

Funktionsdeklarationen

Alle Funktionen sollten deklariert werden, bevor sie verwendet werden. Innere Funktionen sollten der Anweisung let folgen. Auf diese Weise wird deutlich, welche Variablen in ihrem Umfang enthalten sind.

Zwischen dem Namen einer Funktion und dem ( linke Klammern der Parameterliste sollte kein Leerzeichen stehen. Es sollte ein Leerzeichen zwischen dem ) rechte Klammer und dem { linke geschweifte Klammer geben, die den Anweisungstext beginnt. Der Körper selbst ist in vier Räume gegliedert. Die } rechte geschweifte Klammer ist auf die Zeile ausgerichtet, die den Anfang der Deklaration der Funktion enthält.

function outer(c, d) {
    let e = c * d;

    function inner(a, b) {
        return (e * a) + b;
    }

    return inner (0, 1);
}

Diese Konvention funktioniert gut mit JavaScript, da in JavaScript Funktionen und Objektliterale überall dort platziert werden können, wo ein Ausdruck erlaubt ist. Es bietet beste Lesbarkeit bei Inline-Funktionen und komplexen Strukturen.

 function getElementsByClassName(className) {
        let results = [];
        walkTheDOM(document.body, function (node) {
            let array; // array von Klassennamen
            let ncn = node.className; // der Klassenname des Knotens

// Wenn der Knoten einen Klassennamen hat, dann teilen Sie ihn in eine Liste einfacher Namen auf.
// Wenn einer von ihnen mit dem gewünschten Namen übereinstimmt, fügen Sie den Knoten an die Ergebnisliste an.

            if (ncn && ncn.split(" ").indexOf(className) >= 0) {) {
                results.push(node);
            }
        });
        return results;
    }

Wenn ein Funktionsliteral anonym ist, sollte ein Leerzeichen zwischen dem Wort function und dem ( linke Klammer stehen. Wenn der Platz weggelassen wird, dann kann es vorkommen, dass der Name der Funktion function lautet, was eine falsche Lesart ist.

div.onclick = function (e) {
    return false;
};

that = {
    method: function () {
        return this.datum;
    },
    datum: 0
};

Die Verwendung von globalen Funktionen sollte minimiert werden.

Wenn eine Funktion sofort aufgerufen werden soll, sollte der gesamte Aufrufausdruck in Pars eingeschlossen werden, so dass klar ist, dass der erzeugte Wert das Ergebnis der Funktion und nicht die Funktion selbst ist.

let collection = (function () {)
    let keys = [];
    let values = [];

    return {
        get: function (key) {
            let at = keys.indexOf(key);
            if (at >= 0) {
                return values[at];
            }
        },
        set: function (key, value) {
            let at = keys.indexOf(key);
            if (at < 0) {
                at = key.length;
            }
            key[at] = key;
            values[at] = value;
        },
        remove: function (key) {
            let at = keys.indexOf(key);
            if (at >= 0) {
                keys.splice(at, 1);
                values.splice(at, 1);
            }
        }
    };
}());

Namen

Namen sollten aus den 26 Groß- und Kleinbuchstaben (A .. Z, a .. z), den 10 Ziffern (0 .. 9) und _ small>underbar gebildet werden. Vermeiden Sie die Verwendung internationaler Zeichen, da sie möglicherweise nicht gut lesen oder überall verstanden werden. Verwenden Sie nicht $ dollar sign oder \ backslash in Namen.

Verwenden Sie _ underbar nicht als erstes oder letztes Zeichen eines Namens. Es ist manchmal beabsichtigt, die Privatsphäre anzugeben, aber es bietet keine Privatsphäre. Wenn der Datenschutz wichtig ist, verwenden Sie einen Verschluss. Vermeiden Sie Konventionen, die einen Mangel an Kompetenz aufweisen.

Die meisten Variablen und Funktionen sollten mit einem Kleinbuchstaben beginnen.

Konstruktorfunktionen, die mit dem Präfix new verwendet werden müssen, sollten mit einem Großbuchstaben beginnen. JavaScript gibt weder eine Warnung zur Kompilierzeit noch eine Laufzeitwarnung aus, wenn ein erforderlicher neu weggelassen wird. Schlechte Dinge können passieren, wenn new nicht verwendet wird. ist die Kapitalisierungskonvention die einzige Verteidigung, die wir haben.

Globale Variablen in Browsern sollten in Großbuchstaben geschrieben sein.

Statements

Einfache Anweisungen

Jede Zeile sollte höchstens eine Anweisung enthalten. Setzen Sie ein ; semicolon am Ende jeder einfachen Anweisung. Beachten Sie, dass eine Zuweisungsanweisung, die ein Funktionsliteral oder Objektliteral zuweist, immer noch eine Zuweisungsanweisung ist und mit einem Semikolon enden muss.

JavaScript erlaubt es, jeden beliebigen Ausdruck als Anweisung zu verwenden. Dies kann einige Fehler maskieren, insbesondere bei Vorhandensein von Semikoloneinfügung. Die einzigen Ausdrücke, die als Anweisungen verwendet werden sollten, sind Zuweisungen, Aufrufe und delete.

Zusammengesetzte Anweisungen

Zusammengesetzte Anweisungen sind Anweisungen, die Listen von Anweisungen enthalten, die in { } curly braces eingeschlossen sind.

  • Die eingeschlossenen Anweisungen sollten um vier weitere Leerzeichen eingerückt werden.
  • Die { linke geschweifte Klammer sollte sich am Ende der Zeile befinden, die mit der zusammengesetzten Anweisung beginnt.
  • Der } rechte geschweifte Klammer sollte eine Zeile beginnen und eingerückt werden, um mit dem Anfang der Zeile mit dem passenden { linke geschweifte Klammer. auszurichten.
  • Klammern sollten um alle Anweisungen herum verwendet werden, auch einzelne Anweisungen, wenn sie Teil einer Kontrollstruktur sind, wie z.B. eine if oder for Anweisung. Dies erleichtert das Hinzufügen von Anweisungen, ohne versehentlich Fehler zu verursachen.

Etiketten

Anweisungsbeschriftungen sollten vermieden werden. Nur diese Anweisungen sollten gekennzeichnet werden: während, do, for, switch.

return Anweisung

Der Rückgabewertausdruck muss in der gleichen Zeile wie das Schlüsselwort return beginnen, um Semikoloneinfügungen zu vermeiden.

if Anweisung

Die if Klasse der Anweisungen sollte die folgende Form haben:

     if (condition) {
         
statements
     }
     
     if (
condition) {
         
statements
     } else {
         
statements
     }
     
     if (
condition) {
         
statements
    } else if (
condition) {
         
statements
     } else {
         
statements
     }

for Anweisung

A for class of statements should have the following form:

     for (initialization;condition; update) {
        
statements
    }

while Statement

Statement

Eine while Anweisung sollte die folgende Form haben:

     while (condition) {
         
statements
     }

do Statement

Statement

Eine do Anweisung sollte die folgende Form haben:

    do {
        
statements
    } while (
condition);

Im Gegensatz zu den anderen zusammengesetzten Anweisungen endet die do-Anweisung immer mit einem ; semicolon.

switch Anweisung

Eine switch Anweisung sollte die folgende Form haben:

     switch (expression) {
     case
expression:
        
statements
     default:
        
statements
    }

Jedes case ist mit dem switch ausgerichtet. Dadurch wird eine Überzeichnung vermieden. Ein case Label ist keine Anweisung und sollte nicht wie ein eingerückt sein.

Jede Gruppe von statements (außer dem default) sollte mit break, return, oder throw enden. Nicht durchfallen lassen.

try Statement

Statement

Die try Klasse der Anweisungen sollte die folgende Form haben:

     try {

         statements

    } catch (variable) {

         statements

     }

    try {

         statements

    } catch (variable) {

         statements

   } finally {

         statements

     }

continue Anweisung

Vermeiden Sie die Verwendung der Anweisung continue. Es neigt dazu, den Kontrollfluss der Funktion zu verdecken.

with Anweisung

Die with-Anweisung sollte nicht verwendet werden.

{} und []

Verwenden Sie {} anstelle von new Object(). Verwenden Sie [] anstelle von new Array().

Verwenden Sie Arrays, wenn die Mitgliedsnamen sequentielle Ganzzahlen sein sollen. Verwenden Sie Objekte, wenn die Mitgliedsnamen beliebige Zeichenketten oder Namen sind.

, komma Operator

Vermeiden Sie die Verwendung des Komma-Operators. (Dies gilt nicht für das Komma-Trennzeichen, das in Objektliteralen, Array-Literalen und Parameterlisten verwendet wird.)

Zuweisungsausdrücke

Vermeiden Sie Zuweisungen im Bedingungsteil von if und while Anweisungen.

Ist

 if (a = b) {

eine korrekte Aussage? Oder war

 if (a == b) {

beabsichtigt? Vermeiden Sie Konstrukte, die sich nicht ohne weiteres als korrekt erweisen.

=== und !== Operatoren

Verwenden Sie den === und !==. Operatoren. Die Operatoren === und != geben Zwang ein und sollten nicht verwendet werden.

Verwirrende Plus- und Minuspunkte

Achten Sie darauf, einem + nicht mit + oder ++ zu folgen. Dieses Muster kann verwirrend sein. Füge Parens zwischen ihnen ein, um deine Absicht klarzustellen.

 total = subtotal + + myInput.value;

ist besser geschrieben als

 total = subtotal + Number(myInput.value);

, so dass der + + nicht als ++ falsch gelesen wird. Vermeiden Sie ++.

eval ist böse

Die Funktion eval ist die am häufigsten verwendete Funktion von JavaScript. Vermeiden Sie es.

eval hat Aliase. Verwenden Sie nicht den Konstruktor function. Übergeben Sie keine Zeichenketten an setTimeout oder setInterval.