Detaillierte Erläuterung der JS ES6-Codierungsstandards

1. Umfang des Blocks

1.1. let ersetzt var

ES6 führt zwei neue Befehle zum Deklarieren von Variablen ein: let und const. Unter diesen kann let var vollständig ersetzen, da beide die gleiche Semantik haben und let keine Nebenwirkungen hat.

Der Befehl var verfügt über die Funktion der Variablenförderung, let verfügt jedoch nicht über diesen Befehl.

Die sogenannte Variablenförderung bedeutet, dass die Variable zuerst verwendet und dann deklariert werden kann. Offensichtlich ist dieser Codierungsstandard nicht zum Lesen geeignet.

1.2. Globale Konstanten und Thread-Sicherheit

Bevorzugen Sie zwischen let und const const.

let sollte im Single-Thread-Modulcode erscheinen, während const sehr gut für Multi-Thread-Code geeignet ist.

 //schlecht
    var a = 1, b = 2, c = 3;

    //Gut
    Konstante a = 1;
    Konstante b = 2;
    Konstante c = 3;

    // am besten
    Konstante[a, b, c] = [1, 2, 3];

2. Saiten

Statische Zeichenfolgen sollten immer einfache Anführungszeichen oder Backquotes verwenden. Doppelte Anführungszeichen werden nicht empfohlen.

Dynamische Zeichenfolgen (Zeichenfolgenvorlagen) verwenden Backticks.

//schlecht
const a = "zhaoyi";
const b = a + ", hallo.";

//wenig gut
const c = `zhaoyi`;

//sehr gut
const a = "zhaoyi";
const b = `zhaoyi,${a}, ich sage deinen Namen zweimal`;

3. Destrukturierungsauftrag

1. Wenn Sie Array-Mitglieder verwenden, um Variablen Werte zuzuweisen, ist die destrukturierende Zuweisung vorzuziehen.

const arr = ['Ich', 'Liebe', 'Dich'];

//schlecht
const eins = arr[0];
const zwei = arr[1];
const drei = arr[2];

//Gut
const [erster, zweiter, dritter] = arr;

//prüfen
console.log(erster, zweiter, dritter); // Ich liebe dich

2. Wenn der Funktionsparameter ein Mitglied eines Objekts ist, wird die Dekonstruktionszuweisung bevorzugt.

//schlecht
Funktion getUserInfo(Benutzer){
    const name = Benutzer.name;
    const Alter = Benutzer.Alter;
}

//Gut
Funktion getUserInfo2(Benutzer){
    const {name, alter} = Benutzer;
    console.log(Name, Alter); // 
}

//prüfen
getUserInfo2({name: 'zhaoyi', Alter: 20}); // zhaoyi 20

3. Wenn eine Funktion mehrere Werte zurückgibt, ist die Zuweisung einer Objektstruktur der Zuweisung einer Arraystruktur vorzuziehen. Dies erleichtert das spätere Hinzufügen von Rückgabewerten und das Ändern der Reihenfolge von Rückgabewerten.

//schlecht
Funktion getInfo(Eingabe){
    zurück [links, rechts];
}

//Gut
Funktion getInfo2(Eingabe){
    zurück {links, rechts};
}

// Hier verwenden wir die Zuweisungsmethode zur Objektdekonstruktion, um das Rückgabeergebnis zu erhalten const {left, right} = getInfo2('test');

4. Gegenstand

1. Bei einem einzeilig definierten Objekt endet das letzte Element nicht mit einem Komma. Bei mehrzeiligen Objekten endet das letzte Element mit einem Komma.

//schlecht
const a1 = {k1: v1, k2: v2, k3: v3,};

//Gut 
const a2 = {k1: v1, k2: v2, k3: v3};

//schlecht
Konstante b1 = {
    k1: v1,
    k2: v2
};

//Gut
const b2 = {
    k1: v1,
    k2: v2,
};

2. Objekte sollten so statisch wie möglich sein. Einmal definiert, sollten nicht nach Belieben neue Eigenschaften hinzugefügt werden. Wenn das Hinzufügen von Eigenschaften unvermeidlich ist, verwenden Sie die Zuweisungsmethode.

//schlecht
konstant a = {};
a.attr = 3;

// wenn eine Umformung vermeidbar ist
const b = {};
Objekt.assign(b, {atrr: 3});

//Gut
const c = {attr: null};
c.attr = 3;

