JavaScript style guide, JSLint, Strict Warnings
 

Наверное, у всех есть какой-то свой собственный стиль написания кода. Некоторое время назад мне пришлось адаптироваться к принятому в проекте стилю, который сильно отличался от моего, первое время было очень неудобно, потом привык, но не очень нравилось. В итоге выработался следующий стиль кодирования:

FD:

function callee(arg) {
    // …
}

• между именем функции и открывающей скобочкой нет пробела
• открывающая фигурная скобка в той же строке
• закрывающая фигурная скобка на уровне function

FE:

var callee = function(arg) {
    // …
};

• между function и открывающей скобочкой нет пробела

Объект:

var obj = {
    property: value,
    method: function(arg) {
        // …
    }
};

• двоеточие не отделяется пробелом от имени свойства или метода

Ветвления:

if(…) {
    // …
}
else if(…) {
    // …
}
else {
    // …
}

• else/else-if yачинаются с новой строки
• пробела между if и открывающей скобочкой нет

Циклы:

while(…) {
    // …
}

do {
    // …
}
while(…);

for(…) {
    // …
}

• for только в качестве for-in

Конструкторы:

(new Date).getTime()

• скобки функции-конструктора не ставятся, когда возможно

Операторы:

typeof variable

if(!variable && "property" in object) {…}

var a = b ? c : d;

• минимум скобок
• разделяются пробелами, но не отбиваются пробелами от скобок

Переменные:

var a = 1, b = 2, c = 3;

var key, obj = {…};
for(key in obj) {…}

var a;
while(…) {
    a = i;
}


function(event) {
    event = event || window.event;
    var target = …;
}

• один var для нескольких переменных
• если до этого есть var, писать еще один внутри for ни к чему
• var не ставится внутри цикла (знаю, что интерпритированы они будут сразу)
• var не ставится, где попало, только в начале логических блоков
• существующие переменные не переопределяются с помощью var

Другое:
• все имена в camelStyle
• для отступов используется знак табуляции
• избавляемся от strict warnings в консоли Firefox
• не опускаем фигурные скобки
_____________________________

Только недавно догнал, что Firefox ругается только на такие функции:

function() {
    if(…) {
        return …;
    }
}

а не на все функции, которые ничего не возвращают :)


На некоторые вещи ругается JSLint, думаю, стоит ли следовать всем рекомендациям или это никому ненужные ограничения?

Ссылки:
MDC: JavaScript style guide
JSLint — The JavaScript Code Quality Tool

Вот, просто мысли в слух :)

У меня так же, кроме:

И частично:
В циклах свободно использую.


тоже while люблю, но for иногда просто напрашивается.

У нас на первом курсе в первом семестре преподаватель не принимал плохо оформленные программы. Тогда все бесились, но щас я ему очень даже благодарен -- основные принципы в подкорке мозга зашиты. Собственно отличия, как правило, у всех только где ставить открывающую фигурную скобку, отступы табуляциями или пробелами, наименование переменных и еще может что по мелочи. Поэтому некоторые пункты удивляют.

Так обычно делается, как раз, если открывающая скобка на новой строке.

У if и вообще у всех операторов со скобками пробелы обычно ставятся.

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

Унарные операторы тоже не видел никогда, чтобы пробелами отделялись. Минус унарный, я так понимаю, тоже с пробелом пишется?

На это я раньше внимания особо не обращал, но щас IDEA ругается, redeclare говорит.

В MDC так рекомендуют :) и заключать в комментарии так удобнее.

Вот тут не определюсь, после function в FE тоже тогда пробел нужно ставить будет по идее.

Вроде так нагляднее.

Не не не, это конечно же без пробелов:

i++;
++j;

a += -1 + k--;

С этим, пожалуй, соглашусь, хотя с нормальной IDE это неактуально.

У функций пробел перед скобкой не ставится, пробел перед именем относится к имени, нет имени -- нет пробела. Все логично :)

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

В первом посте опечатка?

ты про это:

! variable

?

Без пробела обычно пишу, поправил.

Мой стиль вы все прекрасно видели:)
Никаких пробелов, минимум переноса строк и скобок... Не завидую наследнику моего кода:D
Для таких ситуаций многие IDE имеют функцию форматирования. В DW для JS этого нет:(

Не понимаю людей, которые вставляют пробелы и переносы везде, где можно... Окно на весь экран, а смысла никакого не видно...

А можно отнести имя к выражению вызова (CallExpression), тогда исчезает только имя, а пробел остаётся.

function foo() {...}  // описание функции с именем
foo(); // вызов

(function() {}); // без проблела - похоже на вызов
(function () {}); // а так - описание функции, исчезло только имя

Вот тут давно тоже было.

Что касается style-guide - это очень важная тема. Здесь приоритеты следующие (по убывающей, первые пункты - приоритет выше):

1. Style-guide принятый локально в компании. Главное - соблюдать единообразие кода.

2. Официальный Style-guide технологии. Профессиональный код (на международном уровне) должен выглядеть так. Автор технологии имеет право определять style-guide (в идеале, советуясь со сторонними мнениями и учитывая пожелания).

3. Локальная привычка. Любительский уровень, как правило используется новичками при начальном изучении. Также, может использоваться псевдо-гуру, которые хотят в этом моменте обособиться (aka, "мы не следуем за толпой и всякими там стайл-гайдами"), что является ещё большим пафосом; как правило - тоже любитель, знающий технологию ненамного глубже посредственного программера. Однако, первый пункт (с высшим приоритетом), может выбираться также конкретным человеком, исходя из своей локальной привычки и, если такой код сильно расходится с пунктом (2) - это неправильно уже.

Если не задан локальный стиль в компании, то стоит придерживаться официального стиля технологии - независимо от локальных привычек. Так, например, я привык к camelCase-у в именах переменных, но, программируя на Python-e, я использую underscore_case (т.к. это рекомендация официального style-guide-а Python) - несмотря на мою привычку из ES.

А как лучше:

if(typeof addEventListener != "undefined") {…}

или

if(typeof window.addEventListener != "undefined") {…}

или

if(window.addEventListener) {…}

или

if("addEventListener" in window)  {…}

?

Dmitry A. Soshnikov, можешь объяснить, почему и как работает такая конструкция:

typeof X // "undefined"

когда переменная X нигде не определена? Нормально ли так делать?

В таких (в конце файла), например, случаях без разницы, все равно работать не будет :)