开源软件名称：

开源软件地址：

开源编程语言：

开源软件介绍：

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

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

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

Это руководство также доступно на других языках. Смотрите Переводы.

Другие руководства

• React
• CSS-in-JavaScript

Оглавление

1. Типы
2. Объявление переменных
3. Объекты
4. Массивы
5. Деструктуризация
6. Строки
7. Функции
8. Стрелочные функции
9. Классы и конструкторы
10. Модули
11. Итераторы и генераторы
12. Свойства
13. Переменные
14. Подъём
15. Операторы сравнения и равенства
16. Блоки
17. Управляющие операторы
18. Комментарии
19. Пробелы
20. Запятые
21. Точка с запятой
22. Приведение типов
23. Соглашение об именовании
24. Аксессоры
25. События
26. jQuery
27. Поддержка ECMAScript 5
28. Возможности ECMAScript 6+ (ES 2015+)
29. Стандартная библиотека
30. Тестирование
31. Производительность
32. Ресурсы
33. В реальной жизни
34. Переводы
35. Пообщаться с разработчиками Airbnb
36. Участники перевода
37. Лицензия
38. Поправки

Типы

• 1.1 Простые типы: Когда вы взаимодействуете с простым типом, вы напрямую работаете с его значением.

  • string
  • number
  • boolean
  • null
  • undefined
  • symbol
  • bigint

  const foo = 1;
  let bar = foo;
  
  bar = 9;
  
  console.log(foo, bar); // => 1, 9

  • Symbol и BigInt не могут быть полностью заполифиллены, поэтому они не должны использоваться, если разработка ведётся для браузеров или других сред, которые не поддерживают их нативно.

• 1.2 Сложные типы: Когда вы взаимодействуете со сложным типом, вы работаете со ссылкой на его значение.

  • object
  • array
  • function

  const foo = [1, 2];
  const bar = foo;
  
  bar[0] = 9;
  
  console.log(foo[0], bar[0]); // => 9, 9

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

Объявление переменных

• 2.1 Используйте const для объявления переменных; избегайте var. eslint: prefer-const, no-const-assign

  Почему? Это гарантирует, что вы не сможете переопределять значения, т.к. это может привести к ошибкам и к усложнению понимания кода.

  // плохо
  var a = 1;
  var b = 2;
  
  // хорошо
  const a = 1;
  const b = 2;

• 2.2 Если вам необходимо переопределять значения, то используйте let вместо var. eslint: no-var

  Почему? Область видимости let — блок, у var — функция.

  // плохо
  var count = 1;
  if (true) {
    count += 1;
  }
  
  // хорошо, используйте let.
  let count = 1;
  if (true) {
    count += 1;
  }

• 2.3 Помните, что у let и const блочная область видимости, в то время как var имеет функциональную область видимости.

  // const и let существуют только в том блоке, в котором они определены.
  {
    let a = 1;
    const b = 1;
    var c = 1;
  }
  console.log(a); // ReferenceError
  console.log(b); // ReferenceError
  console.log(c); // 1

  В приведённом выше коде вы можете видеть, что ссылки на a и b приведут к ошибке ReferenceError, в то время как c содержит число. Это связано с тем, что a и b имеют блочную область видимости, в то время как у c функциональная.

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

Объекты

• 3.1 Для создания объекта используйте литеральную нотацию. eslint: no-new-object

  // плохо
  const item = new Object();
  
  // хорошо
  const item = {};

• 3.2 Используйте вычисляемые имена свойств, когда создаёте объекты с динамическими именами свойств.

  Почему? Они позволяют вам определить все свойства объекта в одном месте.

  function getKey(k) {
    return `a key named ${k}`;
  }
  
  // плохо
  const obj = {
    id: 5,
    name: 'San Francisco',
  };
  obj[getKey('enabled')] = true;
  
  // хорошо
  const obj = {
    id: 5,
    name: 'San Francisco',
    [getKey('enabled')]: true,
  };

• 3.3 Используйте сокращённую запись метода объекта. eslint: object-shorthand

  // плохо
  const atom = {
    value: 1,
  
    addValue: function (value) {
      return atom.value + value;
    },
  };
  
  // хорошо
  const atom = {
    value: 1,
  
    addValue(value) {
      return atom.value + value;
    },
  };

• 3.4 Используйте сокращённую запись свойств объекта. eslint: object-shorthand

  Почему? Это короче и понятнее.

  const lukeSkywalker = 'Luke Skywalker';
  
  // плохо
  const obj = {
    lukeSkywalker: lukeSkywalker,
  };
  
  // хорошо
  const obj = {
    lukeSkywalker,
  };

• 3.5 Группируйте ваши сокращённые записи свойств в начале объявления объекта.

  Почему? Так легче сказать, какие свойства используют сокращённую запись.

  const anakinSkywalker = 'Anakin Skywalker';
  const lukeSkywalker = 'Luke Skywalker';
  
  // плохо
  const obj = {
    episodeOne: 1,
    twoJediWalkIntoACantina: 2,
    lukeSkywalker,
    episodeThree: 3,
    mayTheFourth: 4,
    anakinSkywalker,
  };
  
  // хорошо
  const obj = {
    lukeSkywalker,
    anakinSkywalker,
    episodeOne: 1,
    twoJediWalkIntoACantina: 2,
    episodeThree: 3,
    mayTheFourth: 4,
  };

