Home

Awesome

Стиль написання JavaScript від компанії Airbnb

Найбільш обгрунтований підхід до JavaScript

Downloads Downloads Gitter

Інші керівництва по стилю

Зміст

  1. Типи
  2. Посилання
  3. Об'єкти
  4. Масиви
  5. Деструктурування
  6. Рядки
  7. Функції
  8. Arrow-функції
  9. Класи та Конструктори
  10. Модулі
  11. Ітератори та Генератори
  12. Властивості
  13. Змінні
  14. Підняття (Hoisting)
  15. Оператори порівняння і рівності
  16. Блоки
  17. Коментарі
  18. Пробіли
  19. Коми
  20. Крапка з комою
  21. Приведення типів та Примушення (Coercion)
  22. Угоди про іменування
  23. Аксессори
  24. Події
  25. jQuery
  26. ECMAScript 5 сумісність
  27. ECMAScript 6+ (ES 2015+) стилі
  28. Тестування
  29. Продуктивність
  30. Ресурси
  31. В реальному Світі
  32. Переклад
  33. Керівництво зі стилю написання JavaScript
  34. Поговоріть з нами про JavaScript
  35. Автори
  36. License

Типи

<a name="types--primitives"></a><a name="1.1"></a>

<a name="types--complex"></a><a name="1.2"></a>

⬆ вверх

Посилання

<a name="references--prefer-const"></a><a name="2.1"></a>

<a name="references--disallow-var"></a><a name="2.2"></a>

<a name="references--block-scope"></a><a name="2.3"></a>

⬆ вверх

Об'єкти

<a name="objects--no-new"></a><a name="3.1"></a>

<a name="es6-computed-properties"></a><a name="3.4"></a>

<a name="es6-object-shorthand"></a><a name="3.5"></a>

<a name="es6-object-concise"></a><a name="3.6"></a>

<a name="objects--grouped-shorthand"></a><a name="3.7"></a>

<a name="objects--quoted-props"></a><a name="3.8"></a>

Чому? В загальному, ми вважаємо, що так суб'єктивно легше читати. Це покращує підсвітку синтаксису, а також більш легко оптимізується багатьма JS двигунами.

// погано
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};

// добре
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};

<a name="objects--prototype-builtins"></a>

Чому? Ці методи можуть бути переоприділені на поточному об'єкті, наприклад: { hasOwnProperty: false }, або ж поточний об'єкт може не мати прототипа (Object.create(null)).

// погано
console.log(object.hasOwnProperty(key));

// добре
console.log(Object.prototype.hasOwnProperty.call(object, key));

// найкраще
const has = Object.prototype.hasOwnProperty; // закешовуємо результати пошуку у скоупі модуля.
/* або */
import has from 'has';
…
console.log(has.call(object, key));

<a name="objects--rest-spread"></a>

// дуже погано
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 }

⬆ вверх

Масиви

<a name="arrays--literals"></a><a name="4.1"></a>

<a name="arrays--push"></a><a name="4.2"></a>

<a name="es6-array-spreads"></a><a name="4.3"></a>

<a name="arrays--from"></a><a name="4.4"></a>

<a name="arrays--callback-return"></a><a name="4.5"></a>

⬆ вверх

Деструктурування

<a name="destructuring--object"></a><a name="5.1"></a>

<a name="destructuring--array"></a><a name="5.2"></a>

<a name="destructuring--object-over-array"></a><a name="5.3"></a>

⬆ вверх

Рядки

<a name="strings--quotes"></a><a name="6.1"></a>

<a name="strings--line-length"></a><a name="6.2"></a>

<a name="es6-template-literals"></a><a name="6.4"></a>

<a name="strings--eval"></a><a name="6.5"></a>

<a name="strings--escaping"></a>

⬆ вверх

Функції

<a name="functions--declarations"></a><a name="7.1"></a>

<a name="functions--iife"></a><a name="7.2"></a>

<a name="functions--in-blocks"></a><a name="7.3"></a>

<a name="functions--note-on-blocks"></a><a name="7.4"></a>

<a name="functions--arguments-shadow"></a><a name="7.5"></a>

<a name="es6-rest"></a><a name="7.6"></a>

<a name="es6-default-parameters"></a><a name="7.7"></a>

<a name="functions--default-side-effects"></a><a name="7.8"></a>

<a name="functions--defaults-last"></a><a name="7.9"></a>

<a name="functions--constructor"></a><a name="7.10"></a>

<a name="functions--signature-spacing"></a><a name="7.11"></a>

<a name="functions--mutate-params"></a><a name="7.12"></a>

