Правила написания JavaScript кода

Данный обзор предназначен только для личного использования. Это не сборник абсолютных/идеальных правил, если существующий код уже написан в определённом стиле, то именно ему стоит отдать предпочтение.

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

Переменные должны определяться в верху функции, даже если они определяются ниже по коду. Если переменной присваивается значение, эта запись должна идти отдельной строкой кода; если переменные только объявляются можно писать их одной строкой, но только в самом начале определения. Перед знаком = и после него должны быть пробелы. Переменные должны быть выровнены по левой кромке.

Предполагается использование camelCase стиля именования методов и mixed_underscore для атрибутов и сервисных функций. Подумайте как лучше выразить назначение функции или переменной, скажем массивы лучше именовать во множественном числе, а перед булевыми перемененными использовать is .

Отступы и пробелы

Для отступа используются четыре пробела. Стоит убирать пробелы перед переносом строки. После двоеточий и запятых пробелы необходимы всегда.

Для определения строк используются одинарные кавычки.

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

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

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

При работе с откомментированным кодом не забывайте проверять сохраняется ли актуальность данного комментария и исправлять/удалять его.

Для длинных строк нужно использовать /* . */ .

Длинные одно-строчные комментарии должны быть отдельной строчкой, предпочтительно над комментируемым кодом. Так же перед ними стоит оставлять пустую строку.

Комментарии внутри строки можно использовать только для описания специфических аргументов в списке формальных параметров:

Массивы и инициализация объектов

Пустые объекты и массивы не должны содержать пробелов. Однострочные массивы и инициализаторы объектов допустимы только если они умещаются в строку-две.

Отступы многострочных инициализаторов аналогичны таковым у блоков.

Обратите внимание на то, что перед двоеточием пробела нет.

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

Хотя она и назначена осмысленному атрибуту, функция была задана анонимной.

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

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

Правильное именование функций очень важно. Внятные имена функций могут помочь прочесть код. Не забывайте о ясности. Длинные имена не представляют никаких проблем.

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

Простые вызовы должны быть в одну строку:

Если функция вызывается со множеством параметров или длинными аргументами, её вызов должен разделяться на название и список аргументов, по одному на строку:

К слову, если аргументы содержат объекты с длинными атрибутами, их стоит тоже записать в несколько строк:

Существует несколько способов создания объектов. В целом рекомендуется использовать паттерн "конструктор":

Вложенные конструкторы допустимы, но перед этим стоит подумать "а стоит ли".

Часто требуется сохранить ссылку на конструируемый объект для использования во внутренних функциях. Для этого стоит задать переменную self :

Стоит отметить что эта строка всегда идёт в конструкторе первой.

Использование именованных параметров

Использование именованных параметров уменьшает повторения(?) и делает код читабельнее. Их использование особенно полезно если из названия функции не ясно что в неё передавать.

Чтобы в таком коде понять что делает вызов функции, придётся возвращаться к её определению.

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

Что нужно для начала работы функции должно быть очевидно в самом её начале. При её определении либо заносите в var все используемые перемененные, либо комментируйте что из параметров будет использоваться и для чего.

Вложенные функции неплохо подходят для разбиения функционала и могут использоваться свободно. Если функция используется только другой функцией её стоит определить внутри последней.

Как исключение иногда стоит определять дочернюю функцию вне основной с целью избегания перекрёстных ссылок (см. раздел о замыканиях).

Общее поведение может быть сгруппировано в отдельные модули:

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

Код в представлении

Допустимо использование встроенного JavaScript-кода, но только если инициализаторы связаны с содержимым страницы. В целом код должен быть отделён от представления.

Допустимо встраивать в представление установку констант.

Использование JavaScript в атрибутах HTML противопоказано:

Применяйте ненавязчивый javascript с целью разделить функциональность (слой обработки) от представлений и кода страничек.

Всегда используйте var . Никогда не применяйте неявного приравнивания. Скажем, если хотите создать объект внутри window, так и пишите:

Константы должны определяться аналогично обычным переменным, но при этом следовать своему стилю именования. Ключевое слово 'const' плохо поддерживается и его следует избегать.

Никогда не надейтесь на встроенное добавление точек-с-запятой. Они необходимы после каждого приравнивания или вызова функции. После блоков они не нужны.

Так же рекомендуют использовать точки-с-запятой после определений функций, хотя это и не обязательно.

После блоков for / while / switch / if / else точки-с-запятой не используются в целях повышения удобочитаемости кода.

Тернарный оператор полезен при назначении переменных. Однако вложенные тернарные операторы недопустимы из-за их низкой читаемости.

Проверка на равенство

В большинстве случаев необходимо использование строгой проверки на (не)равенство ( === and !== ). В частности желательно приведение перемененных перед сравнением.

Проверка типов по возможности должна делаться с помощью именованных методов: arr.isArray , str.isString , func.isFunction , и obj.isObject .

Определение внутри блоков

Как общую практику избегайте объявлений внутри вложенных блоков. Особенно старайтесь избегать определения внутри блоков функций, т.к. это нестандартно для ECMAScript. ECMAScript допускает только определения функций в корневом блоке скрипта или функции(?).