//prüfen
console.log(a); //{attr: 3}
console.log(b); //{attr: 3}
console.log(c); //{attr: 3}

3. Wenn der Attributname des Objekts dynamisch ist (dynamisch bedeutet, dass er durch Berechnung ermittelt werden muss), können Sie beim Erstellen des Objekts die Attributausdrucksdefinition verwenden. (Diese Situation kommt während der Entwicklung selten vor.)

5. Arrays

Verwenden Sie den Spread-Operator (...), um ein Array zu kopieren.

//schlecht
Funktion kopiereArr1(arr){
    const itemCopy = [];
    für (let index = 0; index < arr.length; index++) {
        Elementkopie[index] = arr[index];
    }
    Artikelkopie zurückgeben;
}

//Gut
Funktion kopiereArr2(arr){
    Rückkehr [...arr];
}

//prüfen
const arr = ['z', 'y', 'z'];
console.log(copyArr1(arr)); // ["z", "y", "z"]
console.log(copyArr2(arr)); // ["z", "y", "z"]

Verwenden Sie die Methode Array.from, um ein arrayähnliches Objekt in ein Array zu konvertieren.

const obj = { "0": "a", "1": "b", Länge: 2};
const arr = Array.from(obj);

//prüfen
console.log(arr); // ["a", "b"]

6. Funktionen

1. Sofort ausführbare Funktionen können in Form von Pfeilfunktionen geschrieben werden.

(() => {
    console.log('das ist eine gute Nacht.');
})();

2. Wenn ein Funktionsausdruck benötigt wird, versuchen Sie stattdessen eine Pfeilfunktion zu verwenden. Denn so kann man es prägnanter und verbindlicher gestalten.

//schlecht
const sagHallo = ['a', 'b', 'c'].map(function (w){
    returniere 'Hallo, ' + w;
})

//Gut 
const sayHello2 = ['a', 'b', 'c'].map(w => {
    returniere 'Hallo, ' + w;
});

//prüfen
console.log(sayHello2); // ["Hallo, a", "Hallo, b", "Hallo, c"]

3. Pfeilfunktionen ersetzen Function.prototype.bind. Sie sollten nicht mehr self/_this/that verwenden, um dies zu binden.

//schlecht
const selbst = dies;
const boundMethod = Funktion(...params){
    Rückgabemethode.Anwenden (selbst, Parameter);
}

// akzeptabel
const boundMethod2 = method.binden(diese);

// am besten
const boundMehod3 = (...params) => method.anwenden(diese, params);

4. Für einzeilige einfache Funktionen, die nicht wiederverwendet werden müssen, wird die Verwendung von Pfeilfunktionen empfohlen. Wenn der Funktionskörper komplexer ist und mehr Zeilen umfasst, sollte die traditionelle Methode zum Schreiben von Funktionen verwendet werden.

5. Alle Konfigurationselemente sollten in einem Objekt konzentriert und im letzten Parameter platziert werden. Boolesche Werte können nicht direkt als Parameter verwendet werden.

//schlecht
Funktion Dividiere(a, b, Option = false){

}

//Gut
Funktion Dividiere(a, b, {Option = false} = {}){

}

6. Verwenden Sie die Argumentvariable nicht im Funktionskörper, sondern stattdessen den Restoperator (...). Weil der Restoperator die gewünschten Parameter explizit deklarieren kann und die Argumente arrayähnliche Objekte sind, während die Restelementerfassung ein echtes Array bereitstellen kann.

//schlecht
Funktion f1(){
    const args = Array.prototype.slice.call(arguments);
    gibt args.join('-') zurück;
}

//Gut
Funktion f2(...args){
    gibt args.join('-') zurück;
}

//prüfen
console.log(f1(1, 2, 3)); // 1-2-3
console.log(f2(1, 2, 3)); // 1-2-3

Der Spread-Operator wird durch drei Punkte dargestellt und seine Funktion besteht darin, ein Array oder ein arrayähnliches Objekt in eine durch Kommas getrennte Reihe von Werten zu erweitern. Der Rest-Operator besteht ebenfalls aus drei Punkten, seine Funktion ist jedoch genau das Gegenteil des Spread-Operators, nämlich eine durch Kommas getrennte Folge von Werten zu einem Array zu kombinieren. Ausruhen heißt Bleiben.

7. Verwenden Sie die Standardwertsyntax, um Standardwerte für Funktionsparameter festzulegen.

