У нас, как и у всех, изначально в разработке использовались стандарты написания кода, но на деле они ограничивались примерно таким:
— В кэмелкейсе пишем?
— Да, как обычно, в кэмелкейсе
… прошло две недели…
— Мы ж в кэмелкейсе договаривались!!!
В нашем случае не было разве, что последней фразы.
Уже давно хотелось как-то это систематизировать, но никак не доходили руки до выбора между стилями от jQuery, Google, ideomatic.js и Crockford.
Когда месяц с небольшим назад в trending гитхаба попало руководство от AirBnB, оно тут же попалось нам на глаза…
А неделю назад мы его перевели, в первую очередь для собственных нужд, но не поделиться с сообществом не могли.
- Оригинал: https://github.com/airbnb/javascript
- Перевод: https://github.com/uprock/javascript
Прочитать крайне советую как минимум всем начинающим js-разработчикам.
Чем оно так отличается от других руководств, и чем оно так приглянулось нам?
Дело в том, что оно не столько указывает на то, как стилистически оформлять код, сколько рассказывает, как нужно грамотно писать на JavaScript. Это не только список указаний для JSLint, но платформа для того, чтобы начать писать хорошо: этот текст, который можно вдумчиво прочитать за час, дает стажерам больше понимания JavaScript, чем день собственных проб и ошибок и вопросов старшим товарищам.
Относительно оформления — в этом руководстве используются «популярные» выборы.
Примеры:
табуляция в 2 пробела используется, так же в Google, npm, Node.js, Idiomatic
Всегда использовать точку с запятой, как в Google, Node.js, Crockford
Объявление переменных с «висячими» запятыми в одном var, как в Idiomatic, jQuery
Что интересно тут указывается даже подобный момент:
Объявляйте переменные, которым не присваивается значение, в конце. Это удобно, когда вам необходимо задать значение одной из этих переменных на базе уже присвоенных значений.
camelCase для переменных — как в Google, npm, Node, Idiomatic
При этом в этом гайде явно указывается:
Используйте camelCase для именования объектов, функций и переменных.
Используйте PascalCase для именования конструкторов классов.
Понятно и ясно объясняются некоторые моменты, например:
Дополнительная запятая в конце объектов: Нет. Она способна вызвать проблемы с IE6/7 и IE9 в режиме совместимости. В некоторых реализациях ES3 запятая в конце массива увеличивает его длину на 1, что может вызвать проблемы. Этот вопрос был прояснен только в ES5 (оригинал):
Редакция ECMAScript 5 однозначно устанавливает факт, что запятая в конце ArrayInitialiser не должна увеличивать длину массива. Это несемантическое изменение от Редакции ECMAScript 3, но некоторые реализации до этого некорректно разрешали этот вопрос.
Наглядно объясняются механизмы работы «всплытия» объявлений переменных и функций внутри области видимости.
Объявление анонимной функции поднимает к верху области видимости саму переменную, но не ее значение.
Именованные функции поднимают на верх области видимости переменную, но не ее значение. Имя функции при этом недоступно в области видимости переменной и доступно только изнутри.
Объявления функции поднимают на верх текущей области видимости и имя, и свое значение.
Каждый пример понятно и наглядно иллюстрирован тестовым блоком кода, очень многие вещи, выбранные из соображений быстродействия или особенностей работы, сопровождаются ссылками на jsPerf, спецификацию ECMAScript (для тех недоверчивых зануд, кому недостаточно простых объяснений) или отдельные весьма интересные статьи по данной тематике.
В общем — как минимум это весьма интересное чтиво, и если вы давно собирались формализировать стилистику написания кода — сейчас самое время.
В комплекте идет набор ссылок на другие основные гайды, список команд, которые уже используют данный стиль написания кода, сайты, которые стоит почитывать и еще много полезных ссылок, и самое главное — конфигурация для JSLint в Sublime.
Вот краткий пересказ содержимого для самых занятых:
- Всегда использовать краткий синтаксис для создания объектов и массивов;
- Для строк использовать одиночные кавычки, максимальная длина строки — 80 символов, перенос через +;
- Все объявления переменных (и функций) в начале блока, через запятую и с одной var на всю функци. Объявление функции (не присваивание) недопустимо в условных блоках;
- Переменные без присваивания значения идут в конце объявления переменных;
- Доступ к свойствам и методам объекта всегда по возможности через точку, запрос вроде user['get'] под запретом (если это не требуется для чего-то особого в коде);
- Всегда проверять строгое равенство и использовать приведение типов;
- Фигурные скобки только для многострочных блоков кода. Если идет один оператор с новой строки — его тоже нужно обернуть в {};
- Многострочные комментарии всегда через /** */, использовать JSDoc;
- Однострочные комментарии только через //, всегда предваряют описываемое, перед ними ставится одна пустая строка;
- Табуляция — два пробела, перез открывающей скобкой всегда один пробел;
- Использовать логические отступы в цепочках вызовов, каждый вызов на новой строке. Так, в jQuery, например, оступ ставится перед и после каждой смены целевого блока (.find, .closest, .children и так далее);
- Точки с запятой — всегда, где это необходимо;
- Приведение типов по возможности в начале операции, для чисел всегда использовать parseInt или Number. Побитовые операции для приведения допустимы ради быстродействия, каждую такую операцию нужно комментировать;
- Все функции именуются, camelCase для всех переменных и функций, PascalCase для конструкторов. У приватных методов и свойств ставим вначале "_"
Для ссылки на this используем _this; - Универсальные ассессоры не используются, геттеры и сеттеры назначаются для каждого свойства или делаются общие .get и .set.
Замена прототипа — зло, прототипы можно только расширять; - В событие всегда передается в качестве объект, чтобы его можно было расширить в процессе всплытия;
- jQuery-переменным задается префикс $;
От себя мы добавили буквально несколько разъясняющих блоков и внесли одно изменение: в оригинале предлагалось использовать комментарии //FIXME и //TODO, но IDE и редакторы кода обычно подсвечивают только //TODO, так что вместо //FIXME предлагается использовать //TODO FIXME для более простой навигации по автоматически сгенерированному индексу.
На всякий случай дублирую ссылки:
- Оригинал: https://github.com/airbnb/javascript
- Перевод: https://github.com/uprock/javascript
Автор: Jabher
