Имена переменных и функций
Правила оформления кода на JavaScript / jQuery Style Guide
Код написанный в одном стиле, имеет много преимуществ: меньше мелких ошибок, многие ошибки легко обнаружить почти сразу, другие же можно легко отладить еще на стадии разработки. Новым же программистам не придется тратить лишнее время на изучение вашего кода (это не значит что им не придется разбираться в самом коде, а значит лишь что его легче будет читать) и им будет проще влиться в проект. Качество кода станет только лучше, если вся команда будет придерживаться заранее определенного стиля. Это безусловно стоит того, чтобы потрать немного времени на выработку общих правил.
Длина строки
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 файлов, так же лучше добавить:
"use strict";
Это повлияет и на JSHint и на обработчика JavaScript в целом, который станет менее терпимым к ошибкам, но будет работать быстрее.
DOM Node правила
.nodeName должен всегда использовать поддерживаемые .tagName.
.nodeType должен всегда использовать определять классификацию node (не .nodeName).
Равенства
Строгое равенство (===) предпочтительней абстрактной (==). Исключая проверки на undefined и null.
// Check for both undefined and null values, for some important reason.
undefOrNull == null;
Проверки
lString: typeof object === "string"
lNumber: typeof object === "number"
lBoolean: typeof object === "boolean"
lObject: typeof object === "object"
lPlain Object: jQuery.isPlainObject( object )
lFunction: jQuery.isFunction( object )
lArray: jQuery.isArray( object )
lElement: object.nodeType
lnull: object === null
lnull или undefined: object == null
lundefined:
mГлобальные переменные: typeof variable === "undefined"
mЛокальные переменные: variable === undefined
mСвойства: object.prop === undefined