//schlecht
Funktion handleThings(opts){
    Optionen = Optionen || {};
    // ...
}

//Gut
Funktion handleThings2(opts = {}){
    // ...
}

7. Kartenstruktur

Map und Object vermitteln den Leuten das Gefühl, dass es sich um denselben Datentyp handelt, aber in der tatsächlichen Semantik müssen sie genauer unterschieden werden. Die Prinzipien lauten wie folgt:

• Verwenden Sie beim Simulieren von Entitätsobjekten Object;
• Wenn Sie nur eine kv-Schlüssel-Wert-Paar-Datenstruktur benötigen, verwenden Sie Map;

Map verfügt über einen integrierten Durchquerungsmechanismus (implementiert die Iteratorstruktur)

// Map hat viele Initialisierungsmethoden. Hier wird ein Array mit zwei Längen zur Initialisierung verwendet (das erste Element ist K und das zweite Element ist V).
let map = neue Map([['k1', 'Ich'], ['k2', 'Liebe'], ['k3', 'Dein']]);

//K durchqueren
für (const key of map.keys()) {
    console.log(Schlüssel);
    // k1
    // k2
    // k3
}

// Durchqueren V
für (const-Wert von map.values()) {
    konsole.log(Wert);
    // ICH
    //Liebe
    // Du
}

// KV durchqueren
für (const item of map.entries()) {
    konsole.log(Element);
    // ['k1', 'Ich']
    // ['k2', 'Liebe']
    // ['k3', 'dein']
}

8. Klasse

1. Verwenden Sie immer Klassen anstelle von Operationen, die einen Prototyp erfordern. Weil Class prägnanter geschrieben und leichter verständlich ist. Freunde, die mehr mit Java und C# in Berührung gekommen sind, bevorzugen wahrscheinlich diese Art der Klassensyntax.

//schlecht
Funktion Warteschlange1(Inhalt = []){
    this._queue = [...Inhalt];
}
Queue1.prototype.pop = Funktion(){
    konstanter Wert = this._queue[0];
    diese._queue.splice(0, 1);
    Rückgabewert;
}

//Gut
Klasse Warteschlange {
    Konstruktor(Inhalt = []){
        // Warum nicht this._queue = content; hier verwenden?
        // Freunde, die effektives Java gelesen haben, müssen eine Regel kennen:
        // Das heißt, wenn beim Entwerfen eines Konstruktors die übergebenen Parameter variable Typen (Objekte, Arrays) haben,
        // Der Konstruktor sollte beim Empfang dieses Parameters eine Kopie dieses Objekts verwenden.
        // Dadurch wird verhindert, dass Änderungen an externen Parameterobjekten die Instanz der Klasse selbst beeinflussen.
        // Daher müssen die Inhalte hier kopiert und zugewiesen werden.
        this._queue = [...Inhalt];
    }
    pop() {
        konstanter Wert = this._queue[0];
        diese._queue.splice(0, 1);
        Rückgabewert;
    }
}

//prüfen
q = neue Warteschlange([1, 2, 3]);

konsole.log(q.pop()); // 1
konsole.log(q.pop()); // 2
konsole.log(q.pop()); // 3
console.log(q.pop()); // undefiniert

2. Verwenden Sie Extends, um Vererbung zu implementieren, da dies einfacher ist und keine Gefahr besteht, die Instanceof-Operation zu zerstören.

// Queue ist die Klasse aus dem vorherigen Beispiel class PeekQueue extends Queue{
    // ...
}

9. Module

1. Die Modulsyntax ist die Standardmethode zum Schreiben von JS-Modulen und Sie sollten sich daran halten. Verwenden Sie „import“ statt „require“.

//schlecht
const ma = erfordern('ModulA');
const f1 = ma.f1;
const f2 = ma.f2;

//Gut
importiere {f1, f2} aus „Modul A“;

2. Verwenden Sie export anstelle von module.export

//schlecht
module.exports = IrgendeinObjekt;

//Gut
exportiere standardmäßig SomeObj;

3. Wenn das Modul nur einen Ausgabewert hat, verwenden Sie export default; wenn es Chrome gibt, verwenden Sie export default nicht. Verwenden Sie export default und normalen Export nicht gleichzeitig, obwohl die Regeln diese Art des Schreibens von Code zulassen.

