Aktueller beliebter JavaScript-Code-Styleguide_Javascript-Tipps

JavaScript verfügt nicht über einen maßgeblichen Leitfaden für Codierungsstile, stattdessen gibt es einige beliebte Codierungsstile:

Code kopieren Der Code 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’ 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/idiomatic.js/
jQuery JavaScript Style Guide (im Folgenden als jQuery bezeichnet)
http://contribute.jquery.org/style-guide/js/
JavaScript Style Guide von Douglas Crockford (im Folgenden als Crockford bezeichnet). Douglas Crockford ist eine der bekanntesten technischen Autoritäten auf dem Gebiet der Webentwicklung und Mitglied des ECMA JavaScript 2.0 Standardization Committee
http://javascript.crockford.com/code.html

Natürlich gibt es auch einige Standardeinstellungsmöglichkeiten in den JavaScript-Syntaxprüfern JSLint und JSHint. Die Frage ist: Was ist der ultimative JavaScript-Codierungsstil, dem die meisten Entwickler folgen können? Lassen Sie uns einige Konsensstile aus diesen 6 Styleguides finden.

1. Vergleich des Codestils

1.1 Einrückung

Zwei Leerzeichen, keine Einrückung mehr, keine Tabulatoreinrückung: Google, NPM, Node.js, Idiomatic
Tab-Einzug: jQuery
4 Plätze: Crockford

1.2 Leerzeichen zwischen Parametern und Ausdrücken

Verwenden Sie kompakte Stile: Google, NPM, Node.js

Code kopieren Der Code lautet wie folgt:

