In diesem Artikel werden wir über die täglichen Entwicklungsspezifikationen von JavaScript sprechen, damit der von allen in der täglichen Entwicklung von JavaScript geschriebene JS-Code in Zukunft standardisierter wird. Interessierte Studenten können sich diesen Artikel ansehen! Tägliche Entwicklungsstandards sind immer noch sehr wichtig!
Ich habe mehrere Projekte vor und nach der Front-End-Abhängigkeit geschrieben. Beim Schreiben interaktiver Logik in JavaScript habe ich mehr oder weniger Junk-Code geschrieben, z. B. globale Variablenverschmutzung, schlechte Wiederverwendbarkeit des Codes und Einfachheit führt direkt zu Verwirrung bei der späteren Pflege des Codes. Im Folgenden sind einige Bereiche aufgeführt, die in der JS-Codierung verbessert werden müssen. Diese können direkt in der Entwicklung angewendet werden und dazu beitragen, eleganteren Code zu schreiben.
Apropos Codespezifikationen: Die folgenden Spezifikationen enthalten möglicherweise entsprechende Erläuterungen zu ESLint-Regeln.
eslint:prefer-const, no-const -assign
Durch die Vermeidung der Verwendung von var können Probleme mit der globalen Variablenverschmutzung verringert werden. Durch die Verwendung von const wird sichergestellt, dass die deklarierte Variable eindeutig ist und nicht neu zugewiesen werden kann.
//bad var a = 1; //best const a = 1;
eslint: no-var jscs: disallowVar
let gehört zu einem Bereich auf Blockebene im aktuellen {}, und var gehört zum Funktionsbereich
//bad var count = 1; if (true) { var count = 2; } console.log(count) //best let count = 1; if (true) { let count = 2; } console.log(count)
mit const kann die Lesbarkeit des Codes verbessern.
//bad let a = 1; const obj = {}; let num = 0; const page = 10; //best let a = 1; let num = 0; const obj = {}; const page = 10;
Weil let und const eine Art temporäre Totzone erhalten (Temporal Dead Zones, TDZ) ]-Konzept legt außerdem fest, dass die von ihnen deklarierten Variablen keiner Variablenheraufstufung unterliegen. Mit var deklarierte Variablen werden an die Spitze des Gültigkeitsbereichs befördert.
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 }
führt zu unerwarteten Problemen.
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() { }
// 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(''); }
Wenn Ihre Funktion komplexer ist, kann es bei der Verwendung von Pfeilfunktionen leicht zu Problemen kommen. Sie können stattdessen Funktionsdeklarationen verwenden.
5.2// bad [1, 3, 5].map(function (x) { return x * x; }); // good [1, 3, 5].map((x) => { return x * x; });
// 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; } }
这样更能够确保你只有一个模块被你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
相关推荐:
Das obige ist der detaillierte Inhalt vonTägliche js-Entwicklungsspezifikationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!