Стиль написания кода на JavaScript для Uprock: Перевод и расширение Airbnb JavaScript Style Guide
Наиболее разумный подход к JavaScript
- Типы
- Объекты
- Массивы
- Строки
- Функции
- Свойства
- Переменные
- Области видимости
- Условные выражения и равенства
- Блоки кода
- Комментарии
- Пробелы
- Запятые
- Точки с запятой
- Приведение типов
- Соглашение об именовании
- Геттеры и сеттеры
- Конструкторы
- События
- Модули
- jQuery
- Совместимость с ES5
- Тестирование
- Быстродействие
- Ресурсы
- В реальном мире
- Переводы
- Лицензия
-
Простые типы: Когда вы взаимодействуете с простым типом, вы взаимодействуете непосредственно с его значением в памяти.
stringnumberbooleannullundefined
var foo = 1, bar = foo; bar = 9; console.log(foo, bar); // => 1, 9. foo не изменился
-
Сложные типы: Когда вы взаимодействуете со сложным типом, вы взаимодействуете с ссылкой на его значение в памяти.
objectarrayfunction
var foo = [1, 2], bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9.
-
Для создания объекта используйте фигурные скобки. Не создавайте объекты через конструктор
new Object.// плохо var item = new Object(); // хорошо var item = {};
-
Не используйте зарезервированные слова в качестве ключей объектов. Они не будут работать в IE8. Подробнее
// плохо var superman = { default: { clark: 'kent' }, private: true }; // хорошо var superman = { defaults: { clark: 'kent' }, hidden: true };
-
Не используйте ключевые слова (в том числе измененные). Вместо них используйте синонимы.
// плохо var superman = { class: 'alien' }; // плохо var superman = { klass: 'alien' }; // хорошо var superman = { type: 'alien' };
-
Для создания массива используйте квадратные скобки. Не создавайте массивы через конструктор
new Array.// плохо var items = new Array(); // хорошо var items = [];
-
Если вы не знаете длину массива, используйте Array::push.
var someStack = []; // плохо someStack[someStack.length] = 'abracadabra'; // хорошо someStack.push('abracadabra');
-
Если вам необходимо скопировать массив, используйте Array::slice. jsPerf
var len = items.length, itemsCopy = [], i; // плохо for (i = 0; i < len; i++) { itemsCopy[i] = items[i]; } // хорошо itemsCopy = items.slice();
-
Чтобы скопировать похожий по свойствам на массив объект (например, NodeList или Arguments), используйте Array::slice.
function trigger() { var args = Array.prototype.slice.call(arguments); ... }
-
Используйте одинарные кавычки
''для строк.// плохо var name = "Боб Дилан"; // хорошо var name = 'Боб Дилан'; // плохо var fullName = "Боб " + this.lastName; // хорошо var fullName = 'Дилан ' + this.lastName;
-
Строки длиннее 80 символов нужно разделять, выполняя перенос через конкатенацию строк.
-
Осторожно: строки с большим количеством конкатенаций могут отрицательно влиять на быстродействие. jsPerf и Обсуждение
// плохо var errorMessage = 'Эта сверхдлинная ошибка возникла из-за белой обезъяны. Не говори про обезъяну! Не слушай об обезьяне! Не думай об обезъяне!'; // плохо var errorMessage = 'Эта сверхдлинная ошибка возникла из-за белой обезъяны. \ Не говори про обезъяну! Не слушай об обезьяне! \ Не думай об обезъяне!'; // хорошо var errorMessage = 'Эта сверхдлинная ошибка возникла из-за белой обезъяны. ' + 'Не говори про обезъяну! Не слушай об обезьяне! ' + 'Не думай об обезъяне!';
-
Когда строка создается программным путем, используйте Array::join вместо объединения строк. В основном для IE: jsPerf.
var items, messages, length, i; messages = [{ state: 'success', message: 'Это работает.' },{ state: 'success', message: 'Это тоже.' },{ state: 'error', message: 'А я томат.' }]; length = messages.length; // плохо function inbox(messages) { items = '<ul>'; for (i = 0; i < length; i++) { items += '<li>' + messages[i].message + '</li>'; } return items + '</ul>'; } // хорошо function inbox(messages) { items = []; for (i = 0; i < length; i++) { items[i] = messages[i].message; } return '<ul><li>' + items.join('</li><li>') + '</li></ul>'; }
-
Объявление функций:
// объявление анонимной функции var anonymous = function() { return true; }; // объявление именованной функции var named = function named() { return true; }; // объявление функции, которая сразу же выполняется (замыкание) (function() { console.log('Если вы читаете это, вы открыли консоль.'); })();
-
Никогда не объявляйте функцию внутри блока кода — например в if, while, else и так далее. Единственное исключение — блок функции. Вместо этого присваивайте функцию уже объявленной через
varпеременной. Условное объявление функций работает, но в различных браузерах работает по-разному. -
Примечание ECMA-262 устанавливает понятие
блокакак списка операторов. Объявление функции (не путайте с присвоением функции переменной) не является оператором. Комментарий по этому вопросу в ECMA-262.// плохо if (currentUser) { function test() { console.log('Плохой мальчик.'); } } // хорошо var test; if (currentUser) { test = function test() { console.log('Молодец.'); }; }
-
Никогда не используйте аргумент функции
arguments, он будет более приоритетным над объектомarguments, который доступен без объявления для каждой функции.// плохо function nope(name, options, arguments) { // ...код... } // хорошо function yup(name, options, args) { // ...код... }
-
Используйте точечную нотацию для доступа к свойствам и методам.
var luke = { jedi: true, age: 28 }; // плохо var isJedi = luke['jedi']; // хорошо var isJedi = luke.jedi;
-
Используйте нотацию с
[], когда вы получаете свойство, имя для которого хранится в переменной.var luke = { jedi: true, age: 28 }; function getProp(prop) { return luke[prop]; } var isJedi = getProp('jedi');