Руководство по написанию JavaScript-кода от Airbnb() {

Наиболее разумный подход к написанию JavaScript-кода

Замечание: это руководство подразумевает использование Babel вместе с babel-preset-airbnb или аналогом. Оно также предполагает установленный shims/polyfills в вашем приложении, такой как airbnb-browser-shims или аналог.

События

25.1 Когда привязываете данные к событию (например, события DOM или какие-то собственные события, как Backbone события), передавайте литерал объекта (также известный как «хэш») вместо простого значения. Это позволяет другим разработчикам добавлять больше данных без поиска и изменения каждого обработчика события. К примеру, вместо:
```
// плохо
$(this).trigger('listingUpdated', listing.id);

// ...

$(this).on('listingUpdated', (e, listingID) => {
  // делает что-то с listingID
});
```
предпочитайте:
```
// хорошо
$(this).trigger('listingUpdated', { listingID: listing.id });

// ...

$(this).on('listingUpdated', (e, data) => {
  // делает что-то с data.listingID
});
```

⬆ к оглавлению

jQuery

26.1 Начинайте названия переменных, хранящих объект jQuery, со знака $.

// плохо
const sidebar = $('.sidebar');

// хорошо
const $sidebar = $('.sidebar');

// хорошо
const $sidebarBtn = $('.sidebar-btn');

26.2 Кэшируйте jQuery-поиски.

// плохо
function setSidebar() {
  $('.sidebar').hide();

  // ...

  $('.sidebar').css({
    'background-color': 'pink',
  });
}

// хорошо
function setSidebar() {
  const $sidebar = $('.sidebar');
  $sidebar.hide();

  // ...

  $sidebar.css({
    'background-color': 'pink',
  });
}

26.3 Для поиска в DOM используйте каскады $('.sidebar ul') или селектор родитель > ребёнок $('.sidebar > ul'). jsPerf

26.4 Используйте функцию find для поиска в сохранённых jQuery-объектах.

// плохо
$('ul', '.sidebar').hide();

// плохо
$('.sidebar').find('ul').hide();

// хорошо
$('.sidebar ul').hide();

// хорошо
$('.sidebar > ul').hide();

// хорошо
$sidebar.find('ul').hide();

⬆ к оглавлению

Поддержка ECMAScript 5

27.1 Можно посмотреть в таблице поддержки ES5 от пользователя Kangax .

⬆ к оглавлению

Возможности ECMAScript 6+ (ES 2015+)

28.1 Здесь собраны ссылки на различные возможности ES6.

Стрелочные функции
Классы и конструкторы
Сокращённая запись методов объекта
Сокращённая запись свойств объекта
Вычисляемые имена свойств объекта
Шаблонные строки
Деструктуризация
Параметры по умолчанию
Оставшиеся параметры
Оператор расширения
Let и Const
Итераторы и генераторы
Модули

28.2 Не используйте предложения TC39, которые не перешли на 3-ю стадию.

Почему? Они ещё не закончены и могут быть изменены или полностью изъяты. Мы хотим использовать JavaScript, а предложения ещё не стали частью JavaScript.

⬆ к оглавлению

Стандартная библиотека

Стандартная библиотека
содержит утилиты, функциональность которых сломана, но они остались для поддержки старого кода.

29.1 Используйте Number.isNaN вместо глобального isNaN.
eslint: no-restricted-globals

Почему? Глобальная функция isNaN приводит не-числа к числам, возвращая true для всего, что приводится к NaN.
Если такое поведение необходимо, сделайте его явным.
```
// плохо
isNaN('1.2'); // false
isNaN('1.2.3'); // true

// хорошо
Number.isNaN('1.2.3'); // false
Number.isNaN(Number('1.2.3')); // true
```

29.2 Используйте Number.isFinite вместо глобального isFinite.
eslint: no-restricted-globals

Почему? Глобальная функция isFinite приводит не-числа к числам, возвращая true для всего, что приводится к конечному числу.
Если такое поведение необходимо, сделайте его явным.
```
// плохо
isFinite('2e3'); // true

// хорошо
Number.isFinite('2e3'); // false
Number.isFinite(parseInt('2e3', 10)); // true
```

⬆ к оглавлению

Тестирование

30.1 Ага.

function foo() {
  return true;
}

30.2 Нет, но серьёзно:
- Какой бы фреймворк вы не использовали, вы должны писать тесты!
- Стремитесь к тому, чтобы написать много маленьких чистых функций, и к тому, чтобы свести к минимуму места, где происходят мутации.
- Будьте осторожны со стабами (stubs) и моками (mocks) — они могут сделать ваше тестирование хрупким.
- Мы в первую очередь советуем вам использовать mocha и jest от Airbnb. tape также иногда используется для небольших, отдельных модулей.
- 100% покрытие тестами — это хорошая цель, к которой надо стремиться, даже если это не всегда практично.
- Всякий раз, когда вы исправляете ошибку, пишите регрессионный тест. Исправленная ошибка без регрессионного тестирования почти наверняка всплывёт в будущем.