4. Verwenden Sie in Modulen keine Platzhalter, da dadurch sichergestellt wird, dass im Modul ein Standardexport vorhanden ist: „export default“.

//schlecht
importiere * als meinObjekt './someModule';

//Gut
importiere meinObjekt aus „./someModule“;

5. Wenn das Modul standardmäßig eine Funktion ausgibt, sollte der erste Buchstabe der Funktion klein geschrieben sein.

 Funktion irgendeineFunktion(){
     // ...
 }
 exportiere standardmäßig eine Funktion;

6. Wenn das Modul standardmäßig ein Objekt ausgibt, sollte der erste Buchstabe des Objektnamens groß geschrieben werden.

const irgendeinObj = {
    // ...
}
exportiere standardmäßig SomeObj;

10. ESLint

Die vielen oben genannten Regeln sind eigentlich nur die Spitze des Eisbergs der Regelvorlagen. Wenn wir wirklich Code mit schönem Format und im Einklang mit den Standards der Mainstream-Hersteller schreiben möchten, reicht es nicht aus, sich ausschließlich auf unser eigenes Bewusstsein zu verlassen.

Gibt es Software, die die Standards beim Schreiben von Code ähnlich wie Softwarekompilierungstools überprüfen kann, um die Korrektheit des Codes zu prüfen? Die Antwort ist ja.

ESLint ist ein solches Prüftool. Damit kann sichergestellt werden, dass grammatikalisch korrekter und stilistisch konsistenter Code geschrieben wird.

Nachfolgend finden Sie ein Tutorial zur Installation von ESLink (stellen Sie sicher, dass in Ihrer Umgebung npm installiert ist). Wenn Sie ein Projekt verwenden, das von einem Gerüstwerkzeug (wie @vue-cli) generiert wurde, bieten alle diese Projekte natürlich ein optionales eslint-Plugin. Die aktuelle Version ist: v6.6.0. Diese Version von eslint bietet eine einfachere Konfigurationsmethode. Informationen zur Konfiguration finden Sie unter https://eslint.bootcss.com/docs/user-guide/getting-started/. Nachfolgend finden Sie einen groben Konfigurationsschritt

1. Erforderliche Plugins installieren

$ npm installiere eslint -g

2. Generieren Sie die Datei package.json

$ npm init

Diese Methode generiert eine package.json-Datei im aktuellen Verzeichnis, die einer Umgebungsbeschreibungsdatei ähnelt.

3. Generieren Sie eine eslint-Konfigurationsdatei

$ eslint --init

Der Befehl fragt Sie, welche Art von Konfiguration verwendet werden soll (Auswahl mit den Auf- und Ab-Pfeilen).

• Es wird empfohlen, den Typ JSON oder JavaScript zu verwenden. Ich verwende hier eine Konfigurationsdatei vom Typ JavaScript.
• Der Styleguide verwendet Airbnb.

Sie können je nach Bedarf weitere Optionen auswählen. Nach Abschluss der Auswahl werden die erforderlichen Abhängigkeitspakete automatisch heruntergeladen.

Der Inhalt der generierten Konfigurationsdatei ist wie folgt:

modul.exporte = {
  Umgebung: {
    Browser: wahr,
    es6: wahr,
  },
  erweitert: [
    'airbnb-basis',
  ],
  Globale:
    Atomics: "schreibgeschützt",
    SharedArrayBuffer: "schreibgeschützt",
  },
  Parseroptionen: {
    ecmaVersion: 2018,
    Quelltyp: "Modul",
  },
  Regeln:
  },
};

Wir können die Validierungsregeln in dieser Konfigurationsdatei ändern. Konkrete Informationen finden Sie unter dem oben angegebenen Link.

4. Erstellen Sie eine js-Datei im aktuellen Verzeichnis

// index.js
var unbenutzt = ,Grimgar von Fantasy und Ash‘;

Funktion hallo(){
    var message = "Hallo, Zhaoyi!";
    Alarm(Nachricht);
}
  
Hallo();

5. Überprüfen Sie die Richtigkeit des Codeschreibens mit eslint

$ eslint index.js

1:12 Fehler: Zeilenumbrüche sollten „LF“ sein, aber es wurde ein Zeilenumbruch im „CRLF“-Stil gefunden.

2:1 Fehler Unerwartete Variable, verwenden Sie let oder const statt no-var

2:5 Fehler 'unused' wird ein Wert zugewiesen, aber nie verwendet no-unused-vars

