Tägliche js-Entwicklungsspezifikationen

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.

1. Variablendeklaration

1.1 Verwenden Sie nicht var, um Variablen zu deklarieren, sondern versuchen Sie es mit const

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;

1.2 Wenn Sie eine veränderliche Referenz deklarieren müssen, verwenden Sie let anstelle von var

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)

1.3 wird Declare Let Gruppierung

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;

1.4 Platzieren Sie die durch let und const deklarierten Variablen an der entsprechenden Stelle

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.

2. Objekte verwenden

2.1 Literale verwenden, um Objekte zu erstellen

eslint: no-new-object

//bad
const obj = new Object();

//good
const obj = {};

2.2 Die Methode des Objekts liegt in der Kurzform vor

// 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 Die Eigenschaften des Objekts liegen ebenfalls in der Kurzform vor

eslint: object-shorthand jscs: requireEnhancedObjectLiterals

const hello = "你好";

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

//best
const obj = {
	hello,
};

2.4 Verwenden Sie Object.prototype-Methoden nicht direkt, wie zum Beispiel: hasOwnProperty, propertyIsEnumerable, isPrototypeOf usw.

// 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 Flache Kopien von Objekten werden am besten verwendet. Die Verwendung von Object.assign() anstelle von 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 }

führt zu unerwarteten Problemen.

3. Verwenden Sie Arrays

3.1 Verwenden Sie Literale, um Arrays zu erstellen

eslint: no-array-constructor

// bad
const arr= new Array();

// good
const arr= [];

3.2 Verwenden Sie Spread-Operatoren. . Array kopieren

// 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 Verwenden Sie Array.from, um ein Klassenarray in ein Array umzuwandeln

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

4.1 Verwenden Sie die Funktionsdeklaration anstelle von

Funktionsausdruck

Warum? Weil die von der Funktion deklarierte Funktion zuerst erkannt wird und die Variable angehoben (angehoben) wird, während der Funktionsausdruck nur den Referenzvariablennamen der Funktion anhebt (d. h. Variablenanhebung).

4.2 Deklarieren Sie eine Funktion nicht in einem Nicht-Funktionscodeblock (if, else, while usw.), sondern weisen Sie diese Funktion einer Variablen zu. Auch wenn Ersteres keinen Fehler meldet, unterscheidet sich die Analysemethode des Browsers.

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

  // good
  function fn() {
  }

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

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

4.3 Vermeiden Sie die Verwendung von Argumenten, sondern verwenden Sie die Restsyntax ... Der Grund für das Ersetzen von

ist, dass arguments ein Klassenarray ist und keine arrayspezifischen Methoden hat ... Es kann deutlich machen, dass die von Ihnen übergebenen Parameter echte Arrays sind.

5. Pfeilfunktion

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

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

5.1 Wenn Sie einen Funktionsausdruck verwenden müssen (oder eine anonyme Funktion übergeben müssen), können Sie stattdessen eine Pfeilfunktion verwenden.

Der Grund dafür ist, dass durch die Verwendung einer neuen Funktion ein neuer Funktionsbereich erstellt wird, der den aktuellen Punkt davon ändert, und die Pfeilfunktion eine neue Ausführungsumgebung für diese erstellt, die dies weiterhin übergeben kann Die aktuelle Umgebung ist auch prägnanter.

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

Wenn eine Funktion in eine Zeile passt und nur einen Parameter hat, lassen Sie die geschweiften Klammern, Klammern und Return weg. Wenn nicht, dann lassen Sie es nicht aus.

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

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

6. Konstruktor

6.1 Verwenden Sie immer Klassen, um eine direkte Manipulation von Prototypattributen zu vermeiden

Dadurch ist das Schreiben prägnanter.

7. Modulentwicklung

// 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.1 Nutzen Sie die Idee der Module, um Geschäfte zu schreiben.

Durch die Verwendung von Modulen zum Schreiben logischer Geschäfte kann Ihr Code integrierter und skalierbarer werden. Ähnliche Bibliotheken umfassen seaJS und 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) 代码规范

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!