<a name="functions--reassign-params"></a><a name="7.13"></a>

<a name="functions--spread-vs-apply"></a><a name="7.14"></a>

<a name="functions--signature-invocation-indentation"></a>

⬆ вверх

Arrow-функції

<a name="arrows--use-them"></a><a name="8.1"></a>

<a name="arrows--implicit-return"></a><a name="8.2"></a>

<a name="arrows--paren-wrap"></a><a name="8.3"></a>

<a name="arrows--one-arg-parens"></a><a name="8.4"></a>

<a name="arrows--confusing"></a><a name="8.5"></a>

⬆ вверх

Класи та Конструктори

<a name="constructors--use-class"></a><a name="9.1"></a>

<a name="constructors--extends"></a><a name="9.2"></a>

<a name="constructors--chaining"></a><a name="9.3"></a>

<a name="constructors--tostring"></a><a name="9.4"></a>

<a name="constructors--no-useless"></a><a name="9.5"></a>

<a name="classes--no-duplicate-members"></a>

⬆ вверх

Модулі

<a name="modules--use-them"></a><a name="10.1"></a>

<a name="modules--no-wildcard"></a><a name="10.2"></a>

<a name="modules--no-export-from-import"></a><a name="10.3"></a>

<a name="modules--no-duplicate-imports"></a>

<a name="modules--no-mutable-exports"></a>

<a name="modules--prefer-default-export"></a>

<a name="modules--imports-first"></a>

<a name="modules--multiline-imports-over-newlines"></a>

<a name="modules--no-webpack-loader-syntax"></a>

⬆ вверх

Ітератори та генератори

<a name="iterators--nope"></a><a name="11.1"></a>

<a name="generators--nope"></a><a name="11.2"></a>

<a name="generators--spacing"></a>

⬆ вверх

Властивості

<a name="properties--dot"></a><a name="12.1"></a>

<a name="properties--bracket"></a><a name="12.2"></a>

⬆ вверх

Змінні

<a name="variables--const"></a><a name="13.1"></a>

<a name="variables--one-const"></a><a name="13.2"></a>

<a name="variables--const-let-group"></a><a name="13.3"></a>

<a name="variables--define-where-used"></a><a name="13.4"></a>

<a name="variables--no-chain-assignment"></a><a name="13.5"></a>

<a name="variables--unary-increment-decrement"></a><a name="13.6"></a>

⬆ вверх

Підняття (Hoisting)

<a name="hoisting--about"></a><a name="14.1"></a>

<a name="hoisting--anon-expressions"></a><a name="14.2"></a>

<a name="hoisting--named-expresions"></a><a name="14.3"></a>

<a name="hoisting--declarations"></a><a name="14.4"></a>

⬆ вверх

Оператори порівняння та рівності

<a name="comparison--eqeqeq"></a><a name="15.1"></a>

<a name="comparison--if"></a><a name="15.2"></a>

<a name="comparison--shortcuts"></a><a name="15.3"></a>

<a name="comparison--moreinfo"></a><a name="15.4"></a>

<a name="comparison--switch-blocks"></a><a name="15.5"></a>

Чому? Лексичні проголошення видимі у всьому switch блоці, але вони ініціалізуються лише тоді, коли привласнюються, а це стається лише тоді, коли спрацьювує case. Це спричиняє проблеми, коли кілька case випадків намагаються визначити одну й ту саму річ.

eslint rules: no-case-declarations.

```javascript
// погано
switch (foo) {
  case 1:
    let x = 1;
    break;
  case 2:
    const y = 2;
    break;
  case 3:
    function f() {}
    break;
  default:
    class C {}
}

// добре
switch (foo) {
  case 1: {
    let x = 1;
    break;
  }
  case 2: {
    const y = 2;
    break;
  }
  case 3: {
    function f() {}
    break;
  }
  case 4:
    bar();
    break;
  default: {
    class C {}
  }
}
```

<a name="comparison--nested-ternaries"></a><a name="15.6"></a>

<a name="comparison--unneeded-ternary"></a><a name="15.7"></a>

⬆ вверх

Блоки

<a name="blocks--braces"></a><a name="16.1"></a>

<a name="blocks--cuddled-elses"></a><a name="16.2"></a>

⬆ вверх

Коментарі

<a name="comments--multiline"></a><a name="17.1"></a>

<a name="comments--singleline"></a><a name="17.2"></a>

<a name="comments--actionitems"></a><a name="17.3"></a>

<a name="comments--fixme"></a><a name="17.4"></a>

<a name="comments--todo"></a><a name="17.5"></a>

⬆ вверх

Пробіли

<a name="whitespace--spaces"></a><a name="18.1"></a>

