Une brève analyse du style de programmation JavaScript front-end

Avant-propos

De nombreuses entreprises et organisations ont divulgué leurs spécifications de style. Pour plus de détails, veuillez vous référer à jscs.info. Le contenu suivant fait principalement référence aux spécifications de style JavaScript d'Airbnb. Bien sûr, il existe également des suggestions de programmation de Google, etc. Style de programmation

Ce chapitre explique comment utiliser la nouvelle syntaxe d'ES6, combinée à la syntaxe JavaScript traditionnelle, pour écrire de manière raisonnable et simple. -lire et maintenir le code.

Style de programmation

Portée au niveau du bloc

(1) let remplace var

ES6 propose deux nouvelles déclarations Commandes variables : laisser et const. Parmi eux, let peut remplacer complètement var, car la sémantique des deux est la même et let n'a aucun effet secondaire.

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

Remarque : si var est utilisé à la place de let dans le code ci-dessus, deux variables globales sont en fait déclarées, ce qui n'est évidemment pas l'intention. Les variables ne doivent être valides que dans le bloc de code dans lequel elles sont déclarées. La commande var ne peut pas faire cela.

La commande var a un effet de promotion variable, mais la commande let n'a pas ce problème :

'use strict';

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

Remarque : si le code ci-dessus utilise var au lieu de let, la ligne console.log ne signalera pas d'erreur, mais affichera un élément indéfini car la déclaration de variable est hissée en tête du bloc de code. Cela viole le principe selon lequel les variables sont déclarées en premier et utilisées ensuite.

(2) Constantes globales et sécurité des threads

Il y a plusieurs raisons pour lesquelles const est meilleur que let. L'une est que const peut rappeler aux personnes qui lisent le programme que cette variable ne doit pas changer ; l'autre est que const est plus conforme à l'idée de programmation fonctionnelle. L'opération ne change pas la valeur, mais crée seulement une nouvelle valeur. , et cela est également propice aux futures opérations distribuées ; la dernière raison pour laquelle le compilateur JavaScript optimisera const, donc utiliser plus de const contribuera à améliorer l'efficacité de l'exécution du programme. En d'autres termes, la différence essentielle entre let et const est en fait la différence. dans le traitement interne du compilateur.

// 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];

Remarque : il y a deux avantages à déclarer une constante const. Premièrement, les personnes qui lisent le code se rendront immédiatement compte que la valeur ne doit pas être modifiée. Deuxièmement, cela évite les erreurs causées par une modification involontaire de la valeur de la variable. . JavaScript peut avoir des implémentations multithread (telles que les projets River Trail d'Intel). Dans ce cas, les variables représentées par let ne doivent apparaître que dans le code exécuté dans un seul thread et ne peuvent pas être partagées par plusieurs threads. Cela contribuera à garantir la sécurité des threads.

String

Les chaînes statiques utilisent toujours des guillemets simples ou des backticks, mais n'utilisent pas de guillemets doubles. Les chaînes dynamiques utilisent des 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';

Affectation de déstructuration

Lors de l'attribution de valeurs à des variables à l'aide de membres du tableau, l'affectation de déstructuration est préférée.

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

Si le paramètre de fonction est membre d'un objet, l'affectation de déstructuration est préférée.

// 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 }) {
}

Si la fonction renvoie plusieurs valeurs, l'affectation déstructurante de l'objet est préférée à l'affectation déstructurante du tableau. Cela facilite l'ajout ultérieur de valeurs de retour et la modification de l'ordre des valeurs de retour.

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

Objet

Objet défini sur une seule ligne, le dernier membre ne se termine pas par une virgule. Pour les objets définis sur plusieurs lignes, le dernier membre se termine par une virgule.

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

Les objets doivent être aussi statiques que possible. Une fois définis, de nouveaux attributs ne doivent pas être ajoutés à volonté. Si l’ajout d’attributs est inévitable, utilisez la méthode Object.assign.

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

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

Si le nom d'attribut de l'objet est dynamique, vous pouvez utiliser des expressions d'attribut pour le définir lors de la création de l'objet.

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

Tableau

Copiez un tableau à l'aide de l'opérateur spread (…).

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

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

Utilisez la méthode Array.from pour convertir un objet de type tableau en tableau.

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

Fonction

La fonction d'exécution immédiate peut être écrite sous la forme d'une fonction flèche.

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

Dans les situations où des expressions de fonction doivent être utilisées, essayez plutôt d'utiliser des fonctions fléchées. Parce que c'est plus concis et lie cela.

// 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);

La fonction flèche remplace Function.prototype.bind et ne devrait plus utiliser self/_this/that pour lier ceci.

// 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);

Pour les fonctions simples, sur une seule ligne et non réutilisables, il est recommandé d'utiliser les fonctions fléchées. Si le corps de la fonction est complexe et comporte un grand nombre de lignes, la méthode traditionnelle d’écriture de fonction doit être utilisée.

Tous les éléments de configuration doivent être concentrés dans un seul objet et placés comme dernier paramètre. Les valeurs booléennes ne peuvent pas être utilisées directement comme paramètres.

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

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

N'utilisez pas de variables d'arguments dans le corps de la fonction, utilisez plutôt l'opérateur reste (…). Étant donné que l'opérateur rest indique explicitement que vous souhaitez obtenir les paramètres et que arguments est un objet de type tableau, l'opérateur rest peut fournir un véritable tableau.

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

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

Utilisez la syntaxe des valeurs par défaut pour définir les valeurs par défaut des paramètres de fonction.

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

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

Structure de la carte

Utilisez Object uniquement lors de la simulation d'objets d'entité dans le monde réel. Si vous n’avez besoin que de la structure de données key:value, utilisez la structure Map. Parce que Map dispose d'un mécanisme de traversée intégré.

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]);
}

Module Module

La syntaxe du module est la manière standard d'écrire des modules JavaScript, respectez cette façon d'écrire. Utilisez import au lieu de require. La méthode d'écriture habituelle est la suivante :

import { func1, func2 } from 'moduleA';

Utilisez export au lieu de 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

Si le module n'a qu'une seule valeur de sortie, utilisez export default Si le module en a. plusieurs valeurs de sortie, utilisez l'exportation par défaut. N'utilisez pas l'exportation par défaut et n'utilisez pas l'exportation par défaut et l'exportation ordinaire en même temps.

N'utilisez pas de caractères génériques dans les entrées du module. Parce que cela garantit qu'il existe une sortie par défaut (exportation par défaut) dans votre module.

import myObject from './importModule';

Si le module génère une fonction par défaut, la première lettre du nom de la fonction doit être en minuscule. C’est également le style de codage de la dénomination des cas de chameaux.

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）！