• 3.6 Только недопустимые идентификаторы помещаются в кавычки. eslint: quote-props

  Почему? На наш взгляд, такой код легче читать. Это улучшает подсветку синтаксиса, а также облегчает оптимизацию для многих JS-движков.

  // плохо
  const bad = {
    'foo': 3,
    'bar': 4,
    'data-blah': 5,
  };
  
  // хорошо
  const good = {
    foo: 3,
    bar: 4,
    'data-blah': 5,
  };

• 3.7 Не вызывайте напрямую методы Object.prototype, такие как hasOwnProperty, propertyIsEnumerable, и isPrototypeOf. eslint: no-prototype-builtins

  Почему? Эти методы могут быть переопределены в свойствах объекта, который мы проверяем { hasOwnProperty: false }, или этот объект может быть null (Object.create(null)).

  // плохо
  console.log(object.hasOwnProperty(key));
  
  // хорошо
  console.log(Object.prototype.hasOwnProperty.call(object, key));
  
  // отлично
  const has = Object.prototype.hasOwnProperty; // Кэшируем запрос в рамках модуля.
  console.log(has.call(object, key));
  /* или */
  import has from 'has'; // https://www.npmjs.com/package/has
  console.log(has(object, key));

• 3.8 Используйте синтаксис расширения вместо Object.assign для поверхностного копирования объектов. Используйте параметр оставшихся свойств, чтобы получить новый объект с некоторыми опущенными свойствами. eslint: prefer-object-spread

  // очень плохо
  const original = { a: 1, b: 2 };
  const copy = Object.assign(original, { c: 3 }); // эта переменная изменяет `original` ಠ_ಠ
  delete copy.a; // если сделать так
  
  // плохо
  const original = { a: 1, b: 2 };
  const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
  
  // хорошо
  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 }

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

Массивы

• 4.1 Для создания массива используйте литеральную нотацию. eslint: no-array-constructor

  // плохо
  const items = new Array();
  
  // хорошо
  const items = [];

• 4.2 Для добавления элемента в массив используйте Array#push вместо прямого присваивания.

  const someStack = [];
  
  // плохо
  someStack[someStack.length] = 'abracadabra';
  
  // хорошо
  someStack.push('abracadabra');

• 4.3 Для копирования массивов используйте оператор расширения ....

  // плохо
  const len = items.length;
  const itemsCopy = [];
  let i;
  
  for (i = 0; i < len; i += 1) {
    itemsCopy[i] = items[i];
  }
  
  // хорошо
  const itemsCopy = [...items];

• 4.4 Для преобразования итерируемого объекта в массив используйте оператор расширения ... вместо Array.from.

  const foo = document.querySelectorAll('.foo');
  
  // хорошо
  const nodes = Array.from(foo);
  
  // отлично
  const nodes = [...foo];

• 4.5 Используйте Array.from для преобразования массивоподобного объекта в массив.

  const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };
  
  // плохо
  const arr = Array.prototype.slice.call(arrLike);
  
  // хорошо
  const arr = Array.from(arrLike);

• 4.6 Используйте Array.from вместо оператора расширения ... для маппинга итерируемых объектов, это позволяет избежать создания промежуточного массива.

  // плохо
  const baz = [...foo].map(bar);
  
  // хорошо
  const baz = Array.from(foo, bar);

• 4.7 Используйте операторы return внутри функций обратного вызова в методах массива. Можно опустить return, когда тело функции состоит из одной инструкции, возвращающей выражение без побочных эффектов. 8.2. eslint: array-callback-return

  // хорошо
  [1, 2, 3].map((x) => {
    const y = x + 1;
    return x * y;
  });
  
  // хорошо
  [1, 2, 3].map((x) => x + 1);
  
  // плохо - нет возвращаемого значения, следовательно, `acc` становится `undefined` после первой итерации
  [[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
    const flatten = acc.concat(item);
  });
  
  // хорошо
  [[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
    const flatten = acc.concat(item);
    return flatten;
  });
  
  // плохо
  inbox.filter((msg) => {
    const { subject, author } = msg;
    if (subject === 'Mockingbird') {
      return author === 'Harper Lee';
    } else {
      return false;
    }
  });
  
  // хорошо
  inbox.filter((msg) => {
    const { subject, author } = msg;
    if (subject === 'Mockingbird') {
      return author === 'Harper Lee';
    }
  
    return false;
  });

• 4.8 Если массив располагается на нескольких строках, то используйте разрывы строк после открытия и перед закрытием скобок.

  // плохо
  const arr = [
    [0, 1], [2, 3], [4, 5],
  ];
  
  const objectInArray = [{
    id: 1,
  }, {
    id: 2,
  }];
  
  const numberInArray = [
    1, 2,
  ];
  
  // хорошо
  const arr = [[0, 1], [2, 3], [4, 5]];
  
  const objectInArray = [
    {
      id: 1,
    },
    {
      id: 2,
    },
  ];
  
  const numberInArray = [
    1,
    2,
  ];

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

Деструктуризация