Eine kurze Analyse des Front-End-JavaScript-Programmierstils

Vorwort

Viele Unternehmen und Organisationen haben ihre Stilspezifikationen veröffentlicht. Weitere Informationen finden Sie unter jscs.info. Der folgende Inhalt bezieht sich hauptsächlich auf die JavaScript-Stilspezifikationen. Natürlich gibt es auch Programmiervorschläge von Google usw. Programmierstil

In diesem Kapitel wird erläutert, wie Sie die neue Syntax von ES6 in Kombination mit der traditionellen JavaScript-Syntax verwenden, um vernünftig und einfach zu schreiben -Code lesen und pflegen.

Programmierstil

Geltungsbereich auf Blockebene

(1) let ersetzt var

ES6 schlägt zwei neue Deklarationen vor Variablenbefehle: let und const. Unter diesen kann let var vollständig ersetzen, da die Semantik der beiden gleich ist und let keine Nebenwirkungen hat.

'use strict';
if (true) {
  let x = 'hello';
}
for (let i = 0; i < 10; i++) {
  console.log(i);
}

Hinweis: Wenn im obigen Code var anstelle von let verwendet wird, werden tatsächlich zwei globale Variablen deklariert, was offensichtlich nicht beabsichtigt ist. Variablen sollten nur innerhalb des Codeblocks gültig sein, in dem sie deklariert sind. Der Befehl var kann dies nicht tun.

Der var-Befehl hat einen variablen Heraufstufungseffekt, aber der let-Befehl hat dieses Problem nicht:

'use strict';

if(true) {
  console.log(x); // ReferenceError
  let x = 'hello';
}

Hinweis: Wenn der obige Code var anstelle von let verwendet, wird die Zeile console.log angezeigt meldet keinen Fehler, gibt aber undefiniert aus, da die Variablendeklaration an den Kopf des Codeblocks gehoben wird. Dies verstößt gegen den Grundsatz, dass Variablen zuerst deklariert und später verwendet werden.

(2) Globale Konstanten und Thread-Sicherheit

Es gibt mehrere Gründe, warum const besser ist als let. Zum einen kann const Leute, die das Programm lesen, daran erinnern, dass sich diese Variable nicht ändern sollte. Zum anderen entspricht const eher der Idee der funktionalen Programmierung. Die Operation ändert den Wert nicht, sondern erstellt nur einen neuen Wert Dies ist auch förderlich für zukünftige verteilte Operationen. Der letzte Grund ist, dass der JavaScript-Compiler const optimiert, sodass die Verwendung von mehr const dazu beiträgt, die Ausführungseffizienz des Programms zu verbessern. Mit anderen Worten, der wesentliche Unterschied zwischen let und const ist tatsächlich der Unterschied in der internen Verarbeitung des Compilers.

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

// good
const a = 1;
const b = 2;
const c = 3;

// best
const [a, b, c] = [1, 2, 3];

Hinweis: Die Deklaration einer const-Konstante hat zwei Vorteile: Erstens wird den Lesern des Codes sofort klar, dass der Wert nicht geändert werden sollte. Zweitens werden Fehler vermieden, die durch versehentliches Ändern des Variablenwerts verursacht werden . JavaScript verfügt möglicherweise über Multithread-Implementierungen (z. B. River Trail-Projekte von Intel). In diesem Fall sollten die durch let dargestellten Variablen nur in Code angezeigt werden, der in einem einzelnen Thread ausgeführt wird, und können nicht von mehreren Threads gemeinsam genutzt werden. Dies trägt zur Gewährleistung der Thread-Sicherheit bei.

String

Statische Strings verwenden immer einfache Anführungszeichen oder Backticks, aber keine doppelten Anführungszeichen. Dynamische Strings verwenden Backticks.

// bad
const a = "foobar";
const b = 'foo' + a + 'bar';
// acceptable
const c = `foobar`;
// good
const a = 'foobar';
const b = `foo${a}bar`;
const c = 'foobar';

Destrukturierende Zuweisung

Bei der Zuweisung von Werten zu Variablen mithilfe von Array-Mitgliedern wird die destrukturierende Zuweisung bevorzugt.

const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;

Wenn der Funktionsparameter Mitglied eines Objekts ist, wird eine destrukturierende Zuweisung bevorzugt.

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;
}
// good
function getFullName(obj) {
  const { firstName, lastName } = obj;
}
// best
function getFullName({ firstName, lastName }) {
}

Wenn die Funktion mehrere Werte zurückgibt, wird die destrukturierende Zuweisung des Objekts anstelle der destrukturierenden Zuweisung des Arrays bevorzugt. Dies erleichtert das spätere Hinzufügen von Rückgabewerten und das Ändern der Reihenfolge der Rückgabewerte.

// bad
function processInput(input) {
  return [left, right, top, bottom];
}
// good
function processInput(input) {
  return { left, right, top, bottom };
}
const { left, right } = processInput(input);

Objekt

Ein in einer einzelnen Zeile definiertes Objekt, dessen letztes Element nicht mit einem Komma endet. Bei Objekten, die in mehreren Zeilen definiert sind, endet das letzte Element mit einem Komma.

// good
const a = { k1: v1, k2: v2 };
const b = {
  k1: v1,
  k2: v2,
};

Objekte sollten möglichst statisch sein. Sobald sie definiert sind, dürfen neue Attribute nicht nach Belieben hinzugefügt werden. Wenn das Hinzufügen von Attributen unvermeidlich ist, verwenden Sie die Methode Object.assign.

