Spécifications de développement js quotidiennes

Dans cet article, nous parlerons des spécifications de développement quotidiennes de JavaScript, afin que le code js écrit par tout le monde dans le développement quotidien de JavaScript à l'avenir soit plus standardisé. Les étudiants intéressés peuvent jeter un œil à cet article ! Les normes de développement quotidiennes sont toujours très importantes !

J'ai écrit plusieurs projets avant et après la dépendance frontale. Lors de l'écriture de logique interactive en JavaScript, j'ai écrit du code plus ou moins indésirable, tel que la pollution des variables globales, une mauvaise réutilisabilité du code et une simplicité non avancée. provoque directement une certaine confusion pour la maintenance ultérieure du code. Voici quelques domaines qui doivent être améliorés dans le codage JS, qui peuvent être directement appliqués dans le développement et engagés dans l'écriture d'un code plus élégant.

En parlant de spécifications de code, nous pouvons penser aux règles ESLint. Les spécifications suivantes ont des explications liées aux règles ESLint. Peut-être que lorsque vous utilisez ESLint, il existe des invites d'erreur associées, qui peuvent également fournir de l'aide.

1. Déclaration de variable

1.1 N'utilisez pas var pour déclarer des variables, essayez d'utiliser const

eslint: préfère-const, no-const -assign

Éviter l'utilisation de var peut réduire les problèmes de pollution des variables globales. L'utilisation de const garantit que la variable déclarée est unique et ne peut pas être réaffectée.

//bad
var a = 1;
//best
const a = 1;

1.2 Si vous devez déclarer une référence mutable, utilisez let au lieu de var

eslint: no-var jscs: disallowVar

let appartient à une portée au niveau du bloc dans le {} actuel, et var appartient à la portée de la fonction

//bad
var count = 1;
if (true) {
	var count = 2;
}
console.log(count)


//best
let count = 1;
if (true) {
	let count = 2;
}
console.log(count)

1.3 sera déclarer let Le regroupement

avec const peut améliorer la lisibilité du code.

//bad
let a = 1;
const obj = {};
let num = 0;
const page = 10;

//best
let a = 1;
let num = 0;
const obj = {};
const page = 10;

1.4 Placez les variables déclarées par let et const à l'emplacement approprié

Parce que let et const reçoivent une sorte de zone morte temporaire (Temporal Dead Zones , TDZ) Le concept ] détermine également que les variables qu'ils déclarent ne seront pas soumises à une promotion de variable. Les variables déclarées avec var seront promues en haut de la portée.

2. Utiliser des objets

2.1 Utiliser des littéraux pour créer des objets

eslint : no-new-object

//bad
const obj = new Object();

//good
const obj = {};

2.2 La méthode de l'objet est sous forme abrégée

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

2.3 Les propriétés de l'objet sont également sous forme abrégée

eslint : object-shorthand jscs : requireEnhancedObjectLiterals

const hello = "你好";

//bad
const obj = {
	hello:hello
};

//best
const obj = {
	hello,
};

2.4 N'utilisez pas directement les méthodes Object.prototype, telles que : hasOwnProperty, propertyIsEnumerable, isPrototypeOf, etc.

// bad
console.log(object.hasOwnProperty(key));

// good
console.log(Object.prototype.hasOwnProperty.call(object, key));

// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
const has = require('has');
…
console.log(has.call(object, key));