project.MyClass = function(arg1, arg2) {

Übermäßige Verwendung von Leerzeichen: Idiomatisch, jQuery

Code kopieren Der Code lautet wie folgt:

for ( i = 0; i < length; i ) {

Noch keine Kommentare: Crockford
In den meisten Richtlinien werden Entwickler daran erinnert, am Ende von Anweisungen keine Leerzeichen zu verwenden.

1.3 Codezeilenlänge

Bis zu 80 Zeichen: Google, NPM, Node.js, Crockford (Wenn Sie sich innerhalb eines Codeblocks befinden, ermöglicht eine andere Einrückung als 2 Leerzeichen das Ausrichten von Funktionsargumenten an der Position des ersten Funktionsarguments. Eine weitere Option: Verwenden Sie 4 Leerzeichen für die Einrückung, wenn automatisch einwickeln)
Keine Kommentare übrig: jQuery, Idiomatic

1,4 Semikolon

Verwenden Sie immer Semikolons und verlassen Sie sich nicht auf implizite Einfügungen: Google, Node.js, Crockford
Verwenden Sie „expect“ in bestimmten Situationen nicht: NPM
Keine Kommentare übrig: jQuery, Idiomatic

1,5 Notizen

Befolgen Sie die JSDoc-Konventionen: Google, Idiomatic
Keine Kommentare übrig: NPM, Node.js, jQuery, Crockford

1.6 Zitate

Empfohlene einfache Anführungszeichen: Google, Node.js
Doppelte Anführungszeichen: jQuery
Keine Kommentare: NPM, Idiomatic, Crockford

1.7 Variablendeklaration

Deklarieren Sie einzeln, ohne Kommas: Node.js

Code kopieren Der Code lautet wie folgt:

var foo = ”;
var bar = ”;

Deklarieren Sie mehrere auf einmal, getrennt durch Kommas am Ende der Zeile: Idiomatic, jQuery

Code kopieren Der Code lautet wie folgt:

var foo = „“,
bar = „“,
quux;

Verwenden Sie am Zeilenanfang ein Komma: NPM
Keine Kommentare: Google, Crockford

1,8 Zahnspangen

Verwenden Sie öffnende geschweifte Klammern in derselben Zeile: Google, NPM, Node.js, Idiomatic, jQuery, Crockford

Code kopieren Der Code lautet wie folgt:

function thisIsBlock(){

Die NPM-Richtlinien besagen, dass geschweifte Klammern nur verwendet werden sollten, wenn der Codeblock die nächste Zeile enthalten muss, andernfalls nicht.

1.9 Globale Variablen

Verwenden Sie keine globalen Variablen: Google, Crockford (Google sagte, dass Namenskonflikte globaler Variablen schwer zu debuggen seien und bei der Integration der beiden Projekte zu problematischen Problemen führen könnten. Um die gemeinsame Nutzung von gemeinsamem JavaScript-Code zu erleichtern, Es muss eine Konvention erstellt werden, um Konflikte zu vermeiden. Crockford ist der Ansicht, dass implizite globale Variablen nicht verwendet werden sollten)

Keine Kommentare: Idiomatic, jQuery, NPM, Node.js

2 Benennungsstil

2.1 Variablenbenennung

Das erste Wort am Anfang ist kleingeschrieben und der erste Buchstabe aller folgenden Wörter wird großgeschrieben: Google, NPM, Node.js, Idiomatic

Code kopieren Der Code lautet wie folgt:

var foo = „“;
var fooName = „“;

2.2 Konstante Benennung

Verwenden Sie Großbuchstaben: Google, NPM, Node.js

Code kopieren Der Code lautet wie folgt:

var CONS = ‘VALUE’;

Keine Kommentare übrig: jQuery, Idiomatic, Crockford

2.3 Funktionsbenennung

Das erste Wort am Anfang ist klein geschrieben und der erste Buchstabe aller folgenden Wörter wird groß geschrieben (Kamelschrift): Google, NPM, Idiomatic, Node.js (es wird empfohlen, lange, beschreibende Funktionsnamen zu verwenden)

Code kopieren Der Code lautet wie folgt:

Funktion veryLongOperationName
Funktion short()..

Funktionsbenennung in Schlüsselwortform:

Code kopieren Der Code lautet wie folgt:

Funktion isReady()
Funktion setName()
Funktion getName()

Keine Kommentare: jQuery, Crockford

2.4 Array-Benennung

Verwenden Sie die Pluralform: Idiomatisch

Code kopieren Der Code lautet wie folgt:

var document = [];

Keine Kommentare: Google, jQuery, NPM, Node.js, Crockford

2.5 Benennung von Objekten und Klassen

Verwenden Sie die folgenden Formulare: Google, NPM, Node.js

Code kopieren Der Code lautet wie folgt:

var ThisIsObject = neues Datum;

Keine Kommentare übrig: jQuery, Idiomatic, Crockford

2.6 Sonstige Benennung

Verwenden Sie für lange Dateinamen und Konfigurationsschlüssel die CSS-Schreibweise mit nur kleinen Bindestrichen und Konfigurationsschlüsseln: NPM

3. Konfigurieren Sie die .jshintrc-Datei gemäß dem oben genannten Stil

JSHint (http://www.jshint.com/) ist ein JavaScript-Syntax- und Stilprüfungstool, mit dem Sie auf Probleme im Zusammenhang mit dem Codestil aufmerksam gemacht werden können. Es lässt sich gut in viele gängige Editoren integrieren und ist ein großartiges Werkzeug, um den Codierungsstil des Teams zu vereinheitlichen.

Sie können die verfügbaren Optionen über die JSHint-Dokumentation anzeigen: http://www.jshint.com/docs/#options
Erstellen Sie als Nächstes eine .jshintrc-Datei basierend auf dem ersten Stil unter jeder der oben genannten Kategorien. Sie können es im Stammverzeichnis des Projekts ablegen und der JSHint-Avare-Codeeditor folgt ihm, um alle Codestile im Projekt zu vereinheitlichen.

Code kopieren Der Code lautet wie folgt:

{
„camelcase“: wahr,
"Einzug": 2,
„undef“: wahr,
"quotmark": Single,
„maxlen“: 80,
„trailing“: wahr,
„lockig“: wahr
}

Zusätzlich sollten Sie den folgenden Header zu Ihrer JavaScript-Datei hinzufügen:

Code kopieren Der Code lautet wie folgt:

/* jshint browser:true, jquery:true */

In der Node.js-Datei sollten Sie Folgendes hinzufügen:

Code kopieren Der Code lautet wie folgt:

/*jshint node:true */

Sie können auch die folgende Deklaration zu verschiedenen JavaScript-Dateien hinzufügen:

Code kopieren Der Code lautet wie folgt:

'strikt verwenden';

Dies wirkt sich auf JSHint und Ihre JavaScript-Engine aus, die möglicherweise weniger kompatibel sind, JavaScript jedoch schneller ausgeführt wird.

4. Führen Sie JSHint automatisch aus, bevor Sie es an Git übergeben

Wenn Sie sicherstellen möchten, dass der gesamte JS-Code mit dem in .jshintrc definierten Stil konsistent ist, können Sie den folgenden Inhalt zu Ihrer .git/hooks/pre-commit-Datei hinzufügen, wenn Sie versuchen, neue Änderungen zu übernehmen. Die Stilprüfung erfolgt Wird automatisch ausgeführt, wenn Dateien zum Projekt hinzugefügt werden.

Code kopieren Der Code lautet wie folgt:

#!/bin/bash
# Git-Hook vorab festschreiben, um JSHint auf JavaScript-Dateien auszuführen.
#
# Wenn Sie sich unbedingt ohne Tests verpflichten müssen,
# verwenden: git commit --no-verify

filenames=($(git diff --cached --name-only HEAD))

which jshint &> /dev/null
if [ $? -ne 0 ];
dann
echo „Fehler: jshint nicht gefunden“
echo „install with: sudo npm install -g jshint“
Ausgang 1
fi

für i in „${filenames[@]}“
tun
Wenn [[ $i =~ .js$ ]];
Dann
echo jshint $i
         jshint $i
           if [ $? -ne 0 ];
        dann
Ausgang 1
       fi
fi
fertig