// if reshape unavoidable
const a = {};
Object.assign(a, { x: 3 });

// good
const a = { x: null };
a.x = 3;

Wenn der Attributname des Objekts dynamisch ist, können Sie ihn beim Erstellen des Objekts mithilfe von Attributausdrücken definieren.

// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};

Array

Kopieren Sie ein Array mit dem Spread-Operator (…).

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];

Verwenden Sie die Methode Array.from, um ein Array-ähnliches Objekt in ein Array umzuwandeln.

const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

Funktion

Die Funktion zur sofortigen Ausführung kann in Form einer Pfeilfunktion geschrieben werden.

(() => {
  console.log('Welcome to the Internet.');
})();

In Situationen, in denen Funktionsausdrücke verwendet werden müssen, versuchen Sie stattdessen, Pfeilfunktionen zu verwenden. Weil dies prägnanter ist und dies bindet.

// bad
[1, 2, 3].map(function (x) {
  return x * x;
});
// good
[1, 2, 3].map((x) => {
  return x * x;
});
// best
[1, 2, 3].map(x => x * x);

Die Pfeilfunktion ersetzt Function.prototype.bind und sollte nicht mehr self/_this/that verwenden, um dies zu binden.

// bad
const self = this;
const boundMethod = function(...params) {
  return method.apply(self, params);
}

// acceptable
const boundMethod = method.bind(this);

// best
const boundMethod = (...params) => method.apply(this, params);

Für einfache, einzeilige und nicht wiederverwendbare Funktionen wird die Verwendung von Pfeilfunktionen empfohlen. Wenn der Funktionskörper komplex ist und viele Zeilen enthält, sollte die herkömmliche Methode zum Schreiben von Funktionen verwendet werden.

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

// bad
function pide(a, b, option = false ) {
}

// good
function pide(a, b, { option = false } = {}) {
}

Verwenden Sie im Funktionskörper keine Argumentvariablen, sondern stattdessen den Restoperator (…). Da der Rest-Operator explizit angibt, dass Sie die Parameter abrufen möchten, und es sich bei arguments um ein Array-ähnliches Objekt handelt, kann der Rest-Operator ein echtes Array bereitstellen.

// bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

// good
function concatenateAll(...args) {
  return args.join('');
}

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

// bad
function handleThings(opts) {
  opts = opts || {};
}

// good
function handleThings(opts = {}) {
  // ...
}

Kartenstruktur

Verwenden Sie „Objekt“ nur, wenn Sie Entitätsobjekte in der realen Welt simulieren. Wenn Sie nur die Datenstruktur key:value benötigen, verwenden Sie die Map-Struktur. Weil Map über einen integrierten Traversalmechanismus verfügt.

let map = new Map(arr);
for (let key of map.keys()) {
  console.log(key);
}
for (let value of map.values()) {
  console.log(value);
}
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}

Modulmodul

Modulsyntax ist die Standardmethode zum Schreiben von JavaScript-Modulen. Bleiben Sie bei dieser Schreibweise. Verwenden Sie „Import“ statt „Require“. Die übliche Schreibmethode ist wie folgt:

import { func1, func2 } from 'moduleA';

Verwenden Sie export anstelle von module.exports

// commonJS的写法
var React = require('react');

var Breadcrumbs = React.createClass({
  render() {
    return <nav />;
  }
});

module.exports = Breadcrumbs;

// ES6的写法
import React from &#39;react&#39;;

const Breadcrumbs = React.createClass({
  render() {
    return <nav />;
  }
});

export default Breadcrumbs

Wenn das Modul nur einen Ausgabewert hat, verwenden Sie export default Wenn Sie mehrere Ausgabewerte verwenden, verwenden Sie nicht den Exportstandard und verwenden Sie nicht gleichzeitig den Exportstandard und den normalen Export.

Verwenden Sie keine Platzhalter in Moduleingaben. Denn dadurch wird sichergestellt, dass es in Ihrem Modul eine Standardausgabe (Exportstandard) gibt.

import myObject from './importModule';

Wenn das Modul standardmäßig eine Funktion ausgibt, sollte der erste Buchstabe des Funktionsnamens ein Kleinbuchstabe sein. Dies ist auch der Codierungsstil der Benennung von Kamelfällen.

function makeStyleGuide() {}
export default makeStyleGuide;

如果模块默认输出一个对象，对象名的首字母应该大写。

const StyleGuide = {
  es6: {
  }
};
export default StyleGuide;

ESLint

ESLint是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。和lint的使用差不多
首先，安装ESLint。

npm i -g eslint

然后，安装Airbnb语法规则。

npm i -g eslint-config-airbnb

最后，在项目的根目录下新建一个.eslintrc文件，配置ESLint。

{
  "extends": "eslint-config-airbnb"
}

比如：

var unusued = 'I have no purpose!';

function greet() {
    var message = 'Hello, World!';
    alert(message);
}

greet();

然后我们使用命令，就可以检查语法的问题，并给出相关建议。

eslint index.js

$ eslint index.js
index.js
  1:5  error  unusued is defined but never used                 no-unused-vars
  4:5  error  Expected indentation of 2 characters but found 4  indent
  5:5  error  Expected indentation of 2 characters but found 4  indent

x 3 problems (3 errors, 0 warnings)

 以上就是前端 JavaScript 编程风格浅析 的内容，更多相关内容请关注PHP中文网（www.php.cn）！