Heute veröffentlichen wir eine Übersetzung des nächsten Teils des JavaScript-Handbuchs. Hier sprechen wir über den Codestil und die lexikalische Struktur von Programmen.
→
Teil 1: Erstes Programm, Sprachfunktionen, Standards→
Teil 2: Codestil und Programmstruktur→
Teil 3: Variablen, Datentypen, Ausdrücke, Objekte→
Teil 4: Funktionen→
Teil 5: Arrays und Loops→
Teil 6: Ausnahmen, Semikolons, Platzhalterliterale→
Teil 7: Strict Mode, dieses Schlüsselwort, Ereignisse, Module, mathematische Berechnungen→
Teil 8: Übersicht über die ES6-Funktionen→
Teil 9: Übersicht über die ES7-, ES8- und ES9-Standards
Programmierstil
Ein "Programmierstil" oder "Codierungsstandard" oder "Codestil" ist eine Reihe von Konventionen, die beim Schreiben von Programmen verwendet werden. Sie regeln die Merkmale des Code-Designs und das Verfahren zur Verwendung mehrdeutiger Konstruktionen. In unserem Fall handelt es sich um in JavaScript geschriebene Programme. Wenn ein Programmierer selbst an einem bestimmten Projekt arbeitet, repräsentiert der von ihm verwendete Codestil seinen „Vertrag“ mit sich selbst. Wenn es sich um ein Team handelt, handelt es sich um Vereinbarungen, die von allen Teammitgliedern verwendet werden. Mit bestimmten Regeln geschriebener Code macht die Codebasis eines Softwareprojekts einheitlich, verbessert die Lesbarkeit und Verständlichkeit des Codes.
Es gibt viele Styleguides. Hier sind zwei davon, die in der JavaScript-Welt am häufigsten verwendet werden:
Sie können eine davon auswählen oder Ihre eigenen Regeln aufstellen. Das Wichtigste ist, bei der Arbeit an einem bestimmten Projekt stets dieselben Regeln anzuwenden. Wenn Sie beispielsweise einen Regelsatz einhalten und in einem vorhandenen Projekt, an dem Sie arbeiten müssen, Ihre eigenen Regeln verwendet werden, müssen Sie die Regeln des Projekts einhalten.
Sie können den Code manuell formatieren oder die Automatisierungstools für diesen Prozess verwenden. Tatsächlich ist das Formatieren und Überprüfen des JS-Codes vor dem Start ein separates großes Thema.
Hier ist eine unserer Veröffentlichungen, die sich mit den relevanten Tools und den Merkmalen ihrer Verwendung befasst.
Der in diesem Handbuch verwendete Stil
Der Autor dieses Materials zitiert als Beispiel für seinen eigenen Styleguide eine Reihe von Regeln, die er beim Schreiben des Codes zu befolgen versucht. Er sagt, dass sich der Code in den Beispielen auf die neueste Version des Standards konzentriert, die in modernen Versionen von Browsern verfügbar ist. Dies bedeutet, dass Sie einen Transpiler wie
Babel verwenden müssen, um solchen Code in älteren Browsern auszuführen. Mit JS-Transpilern können Sie Code konvertieren, der mit den neuen Funktionen der Sprache geschrieben wurde, sodass er in Browsern ausgeführt werden kann, die diese neuen Funktionen nicht unterstützen. Der Transpiler kann Sprachfunktionen unterstützen, die noch nicht Standard sind, dh selbst in den modernsten Browsern nicht implementiert sind.
Hier ist eine Liste der fraglichen Regeln.
- Ausrichtung. Zum Ausrichten von Codeblöcken werden Leerzeichen verwendet (2 Leerzeichen pro 1 Ausrichtungsebene), Tabulatoren werden nicht verwendet.
- Semikolon. Ein Semikolon wird nicht verwendet.
- Zeilenlänge 80 Zeichen (wenn möglich).
- Einzeilige Kommentare. Solche Kommentare werden im Code verwendet.
- Mehrzeilige Kommentare. Diese Kommentare werden verwendet, um Code zu dokumentieren.
- Nicht verwendeter Code. Nicht verwendeter Code verbleibt nicht im auskommentierten Programm, falls Sie ihn später benötigen. Solcher Code kann, falls er noch benötigt wird, im Versionskontrollsystem gefunden werden, wenn er verwendet wird, oder in Notizen eines Programmierers, der diesen Code speichern soll.
- Regeln kommentieren. Sie müssen keine offensichtlichen Dinge kommentieren, sondern dem Code Kommentare hinzufügen, die nicht zum Verständnis seiner Essenz beitragen. Wenn sich der Code dank ausgewählter Funktions- und Variablennamen und JSDoc-Funktionsbeschreibungen von selbst erklärt, sollten Sie diesem Code keine zusätzlichen Kommentare hinzufügen.
- Variablendeklaration. Variablen werden immer explizit deklariert, um die Verschmutzung eines globalen Objekts zu verhindern. Das Schlüsselwort
var wird nicht verwendet. Wenn nicht geplant ist, den Wert einer Variablen während der Programmausführung zu ändern, wird sie in Form einer Konstante deklariert (ähnliche Konstanten werden häufig auch als „Variablen“ bezeichnet), wobei standardmäßig das Schlüsselwort const verwendet wird - außer in Fällen, in denen geplant ist, den Wert einer Variablen zu ändern. In solchen Fällen wird das Schlüsselwort let verwendet. - Konstanten Wenn einige Werte im Programm Konstanten sind, bestehen ihre Namen aus Großbuchstaben. Zum Beispiel
CAPS . Ein Unterstrich ( _ ) wird verwendet, um Teile von Namen zu trennen, die aus mehreren Wörtern bestehen. - Funktionen Funktionsdeklarationen verwenden die Pfeilsyntax. Regelmäßige Funktionserklärungen gelten nur in besonderen Fällen. Insbesondere bei Methoden von Objekten oder bei Designern. Dies erfolgt aufgrund der Funktionen
this . Funktionen müssen mit dem Schlüsselwort const deklariert werden, und wenn möglich, müssen die Ergebnisse ihrer Arbeit explizit von ihnen zurückgegeben werden. Die Verwendung verschachtelter Funktionen ist nicht verboten, um einige Hilfsmechanismen vor dem Hauptcode zu verbergen.
Hier ist ein Beispiel für ein Paar einfacher Pfeilfunktionen:
const test = (a, b) => a + b const another = a => a + 2
- Entitäten benennen. Namen von Funktionen, Variablen und Methoden von Objekten beginnen immer mit einem Kleinbuchstaben. Namen, die aus mehreren Wörtern bestehen, werden im
camelCase geschrieben (Namen wie camelCase ). Nur die Namen der Konstruktorfunktionen und -klassen beginnen mit einem Großbuchstaben. Wenn Sie ein Framework verwenden, das spezielle Anforderungen für die Benennung von Entitäten stellt, verwenden Sie die darin festgelegten Regeln. Dateinamen müssen aus Kleinbuchstaben bestehen, separate Wörter in den Namen werden durch Bindestriche ( - ) getrennt. - Regeln zum Erstellen und Formatieren von Ausdrücken.
wenn . Hier sind einige Möglichkeiten, eine bedingte
if zu schreiben:
if (condition) { statements } if (condition) { statements } else { statements } if (condition) { statements } else if (condition) { statements } else { statements }
für . Zum Organisieren von Schleifen wird entweder der Standard
for Konstrukt verwendet, von dem unten ein Beispiel angegeben ist, oder die
for of Schleife.
for in .hasOwnProperty() sollten vermieden werden - es sei denn, sie werden mit dem Konstrukt
.hasOwnProperty() verwendet. Hier ist ein for-Schleifendiagramm:
for (initialization; condition; update) { statements }
während . Hier ist ein schematisches Beispiel einer
while :
while (condition) { statements }
tun . Hier ist die Struktur der
do Schleife:
do { statements } while (condition);
Schalter . Das Folgende ist ein Diagramm der
switch bedingten
switch :
switch (expression) { case expression: statements default: statements }
versuche es . Hier sind einige Entwurfsoptionen für das
try-catch Konstrukt. Das erste Beispiel zeigt diese Konstruktion ohne einen
finally Block, das zweite mit einem solchen Block.
try { statements } catch (variable) { statements } try { statements } catch (variable) { statements } finally { statements }
- Räume . Leerzeichen sollten mit Bedacht verwendet werden, damit sie zu einer verbesserten Lesbarkeit des Codes beitragen. Leerzeichen werden also nach Schlüsselwörtern gefolgt von einer öffnenden Klammer platziert. Sie sind von Operatoren umgeben, die für zwei Operanden gelten (
+ , - , / , * , && und andere). Leerzeichen werden innerhalb der for Schleife nach jedem Semikolon verwendet, um Teile des Schleifen-Headers voneinander zu trennen. Nach dem Komma steht ein Leerzeichen. - Leere Zeilen . Leere Zeilen markieren Codeblöcke, die Operationen enthalten, die logisch miteinander verbunden sind.
- Anführungszeichen . Bei der Arbeit mit Zeichenfolgen werden einfache Anführungszeichen (
' ) und keine doppelten Anführungszeichen ( " ) verwendet. Doppelte Anführungszeichen werden normalerweise in HTML-Attributen verwendet. Die Verwendung von einfachen Anführungszeichen hilft daher, Probleme bei der Arbeit mit HTML-Zeichenfolgen zu vermeiden. Wenn Sie einige Operationen mit Zeichenfolgen ausführen müssen, bedeutet dies Beispielsweise sollten für ihre Verkettung Vorlagenliterale verwendet werden, die mit Backticks ( ` ) gezeichnet werden.
Die lexikalische Struktur von JavaScript-Code
Lassen Sie uns über die Bausteine des JavaScript-Codes sprechen. Insbesondere über die Verwendung der Unicode-Codierung, über Semikolons, Leerzeichen, über die Empfindlichkeit der Sprache gegenüber Groß- und Kleinschreibung von Zeichen, über Kommentare, über Literale, über Bezeichner und über reservierte Wörter.
▍Unicode
JavaScript-Code wird mithilfe der Unicode-Codierung dargestellt. Dies bedeutet insbesondere, dass Sie im Code beispielsweise Emoticon-Zeichen als Variablennamen verwenden können. Dies wird natürlich nicht empfohlen. Hierbei ist es wichtig, dass die Namen von Bezeichnern, die bestimmten
Regeln unterliegen, in einer beliebigen Sprache geschrieben werden können, beispielsweise in Japanisch oder Chinesisch.
▍ Semikolon
Die JavaScript-Syntax ähnelt der C-Syntax. Sie finden viele Projekte, in denen am Ende jeder Zeile ein Semikolon steht. Semikolons am Zeilenende in JavaScript sind jedoch optional. In den allermeisten Fällen können Sie auf ein Semikolon verzichten. Entwickler, die vor JS Sprachen verwendet haben, in denen kein Semikolon angewendet wird, meiden diese in JavaScript.
Wenn Sie beim Schreiben von Code keine seltsamen Konstruktionen verwenden oder die Zeile nicht mit einer Klammer oder eckigen Klammer beginnen, machen Sie in 99,9% der Fälle keinen Fehler (wenn überhaupt, kann der Linter Sie vor einem möglichen Fehler warnen). Zum Beispiel können wir "seltsamen Designs" Folgendes zuschreiben:
return variable
Ob ein Semikolon verwendet wird oder nicht, ist für jeden Programmierer eine persönliche Angelegenheit. Der Autor dieses Handbuchs sagt beispielsweise, dass er beschlossen hat, keine Semikolons zu verwenden, wenn sie nicht benötigt werden. Daher sind sie in den hier angegebenen Beispielen äußerst selten.
▍ Lücken
JavaScript achtet nicht auf Leerzeichen. In bestimmten Situationen führt das Fehlen eines Leerzeichens natürlich zu einem Fehler (sowie zu einem unangemessenen Leerzeichen, wo es nicht sein sollte), aber sehr oft gibt es keinen Unterschied zwischen dem Fehlen eines Leerzeichens in einem bestimmten Teil des Programms und dem Vorhandensein eines oder mehrerer Leerzeichen. Eine ähnliche Aussage gilt nicht nur für Leerzeichen, sondern auch für Zeilenvorschübe und Tabulatoren. Dies macht sich beispielsweise bei einem minimierten Code besonders bemerkbar. Sehen Sie sich zum Beispiel an, in welchen Code der
Closure Compiler verarbeitet wird.
Im Allgemeinen sollte beachtet werden, dass es beim Formatieren des Programmcodes besser ist, nicht bis zum Äußersten zu gehen und bestimmte Regeln einzuhalten.
▍ Groß- / Kleinschreibung beachten
JavaScript unterscheidet zwischen Groß- und Kleinschreibung. Dies bedeutet, dass beispielsweise die Namen der Variablen
something und
Something . Gleiches gilt für alle Bezeichner.
▍ Kommentare
Sie können zwei Arten von Kommentaren in JavaScript verwenden. Der erste Typ sind einzeilige Kommentare:
//
Sie befinden sich, wie der Name schon sagt, in einer Zeile. Alles, was auf die
// Zeichen folgt, wird als Kommentar betrachtet.
Der zweite Typ sind mehrzeilige Kommentare:
/* */
Hier ist der Kommentar alles, was zwischen der Kombination der Zeichen
/* und
*/ .
▍ Literale und Bezeichner
Ein Literal ist ein bestimmter Wert, der im Quellcode eines Programms geschrieben ist. Dies kann beispielsweise eine Zeichenfolge, eine Zahl, ein logischer Wert oder eine komplexere Struktur sein - ein Objektliteral (mit dem Sie Objekte erstellen können, die mit geschweiften Klammern formatiert sind) oder ein Array-Literal (mit dem Sie Arrays erstellen können, die mit eckigen Klammern formatiert sind). Hier einige Beispiele:
5 'Test' true ['a', 'b'] {color: 'red', shape: 'Rectangle'}
Es wird keinen besonderen Vorteil bringen, ein Programm zu starten, in dem solche Konstruktionen auftreten. Um mit Literalen in Programmen arbeiten zu können, werden sie zunächst Variablen zugewiesen oder an Funktionen übergeben.
Ein Bezeichner ist eine Folge von Zeichen, mit denen eine Variable, eine Funktion oder ein Objekt identifiziert werden kann. Es kann mit einem Buchstaben, einem Dollarzeichen (
$ ) oder einem Unterstrich (
_ ) beginnen, Zahlen und gegebenenfalls Unicode-Zeichen wie Emoticons enthalten (obwohl es, wie bereits erwähnt, besser ist, dies nicht zu tun). Hier einige Beispiele für Bezeichner:
Test test TEST _test Test1 $test
Das Dollarzeichen wird häufig beim Erstellen von Bezeichnern verwendet, in denen Verweise auf DOM-Elemente gespeichert sind.
▍ Reservierte Wörter
Das Folgende ist eine Liste von Wörtern, die von der Sprache reserviert werden. Sie können sie nicht als Bezeichner verwenden.
breakdoinstanceoftypeofcaseelsenewvarcatchfinallyreturnvoidcontinueforswitchwhiledebuggerfunctionthiswithdefaultifthrowdeleteintryclassenumextendssuperconstexportimportimplementsletprivatepublicinterfacepackageprotectedstaticyield
Zusammenfassung
Heute haben wir den Stil und die Struktur von Programmen besprochen, die in JavaScript geschrieben wurden. Das nächste Mal werden wir über Variablen, Datentypen, Ausdrücke und Objekte sprechen.
Liebe Leser! Welchen JavaScript-Styleguide verwenden Sie?