Рекомендации по использованию JavaScript - прослушиватели событий, массивы и null

Чтобы код было легко читать и поддерживать, мы должны следовать некоторым передовым методикам.

В этой статье мы рассмотрим некоторые передовые методы, которым следует следовать, чтобы облегчить жизнь каждому.

Не используйте null литерал

Лучше использовать undefined для всего, чем использовать null и undefined.

Так что мы просто придерживаемся undefined во всем.

Например, вместо написания:

let foo = null;

or:

if (bar == null) {}

Мы пишем:

let foo;

or:

if (foo === null) {}

No process.exit()

Мы не хотим использовать process.exit для выхода.

Программа существует внезапно, не давая ей возможности очиститься.

Вместо того, чтобы писать:

process.exit(0);

Мы пишем:

process.on('SIGINT', () => {
  console.log('Got SIGINT');
  process.exit(1);
});

Use Array#reduce() и Array#reduceRight()

reduce и reduceRight затрудняют чтение кода.

Их можно заменить на map, filter или цикл for-of.

Например, вместо написания:

array.reduce(reducer, initialValue);

Мы пишем:

let result = initialValue;
for (const element of array) {
  result += element;
}

Отсутствие нечитаемой деструктуризации массива

Если мы напишем код деструктуризации массива, то мы должны сделать их читаемыми.

Например, вместо написания:

const [, , foo] = parts;

Мы пишем:

const [foo] = parts;

Нет неиспользуемых свойств объекта

Если у нас есть неиспользуемые свойства объекта, мы можем их удалить.

Например, вместо написания:

const obj = {
  used: 1,
  unused: 2
};
console.log(obj.used);

Мы пишем:

const obj = {
  used: 1
};
console.log(obj.used);

Нет бесполезно undefined

Мы не должны использовать undefined там, где они бесполезны.

Например, вместо написания:

let foo = undefined;
const {
  foo = undefined
} = bar;
const baz = () => undefined;
function foo() {
  return undefined;
}
function* foo() {
  yield undefined;
}
function foo(bar = undefined) {}
function foo({
  bar = undefined
}) {}
foo(undefined);

Мы пишем:

let foo;
const {
  foo
} = bar;
const baz = () => {};
function foo() {
  
}
function* foo() {

}
function foo(bar) {}
function foo({
  bar
}) {}
foo();

Нам не нужна функция, возвращающая undefined.

И должен возвращать или уступать undefined, поскольку они выполняются автоматически.

Отсутствие числовых литералов с нулевыми дробями или висячими точками

Мы не хотим добавлять висячие точки или нулевые дроби, поскольку они лишние.

Например, вместо написания:

const foo = 1.0;
const foo = -1.0;
const foo = 1.;

Мы пишем:

const foo = 1;
const foo = -1;
const foo = 1;

Обеспечение правильного регистра для числовых литералов

У нас должен быть правильный регистр для числовых литералов.

Например, вместо написания:

const foo = 0XFF;
const foo = 0B10;
const foo = 0O76;

Мы пишем:

const foo = 0xFF;
const foo = 0b10;
const foo = 0o76;

Используйте .addEventListener() и .removeEventListener() более on функций

Вместо использования on функций для добавления прослушивателей событий мы можем использовать addEventListener и removeListener.

С addEventListener мы можем добавлять и удалять слушателя.

Мы также можем указать режим захвата, а не пузырьковую.

Также мы можем зарегистрировать неограниченное количество обработчиков.

Он также отделяет логику от структуры документа.

Исключается путаница с правильными названиями событий.

on- объекты не реагируют на ошибки должным образом.

Мы можем присвоить ему что угодно и не получить ошибок, что нехорошо.

Поэтому вместо того, чтобы писать:

foo.onclick = () => {};

Мы должны написать:

foo.addEventListener('click', onClick);

а также:

foo.removeEventListener('click', onClick);

Используйте .dataset в элементах DOM вместо .setAttribute

Вместо использования свойства setAttribute для установки настраиваемых атрибутов мы можем использовать свойство dataset.

С этим труднее ошибиться.

Например, вместо написания:

element.setAttribute('data-foo', 'bar');

Мы пишем:

element.dataset.foo = 'bar';

Use KeyboardEvent#key более KeyboardEvent#keyCode

Свойство keyCode устарело. Поэтому мы должны использовать свойство key для проверки кодов клавиш.

Например, вместо написания:

window.addEventListener('keydown', event => {
  console.log(event.keyCode);
});

Мы пишем:

window.addEventListener('keydown', event => {
  console.log(event.key);
});

Заключение

Мы должны использовать undefined вместо null.

Кроме того, мы должны использовать addEventListener и removeEventListener вместо использования on функций.

Циклы и другие методы массива лучше, чем reduce, поскольку код более читабелен.

JavaScript на простом английском языке

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал на YouTube в Decoded!