Maison > Article > interface Web > 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.
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;
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)
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;
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.
eslint : no-new-object
//bad const obj = new Object(); //good const obj = {};
// bad const atom = { value: 1, addValue: function (value) { return atom.value + value; }, }; // good const atom = { value: 1, addValue(value) { return atom.value + value; }, };
eslint : object-shorthand jscs : requireEnhancedObjectLiterals
const hello = "你好"; //bad const obj = { hello:hello }; //best const obj = { hello, };
// 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));
// 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.
eslint: no-array-constructor
// bad const arr= new Array(); // good const arr= [];
// 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];
const list = document.getElementsByTagName("li"); const liNodes = Array.from(list);
// 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'); }; }
// 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
// good [1, 2, 3].map(x => x * x); // good [1, 2, 3].reduce((total, n) => { return total + n; }, 0);
// 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 modules7.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
这样更能够确保你只有一个模块被你import,而那些不必要的模块不会被import,减少代码体积。
// bad import * as webUI from './WEB'; // good import webUI from './WEB';
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;
===和!==不会进行强制类型转换,后者则会
对象都会被转为true
null、undefined、NaN被转为false
布尔值转为对应的布尔值
数字中+0 -0 0都被计算为false,否则为true
字符串 如果是“”空字符串,被计算为fasle,否则为true
相关推荐:
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!