Правильные практики JavaScript

Код написанный в одном стиле, имеет много преимуществ: меньше мелких ошибок, многие ошибки легко обнаружить почти сразу, другие же можно легко отладить еще на стадии разработки. Новым же программистам не придется тратить лишнее время на изучение вашего кода (это не значит что им не придется разбираться в самом коде, а значит лишь что его легче будет читать) и им будет проще влиться в проект. Качество кода станет только лучше, если вся команда будет придерживаться заранее определенного стиля. Это безусловно стоит того, чтобы потрать немного времени на выработку общих правил.

Длина строки

• Отступ с помощью табуляций.
• Нет пробелов в конце строк.
• Длина строк должна быть не больше 80 знаков, и не должна превышать 100 (табуляция считается за 4 пробела).
• При переносе строк, отступ не обязательно должен быть равен 2, если вам надо, например, перенести на следующую строку аргументы функции, то выровнить их можно по тому месте где стоит первый аргумент.
• if/else/for/while/try всегда имеют фигурные скобки и всегда являются многострочными.
• Унарные операторы (в т.ч. !, ++) должны выделяться пробелами.
• Все , и ; не должны выделяться пробелами.
• Все ; использующиеся в качестве окончания оператора должны быть в конце строки.
• Все : после имени свойства в объекте должны выделяться одним пробелом с правой стороны.
• Тернарный оператор ? и : должен иметь пробелы с обеих сторон.
• Нет пробелов в пустых конструкторах (в т.ч., {}, [], fn())
• Новая строка в конце каждого файла.
• Пробел между аргументами и выражением

 for ( i = 0; i < length; i++ ) {

Плохой код

if(condition) doSomething();
while(!condition) iterating++;
for(var i=0;i<100;i++) {
    // ...
}

Хороший код

var i = 0;
 
if ( condition ) {
    doSomething();
} else if ( otherCondition ) {
    somethingElse();
} else {
    otherThing();
}
 
while ( !condition ) {
    iterating++;
}
 
for ( ; i < 100; i++ ) {
    object[ array[ i ] ] = someFn( i );
}
 
try {
    // Expressions
} catch ( e ) {
    // Expressions
}

Заканчивайте инструкцию точкой с запятой

Используйте точку с запятой. Не следует полагаться на ASI (Automatic SemicolonInsertion).

Комментарии

Комментарии пишутся в начале строки с прописной буквы, после пробела. Для многострочных комментариев на новой строке пробел не нужен.

// Пример однострочного комментария:
// We need an explicit "bar", because later in the code foo is checked.
var foo = "bar";

// Пример многострочного комментария:
/*
Four score and seven—pause—minutes ago...
*/

// Строчные комментарии допустимы когда не используется один из параметров:
function foo( types, selector, data, fn, /* INTERNAL */ one ) {
    // Do stuff
}

Не пишите API документацию в комментариях. API документация должна находится в отдельном репозитории.

Кавычки

var double = "I am wrapped in double quotes";

Строки содержащие html разметку должны использовать двойные кавычки для строки, и одинарную кавычку для атрибуции:

var html = "<div id='my-id'></div>";

Скобки

Ставьте открывающую скобку на той же строке:

function thisIsBlock() {

Скобки следует использовать всегда, даже в ситуации, когда их можно опустить.

Декларирование переменных

Задавайте переменные одного типа в одну строку. Несколько переменных, разделяйте запятыми в конце строки.

Плохой код

var foo = true;
var bar = false;
var a;
var b;
var c;

Хороший код

var a, b, c,
    foo = true,
    bar = false;

Глобальные переменные

В одном проекте нельзя содержать более одной глобальной переменной. Глобальные переменные сложнее отлаживать, и они могут стать причиной нетривиальных проблем, когда двум проектам надо интегрироваться.

Имена переменных и функций

Использовать верблюжий стиль (camelCase), где первая буква пишется в нижнем регистре. Описывать переменные как можно подробнее. Исключения составляют лишь итераторы, например, индекс обозначать i. Конструкторы не должны начинаться с прописной буквы.

Первое слово с маленькой буквы, все последующие с большой:

var foo = "";
var fooName = "";

Многострочные операции

Когда операции становятся слишком большими и уже не вмещаются в одну строку, следует использовать разрыв строк после оператора.

Плохой код

var html = "The sum of " + a + " and " + b + " plus " + c
    + " is " + (a + b + c);

Хороший код

var html = "The sum of " + a + " and " + b + " plus " + c +
    " is " + (a + b + c);

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

var firstCondition( foo ) && secondCondition( bar ) ?
    doStuff( foo, bar ) :
    doOtherStuff( foo, bar );

Если проверка слишком длинная и не помещается в одну линию, следует последовательно выделить проверку в отдельные блоки:

if ( fistCondition() && secondCondition() && thirdCondition() ) {
    doStuff();
}

Массивы и вызов функций

Всегда добавляйте пробелы вокруг элементов и аргументов:

array = [ "*" ];
array = [ a, b ];
foo( arg );
foo( "string", object );
foo( options, object[ property ] );
foo( node, "property", 2 );

Исключение:

// Function with a callback, object, or array as the sole argument:
// No space on either side of the argument
foo({
    a: "alpha",
    b: "beta"
});
 
// Function with a callback, object, or array as the first argument:
// No space before the first argument
foo(function() {
    // Do stuff
}, options );
 
// Function with a callback, object, or array as the last argument:
// No space after after the last argument
foo( data, function() {
    // Do stuff
});

Цепной вызов функций

Когда цепной вызов функций не помещается в одну линию, следует каждый вызов выделять отдельно на новой строке. Если метод работает с контекстом — делать табуляцию:

elements
    .addClass( "foo" )
    .children()
        .html( "hello" )
    .end()
    .appendTo( "body" );

Объекты и классы

Объектная декларация может описываться одной строкой, если она коротка (не забывать про лимит ширины). В противном случае, следует писать по одному свойству на каждой строке. Имена свойств нужны заключать в кавычки, если они используют зарезервированные слова или включают спецзнаки.

Плохой код

var map = { ready: 9,
    when: 4, "you are": 15 };

Хороший код

var map = { ready: 9, when: 4, "you are": 15 };
 
// или
var map = {
    ready: 9,
    when: 4,
    "you are": 15
};

Используйте линтер

JSHint — это анализатор кода, который укажет вам на ошибки в коде. Он совместим со многими широко используемыми текстовыми редакторами. Так же это хороший способ поддерживать стилистическое единство и целостность кода. Различные способы использования можно найти в документации. Ниже наш пример .jshintrc файла, который следует всем данным выше рекомендациям. Поместите этот файл а корневую папку вашего проекта, и если у вас установлен JSHint плагин, то ваш редактор теперь будут проверять код в соответствии с правилами которые вы определили.

{
  "camelcase" : true,
  "indent": 2,
  "undef": true,
  "quotmark": "single",
  "maxlen": 80,
  "trailing": true,
  "curly": true
}

Во все файлы, которые обрабатываются браузером добавляем:

/* jshint browser:true, jquery:true */

Во все типы JS файлов, так же лучше добавить строгий режим JS:

"use strict";

Это повлияет и на JSHint и на обработчика JavaScript в целом, который станет менее терпимым к ошибкам, но будет работать быстрее.

Node правила

.nodeName должен всегда использовать поддерживаемые .tagName. .nodeType должен всегда использовать определять классификацию node (не .nodeName).

Проверки

Строгое равенство (===) предпочтительней абстрактной (==). Исключая проверки на undefined и null.

// Check for both undefined and null values, for some important reason.
undefOrNull == null;

String

typeof object === "string"

Number

typeof object === "number"

Boolean

typeof object === "boolean"

Object

typeof object === "object"

Plain Object

jQuery.isPlainObject( object )

Function

jQuery.isFunction( object )

Array

jQuery.isArray( object )

Element

object.nodeType

null или undefined

object === null

Глобальные переменные undefined

typeof variable === "undefined"

Локальные переменные undefined

variable === undefined

Свойства объекта

object.prop === undefined