2:27 Fehler: Zeilenumbrüche sollten „LF“ sein, aber es wurde ein Zeilenumbruch im „CRLF“-Stil gefunden.

3:1 Fehler. Zeilenumbrüche sollten „LF“ sein, aber es wurde ein Zeilenumbruch im „CRLF“-Stil gefunden.

4:17 Fehler Fehlendes Leerzeichen vor öffnender Klammer Leerzeichen vor Blöcken

4:18 Fehler: Zeilenumbrüche sollten „LF“ sein, aber es wurde ein Zeilenumbruch im „CRLF“-Stil gefunden.

5:1 Fehler Erwartete Einrückung von 2 Leerzeichen, aber gefunden 4 Einrückungen

5:5 Fehler Unerwartete Variable, verwenden Sie let oder const statt no-var

5:19 Fehler Zeichenfolgen müssen einfache Anführungszeichen verwenden

5:36 Fehler: Zeilenumbrüche sollten „LF“ sein, aber es wurde ein Zeilenumbruch im „CRLF“-Stil gefunden.

6:1 Fehler Erwartete Einrückung von 2 Leerzeichen, aber gefunden 4 Einrückungen

6:5 Warnung Unerwarteter Alarm Kein Alarm

6:20 Fehler: Zeilenumbrüche sollten „LF“ sein, aber es wurde ein Zeilenumbruch im „CRLF“-Stil gefunden.

7:2 Fehler: Zeilenumbrüche sollten „LF“ sein, aber es wurde ein Zeilenumbruch im „CRLF“-Stil gefunden.

8:1 Fehler Leerzeichen am Ende nicht erlaubt no-trailing-spaces

8:3 Fehler: Zeilenumbrüche sollten „LF“ sein, aber es wurde ein Zeilenumbruch im „CRLF“-Stil gefunden.

9:9 Fehler Leerzeichen am Ende nicht erlaubt no-trailing-spaces

9:10 Fehler Neue Zeile am Ende der Datei erforderlich, aber nicht gefunden eol-last

Unter diesen ist ein Fehler tatsächlich auf das Problem der Konvertierung des Git-Dateiformats zurückzuführen:

... im Zeilenumbruch-Stil

Wir können diese Prüfung in der Konfigurationsdatei entfernen: Fügen Sie unter Regeln 'linebreak-style': [0, 'error', 'windows'] hinzu.

Regeln:
    'Zeilenumbruch-Stil': [0, 'Fehler', 'Windows']
  }

Führen Sie den Erkennungsbefehl weiter aus. Die folgende Ausgabe wird angezeigt:

2:1 Fehler Unerwartete Variable, verwenden Sie let oder const statt no-var

2:5 Fehler 'unused' wird ein Wert zugewiesen, aber nie verwendet no-unused-vars

5:1 Fehler Erwartete Einrückung von 2 Leerzeichen, aber gefunden 4 Einrückungen

5:5 Fehler Unerwartete Variable, verwenden Sie let oder const statt no-var

5:19 Fehler Zeichenfolgen müssen einfache Anführungszeichen verwenden

6:1 Fehler Erwartete Einrückung von 2 Leerzeichen, aber gefunden 4 Einrückungen

6:5 Warnung Unerwarteter Alarm Kein Alarm

8:1 Fehler Leerzeichen am Ende nicht erlaubt no-trailing-spaces

9:9 Fehler Leerzeichen am Ende nicht erlaubt no-trailing-spaces

Wie Sie sehen, wird für viele unserer unregelmäßigen Einsätze eine Verwarnung ausgesprochen. Verwenden Sie beispielsweise nicht vier Leerzeichen für Einrückungen (tatsächlich ist dies in unseren Compiler integriert und wir sind daran gewöhnt), fügen Sie keine zusätzlichen Leerzeichen hinzu, löschen Sie nicht verwendete deklarierte Variablen, empfehlen Sie nicht, den Typ „var“ zu verwenden usw.

Wenn Du es für sinnvoll hältst, dann halte Dich daran; wenn Du das Gefühl hast, dass die Einrückung nicht Deinen Gewohnheiten entspricht, kannst Du diese auch über die Konfigurationsdatei schließen/ändern, um den gewünschten Effekt zu erzielen.

Oben finden Sie eine ausführliche Erläuterung der JS ES6-Kodierungsstandards. Weitere Informationen zu den JS ES6-Kodierungsstandards finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!