<a name="whitespace--before-blocks"></a><a name="18.2"></a>

<a name="whitespace--around-keywords"></a><a name="18.3"></a>

<a name="whitespace--infix-ops"></a><a name="18.4"></a>

<a name="whitespace--newline-at-end"></a><a name="18.5"></a>

<a name="whitespace--chains"></a><a name="18.6"></a>

<a name="whitespace--after-blocks"></a><a name="18.7"></a>

<a name="whitespace--padded-blocks"></a><a name="18.8"></a>

<a name="whitespace--in-parens"></a><a name="18.9"></a>

<a name="whitespace--in-brackets"></a><a name="18.10"></a>

<a name="whitespace--in-braces"></a><a name="18.11"></a>

<a name="whitespace--max-len"></a><a name="18.12"></a>

⬆ вверх

Коми

<a name="commas--leading-trailing"></a><a name="19.1"></a>

<a name="commas--dangling"></a><a name="19.2"></a>

⬆ вверх

Крапка з комою

<a name="semicolons--required"></a><a name="20.1"></a>

⬆ вверх

Приведення типів та Примушення

<a name="coercion--explicit"></a><a name="21.1"></a>

<a name="coercion--strings"></a><a name="21.2"></a>

<a name="coercion--numbers"></a><a name="21.3"></a>

<a name="coercion--comment-deviations"></a><a name="21.4"></a>

<a name="coercion--bitwise"></a><a name="21.5"></a>

<a name="coercion--booleans"></a><a name="21.6"></a>

⬆ вверх

Угоди про іменування

<a name="naming--descriptive"></a><a name="22.1"></a>

<a name="naming--camelCase"></a><a name="22.2"></a>

<a name="naming--PascalCase"></a><a name="22.3"></a>

<a name="naming--leading-underscore"></a><a name="22.4"></a>

<a name="naming--self-this"></a><a name="22.5"></a>

<a name="naming--filename-matches-export"></a><a name="22.6"></a>

<a name="naming--camelCase-default-export"></a><a name="22.7"></a>

<a name="naming--PascalCase-singleton"></a><a name="22.8"></a>

<a name="naming--Acronyms-and-Initialisms"></a>

⬆ вверх

Аксессори

<a name="accessors--not-required"></a><a name="23.1"></a>

<a name="accessors--no-getters-setters"></a><a name="23.2"></a>

<a name="accessors--boolean-prefix"></a><a name="23.3"></a>

<a name="accessors--consistent"></a><a name="23.4"></a>

⬆ вверх

Події

<a name="events--hash"></a><a name="24.1"></a>

⬆ вверх

jQuery

<a name="jquery--dollar-prefix"></a><a name="25.1"></a>

<a name="jquery--cache"></a><a name="25.2"></a>

<a name="jquery--queries"></a><a name="25.3"></a>

<a name="jquery--find"></a><a name="25.4"></a>

⬆ вверх

ECMAScript 5 сумісність

<a name="es5-compat--kangax"></a><a name="26.1"></a>

⬆ вверх

<a name="ecmascript-6-styles"></a>

ECMAScript 6+ (ES 2015+) стилі

<a name="es6-styles"></a><a name="27.1"></a>

  1. Arrow Functions
  2. Класи та Конструктори
  3. Скорочення для методіва об'єкта
  4. Скорочення об'єкта
  5. Вираховані властивості об'єкта
  6. Строчні шаблони
  7. Destructuring
  8. Параметри за замовчуаванням
  9. Rest
  10. spreads оператор масива
  11. Let та Const
  12. Ітератори та Генератори
  13. Модулі

<a name="tc39-proposals"></a>

⬆ вверх

Тестування

<a name="testing--yup"></a><a name="28.1"></a>

<a name="testing--for-real"></a><a name="28.2"></a>

⬆ вверх

Продуктивність

⬆ вверх

Ресурси

Вивчення ES6

Прочитайте це

Інструменти

Інші керівництва

Інші стилі

Подальше читання

Книжки

Блоги

Подкасти

⬆ вверх

В реальному Світі

Це перелік організацій які використовують це керівництво. Надішліть нам pull request і ми додамо вас до цього списку.

⬆ вверх

Translation

This style guide is also available in other languages:

The JavaScript Style Guide Guide

Chat With Us About JavaScript

Contributors

License

(The MIT License)

Copyright (c) 2014-2016 Airbnb

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

⬆ вверх

Amendments

We encourage you to fork this guide and change the rules to fit your team's style guide. Below, you may list some amendments to the style guide. This allows you to periodically update your style guide without having to deal with merge conflicts.

};