2.5 Il est préférable d'utiliser des copies superficielles d'objets.. L'utilisation de Object.assign() au lieu de Object.assign()

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original`
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

entraînera des problèmes inattendus.

3. Utiliser des tableaux

3.1 Utiliser des littéraux pour créer des tableaux

eslint: no-array-constructor

// bad
const arr= new Array();

// good
const arr= [];

3.2 Utiliser des opérateurs de propagation. . Copier le tableau

// bad
const arr= new Array();

// good
const arr= [];

// bad
const len = arr.length;
const arrCopy = [];
let i;

for (i = 0; i < len; i++) {
  arrCopy[i] = arr[i];
}

// good
const arrCopy = [...arr];

3.3 Utilisez Array.from pour convertir un tableau de classe en tableau

const list = document.getElementsByTagName("li");
const liNodes = Array.from(list);

4. Fonction

4.1 Utiliser la déclaration de fonction au lieu de <🎜. >Expression de fonction

Pourquoi ? Parce que la fonction déclarée par la fonction sera reconnue en premier et la variable sera hissée (histée), tandis que l'expression de la fonction hissera uniquement le nom de la variable de référence de la fonction (c'est-à-dire le levage de variable).

// bad
  const fn= function () {
  };

  // good
  function fn() {
  }

4.2 Ne déclarez pas une fonction dans un bloc de code non fonctionnel (if, else, while, etc.), mais attribuez cette fonction à une variable. Même si le premier ne signalera pas d’erreur, la méthode d’analyse du navigateur est différente.

// bad
if (ifLogin) {
  function test() {
    console.log(' logged');
  }
}

// good
let test;
if (ifLogin) {
  test = () => {
    console.log(' logged');
  };
}

4.3 Évitez d'utiliser des arguments, mais utilisez la syntaxe rest... La raison du remplacement de

est que arguments est un tableau de classe et n'a pas de méthodes spécifiques au tableau, et ... Cela peut indiquer clairement que les paramètres que vous transmettez sont de vrais tableaux.

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

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

5. Fonction flèche

5.1 Lorsque vous devez utiliser une expression de fonction (ou devez passer une fonction anonyme), vous pouvez utiliser une fonction flèche à la place.

La raison est que l'utilisation d'une nouvelle fonction créera une nouvelle portée de fonction, ce qui changera le point actuel de celle-ci, et la fonction flèche créera un nouvel environnement d'exécution this, qui peut continuer à transmettre ceci de l'environnement actuel. Continuez ; et la méthode d'écriture est également plus concise.

Lorsque votre fonction est plus complexe, il est facile de causer des problèmes lors de l'utilisation de fonctions fléchées. Vous pouvez utiliser des déclarations de fonction à la place.

// bad
  [1, 3, 5].map(function (x) {
    return x * x;
  });

  // good
  [1, 3, 5].map((x) => {
    return x * x;
  });

5.2

Si une fonction tient sur une seule ligne et n'a qu'un seul paramètre, omettez les accolades, les parenthèses et revenez. Si ce n'est pas le cas, ne l'omettez pas.

 // good
  [1, 2, 3].map(x => x * x);

  // good
  [1, 2, 3].reduce((total, n) => {
    return total + n;
  }, 0);

6. Constructeur

6.1 Utilisez toujours la classe pour éviter la manipulation directe des attributs du prototype

De cette façon, l'écriture est plus concise.

// bad
  function Queue(contents = []) {
    this._queue = [...contents];
  }
  Queue.prototype.pop = function() {
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
  }


  // good
  class Queue {
    constructor(contents = []) {
      this._queue = [...contents];
    }
    pop() {
      const value = this._queue[0];
      this._queue.splice(0, 1);
      return value;
    }
  }

7. Développement de modules

7.1 Utiliser l'idée de modules pour rédiger des affaires.

L'utilisation de modules pour écrire des affaires logiques peut rendre votre code plus intégré et évolutif. Les bibliothèques similaires incluent seaJS et requireJS

7.2少使用通配符import

这样更能够确保你只有一个模块被你import，而那些不必要的模块不会被import，减少代码体积。

  // bad
  import * as webUI from './WEB';

  // good
  import webUI from './WEB';

8.使用高阶函数如map()和reduce()代替for~of

 const arr= [1, 2, 3, 4, 5];

  // bad
  let sum = 0;
  for (let num of arr) {
    sum += num;
  }

  sum === 15;

  // good
  let sum = 0;
  arr.forEach((num) => sum += num);
  sum === 15;

  // best (use the functional force)
  const sum = arr.reduce((total, num) => total + num, 0);
  sum === 15;

9.比较运算符

9.1优先使用===和！==而不是==和！=

===和！==不会进行强制类型转换，后者则会

9.2在做if条件判断时强制类型转换规则

• 对象都会被转为true

• null、undefined、NaN被转为false

• 布尔值转为对应的布尔值

• 数字中+0 -0 0都被计算为false，否则为true

• 字符串   如果是“”空字符串，被计算为fasle，否则为true

相关推荐：

Web 前端代码规范

JavaScript代码规范和性能整理

HTML(5) 代码规范

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!