javascript

Airbnb JavaScript Style Guide() *Ein meist vernünftiger Ansatz für JavaScript * > **Hinweis: Dieses Handbuch geht davon aus, dass Sie Babel verwenden, und erfordert, dass Sie babel-preset-airbnb oder das Äquivalent verwenden. Es wird auch davon ausgegangen, dass sie shims/polyfills in ihrer app installieren, mit airbnb-browser-shims oder dem Äquivalent. Dieser Leitfaden ist auch in anderen Sprachen verfügbar. Siehe Übersetzung Sonstige Style Guides - ES5 (veraltet) - Reagieren CSS-in-JavaScript CSS & Sass - Ruby Inhaltsverzeichnis 1. Arten 1. Referenzen 1. Gegenstände 1. Reihen 1. Umstrukturierung 1. Strings 1. Funktionen 1. Pfeilfunktionen 1. Klassen und Konstrukteure 1. Module 1. Iteratoren und Generatoren 1. Eigenschaften 1. Variablen 1. Anheben 1. Vergleich zwischen Betreibern und Gleichstellung 1. Blöcke 1. Kontrollerklärungen 1. Bemerkungen 1. Whitespace 1. Kommas 1. Semikolone 1. Type Casting & Coercion 1. Benennungsübereinkommen 1. Zubehör 1. Veranstaltungen 1. jQuery 1. ECMAScript 5 Kompatibilität 1. ECMAScript 6+ (ES 2015+) Stile 1. Standardbibliothek 1. Prüfung 1. Leistung 1. Mittel 1. In der Wildnis 1. Übersetzung 1. Der JavaScript Style Guide Guide 1. Chat mit uns über JavaScript 1. Mitwirkende 1. Lizenz 1. Änderungen Arten <a name="types--primitives"></a><a name="1.1"></a> - 1.1 **Primitiven**: Wenn Sie auf einen primitiven Typ zugreifen, arbeiten Sie direkt an seinem Wert. - "String" - "Zahl" - "Boolean" - 'null' - "undefiniert" - "Symbol" - "Bigint" <br /> Symbole und BigInts können nicht treu polyfilled werden, daher sollten sie nicht verwendet werden, wenn Sie Browser/Umgebungen anvisieren, die sie nativ nicht unterstützen. <a name="types--complex"></a><a name="1.2"></a> - 1.2 **Komplex **: Wenn Sie auf einen komplexen Typ zugreifen, arbeiten Sie an einem Verweis auf dessen Wert. - "Objekt" - "Array" - "Funktion" <br /> **** Zurück nach oben**** Referenzen <a name="references--prefer-const"></a><a name="2.1"></a> - 2.1 Verwenden Sie `const` für alle Ihre Referenzen; vermeiden Sie `var`. eslint: `prefer-const`, `no-const-assign` > Warum? Dies stellt sicher, dass Sie Ihre Referenzen nicht neu zuweisen können, was zu Fehlern und schwer zu verstehendem Code führen kann. <a name="references--disallow-var"></a><a name="2.2"></a> - 2.2 Wenn Sie Referenzen neu zuweisen müssen, verwenden Sie `let` anstelle von `var`. eslint: `no-var` > Warum? "let" ist blockscoped und nicht funktionsscoped wie "var". <a name="references--block-scope"></a><a name="2.3"></a> - 2.3 Beachten Sie, dass sowohl "let" als auch "const" blockscoped sind, während "var" funktionsscoped ist. Im obigen Code können Sie sehen, dass das Verweisen auf `a` und `b` einen ReferenceError erzeugt, während `c` die Zahl enthält. Dies liegt daran, dass "a" und "b" blockskaliert sind, während "c" auf die enthaltende Funktion beschränkt ist. **** Zurück nach oben**** Objekte <a name="objects--no-new"></a><a name="3.1"></a> - 3.1 Verwenden Sie die literale Syntax für die Objekterstellung. eslint: "Kein neues Objekt" <a name="es6-computed-properties"></a><a name="3.4"></a> - 3.2 Verwenden Sie berechnete Eigenschaftsnamen, wenn Sie Objekte mit dynamischen Eigenschaftsnamen erstellen. > Warum? Sie ermöglichen es Ihnen, alle Eigenschaften eines Objekts an einem Ort zu definieren. <a name="es6-object-shorthand"></a><a name="3.5"></a> 3.3 Verwenden Sie die Abkürzung Objektmethode. eslint: "Object-shorthand" <a name="es6-object-concise"></a><a name="3.6"></a> - 3.4 Verwenden Sie die Abkürzung Property Value. eslint: "Object-shorthand" > Warum? Es ist kürzer und beschreibend. <a name="objects--grouped-shorthand"></a><a name="3.7"></a> - 3.5 Gruppieren Sie Ihre Kurzschrifteigenschaften am Anfang Ihrer Objektdeklaration. > Warum? Es ist einfacher zu sagen, welche Eigenschaften die Abkürzung verwenden. <a name="objects--cited-props"></a><a name="3.8"></a> - 3,6 Zitieren Sie nur Eigenschaften, die ungültige Bezeichner sind. eslint: "quote-props" > Warum? Im Allgemeinen halten wir es für subjektiv leichter zu lesen. Es verbessert die Syntax-Hervorhebung und wird auch von vielen JS-Engines leichter optimiert. <a name="objects--prototype-builtins"></a> - 3,7 Rufen Sie `Object.prototype`-Methoden nicht direkt auf, wie `hasOwnProperty`, `propertyIsEnumerable` und `isPrototypeOf`. eslint: „no-prototype-builtins > Warum? Diese Methoden können durch Eigenschaften des betreffenden Objekts abgeschattet werden - betrachten Sie `{ hasOwnProperty: false }` - oder das Objekt kann ein Nullobjekt sein ("Object.create(null)"). In modernen Browsern, die ES2022 unterstützen, oder mit einem Polyfill wie <https:/