JavaScript hat keinen maßgeblichen Codierungsstil -Leitfaden, sondern es handelt sich um einige beliebte Codierungsstile:
Die Codekopie lautet wie folgt:
Googles JavaScript Style Guide (im Folgenden als Google bezeichnet)
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
NPM -Codierungsstil (im Folgenden als NPM bezeichnet)
https://npmjs.org/doc/coding-style.html
Felix's Node.js Style Guide (im Folgenden als Node.js bezeichnet)
http://nodeguide.com/style.html
Idiomatisches JavaScript (im Folgenden als idiomatisch bezeichnet)
https://github.com/rwldrn/iiomatic.js/
JQuery JavaScript Style Guide (im Folgenden als JQuery bezeichnet)
http://contribute.jquery.org/style-guide/js/
Douglas Crockford ist eine der bekanntesten technischen Behörden im Bereich Webentwicklung und Mitglied des ECMA JavaScript 2.0-Standardisierungskomitees, Douglas Crockford, Douglas Crockfords JavaScript Style Guide (im Folgenden als Crockford bezeichnet).
http://javascript.crockford.com/code.html
Natürlich gibt es auch einige Standardeinstellungen im JavaScript -Syntax -Checker JSlint und JSHINT. Die Frage ist, was ist der ultimative JavaScript -Codierungsstil, dem die meisten Entwickler folgen können? Finden wir einige Konsensstile aus diesen 6 -Style -Führern unten.
1. Vergleich des Codestils
1.1 Eindrückung
Zwei Räume, keine Eindrücke mehr, keine Registerkarteneindrückung: Google, NPM, Node.js, idiomatisch
Registerkarte Eindrückung: jQuery
4 Räume: Crockford
1.2 Räume zwischen Parametern und Ausdrücken
Verwenden Sie kompakte Stile: Google, NPM, Node.js
Kopieren Sie den Code wie folgt: project.myclass = function (arg1, arg2) {
Zu viel Nutzung von Räumen: idiomatisch, jQuery
Kopieren Sie den Code wie folgt: für (i = 0; i <Länge; i ++) {
Keine Kommentare: Crockford
In den meisten Leitfäden werden Entwickler daran erinnert, am Ende einer Erklärung keine Räume zu haben.
1.3 Code -Leitungslänge
Bis zu 80 Zeichen: Google, NPM, Node.js, Crockford (wenn in einem Codeblock andere Einklebungen mit Ausnahme von 2 Leerzeichen ermöglichen, dass die Funktionsparameter mit der Position des ersten Funktionsparameters ausgerichtet werden. Eine andere Option besteht darin, 4 Leerzeichen zu verwenden, um die Leitung anstelle von 2 zu erstellen.)
Keine Kommentare: jQuery, idiomatisch
1.4 Halbkolon
Verwenden Sie immer Semikolons, ohne sich auf implizite Einsätze zu verlassen: Google, Node.js, Crockford
Verwenden Sie nicht erwarten: NPM In einigen Fällen
Keine Kommentare: jQuery, idiomatisch
1.5 Kommentare
Folgen Sie den JSDOC -Konventionen: Google, idiomatisch
Keine Kommentare: NPM, Node.js, JQuery, Crockford
1.6 Zitate
Empfohlene Einzelzitate: Google, Node.js
Doppelzitate: jQuery
Keine Kommentare: NPM, idiomatisch, Crockford
1.7 Variable Deklaration
Erklären Sie jeweils eine, ohne Kommas zu verwenden: node.js
Die Codekopie lautet wie folgt:
var foo = ”;
var bar = ”;
Deklarieren Sie mehrere gleichzeitig und verwenden Sie Kommas, um sich am Ende der Zeile zu trennen: idiomatisch, jQuery
Die Codekopie lautet wie folgt:
var foo = "",
bar = "",
Quux;
Verwenden Sie Komma zu Beginn der Linie: NPM
Keine Kommentare: Google, Crockford
1,8 Zahnspangen
Verwenden Sie die Öffnungsspangen in derselben Zeile: Google, NPM, Node.js, Idiomatic, JQuery, Crockford
Kopieren Sie den Code wie folgt: Funktion ThisIsBlock () {
Der NPM -Handbuch gibt an, dass nur Klammern verwendet werden, wenn der Codeblock die nächste Zeile enthalten muss, andernfalls wird er nicht verwendet.
1.9 Globale Variablen
Verwenden Sie keine globalen Variablen: Google, Crockford (Google sagt, dass Global Variable Benennungskonflikte schwer zu debuggen sind und möglicherweise einige schwierige Probleme haben, wenn zwei Projekte integriert werden. Um den Austausch gemeinsamer JavaScript -Code zu erleichtern, müssen Konventionen zur Vermeidung von Konflikten erfolgen. Crockford ist der Ansicht, dass implizite globale Variablen nicht verwendet werden sollten.)
Keine Kommentare: idiomatisch, JQuery, NPM, Node.js
2 Namenstil
2.1 Variable Benennung
Das erste Wort am Anfang ist Kleinbuchstaben, und der erste Buchstaben aller Wörter danach ist Großbuchstaben: Google, NPM, Node.js, idiomatisch
Die Codekopie lautet wie folgt:
var foo = "";
var fooname = "";
2.2 Konstante Benennung
Verwenden Sie Großbuchstaben: Google, NPM, Node.js
Die Codekopie lautet wie folgt: var Cons = 'Wert';
Keine Kommentare: JQuery, idiomatisch, Crockford
2.3 Funktionsnamen
Das erste Wort am Anfang ist Kleinbuchstaben, und der erste Buchstabe aller Wörter danach ist Großbuchstaben (Kamel): Google, NPM, Idiomatic, Node.js (es wird empfohlen, lange, beschreibende Funktionsnamen zu verwenden)
Die Codekopie lautet wie folgt:
Funktion sehr longoperationName
Funktion Short () ..
Funktionsnamen im Schlüsselwortformular:
Die Codekopie lautet wie folgt:
Funktion isReady ()
Funktion setName ()
Funktion getName ()
Keine Kommentare: JQuery, Crockford
2.4 Array -Namen
Verwenden Sie Pluralform: idiomatisch
Die Codekopie lautet wie folgt: var documents = [];
Keine Kommentare: Google, JQuery, NPM, Node.js, Crockford
2.5 Objekt- und Klassennamen
Verwenden Sie die folgenden Formulare: Google, NPM, Node.js
Die Codekopie lautet wie folgt:
var thisIsObject = neues Datum;
Keine Kommentare: JQuery, idiomatisch, Crockford
2.6 Andere Benennung
Verwenden Sie All-Lower-Hyphen-CSS-Fall für lange Dateinamen und Konfigurationsschlüssel: NPM
3. Konfigurieren Sie die .jshintrc -Datei gemäß dem obigen Stil
JSHINT (http://www.jshint.com/) ist ein JavaScript -Syntax- und Style Checking -Tool, mit dem Sie den Code -Stil zu erinnern können. Es kann gut in viele häufig verwendete Redakteure integriert werden und ist ein großartiges Tool für die Vereinigung von Teamcodierungsstilen.
Sie können die verfügbaren Optionen über die JSHINT -Dokumentation anzeigen: http://www.jshin.com/docs/#options
Im Folgenden wird eine .jshintrc -Datei erstellt, die auf dem ersten Stil in jeder der oben genannten Kategorien basiert. Sie können es in das Root-Verzeichnis des Projekts einfügen, und der JSHINT-AVARE-Code-Editor vereint alle Codestile im Projekt.
Die Codekopie lautet wie folgt:
{
"Kamelbezug": wahr,
"Eindrückung": 2,
"undef": wahr,
"Quotenmark": Single,
"Maxlen": 80,
"Nachfolger": wahr,
"Curly": wahr
}
Zusätzlich sollten Sie Ihrer JavaScript -Datei den folgenden Header hinzufügen:
Die Codekopie lautet wie folgt:
/ * JSHINT BROWER: TRUE, JQUEY: TRUE */
In der Datei node.js sollten Sie hinzufügen:
Die Codekopie lautet wie folgt:
/ *JSHINT NODE: TRUE */
Sie können auch die folgende Anweisung in verschiedenen JavaScript -Dateien hinzufügen:
Die Codekopie lautet wie folgt:
"Strikte";
Dies wirkt sich auf JSHINT und Ihre JavaScript -Engine aus und ist möglicherweise nicht so kompatibel, aber JavaScript wird schneller ausgeführt.
4. Führen Sie JSHINT automatisch aus, bevor Sie Git begehen
Wenn Sie sicherstellen möchten, dass der gesamte JS-Code mit dem in .jshintrc definierten Stil übereinstimmt, können Sie Ihre .Git/Hooks/Pre-Commit-Datei Folgendes hinzufügen, und die Stilprüfung wird automatisch durchgeführt, wenn Sie versuchen, neu modifizierte Dateien an das Projekt einzureichen.
Die Codekopie lautet wie folgt:
#!/bin/bash
# Pre-Commit Git Hook, um JSHINT auf JavaScript-Dateien auszuführen.
#
# Wenn Sie unbedingt ohne Testen verpflichten müssen,
# Verwenden: Git Commit-No-ush-Verify
Dateinamen = ($ (git diff--gepackter-nur name-name-Kopf)))
Welches jStint &> /dev /null
Wenn [$? -ne 0];
Dann
Echo "Fehler: JSHINT NICHT gefunden"
Echo "Installieren mit: sudo npm install -g JSHINT"
Ausgang 1
fi
für i in "$ {Dateinamen [@]}"
Tun
wenn [[$ i = ~ /.js$]];
Dann
echo Jshint $ i
JSHINT $ i
Wenn [$? -ne 0];
Dann
Ausgang 1
fi
fi
Erledigt