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

Правила оформления кода на JavaScript / jQuery Style Guide

Имена переменных и функций - student2.ru

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

lОтступ с помощью табуляций.

lНет пробелов в конце строк.

lДлина строк должна быть не больше 80 знаков, и не должна превышать 100 (табуляция считается за 4 пробела).

lПри переносе строк, отступ не обязательно должен быть равен 2, если вам надо, например, перенести на следующую строку аргументы функции, то выровнить их можно по тому месте где стоит первый аргумент.

lif/else/for/while/try всегда имеют фигурные скобки и всегда являются многострочными.

lУнарные операторы (в т.ч. !, ++) должны выделяться пробелами.

lВсе , и ; не должны выделяться пробелами.

lВсе ; использующиеся в качестве окончания оператора должны быть в конце строки.

lВсе : после имени свойства в объекте должны выделяться одним пробелом с правой стороны.

lТернарный оператор ? и : должен иметь пробелы с обеих сторон.

lНет пробелов в пустых конструкторах (в т.ч., {}, [], fn())

lНовая строка в конце каждого файла.

lПробел между аргументами и выражением

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

Плохой код

// Bad

if(condition) doSomething();

while(!condition) iterating++;

for(var i=0;i<100 data-blogger-escaped-array="" data-blogger-escaped-code="" data-blogger-escaped-i="" data-blogger-escaped-object="" data-blogger-escaped-somefn="">

Хороший код

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() {

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

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

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

// Bad

var foo = true;

var bar = false;

var a;

var b;

var c;

// Good

var a, b, c,

foo = true,

bar = false;

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

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

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

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

var foo = "";

var fooName = "";

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

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

// Bad

var html = "The sum of " + a + " and " + b + " plus " + c

+ " is " + (a + b + c);

// Good

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" );

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

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

// Bad

var map = { ready: 9,

when: 4, "you are": 15 };

// Good

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

// Good as well

var map = {

ready: 9,

when: 4,

"you are": 15

};

Используйте JSHint

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

{

"camelcase" : true,

"indent": 2,

"undef": true,

"quotmark": "single",

"maxlen": 80,

"trailing": true,

"curly": true

}

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

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

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