Соглашения по стилю кодирования

Во время работы над проектом JavaScript всегда используйте одни и те же соглашения по стилю кодирования скриптов.

Соглашения по кодированию являются своего рода руководством по стилю написания кода программы. Обычно это:

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

Благодаря соглашениям по кодированию:

  • улучшается читаемость кода
  • облегчается процесс поддержки программы.

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

Имена переменных

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


firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

Пробелы вокруг операторов

Всегда ставьте пробелы вокруг операторов ( = + - * / ) и после запятых:


var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];

Отступы

Всегда используйте 4 пробела для отступа блоков кода:


function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Внимание! Не используйте для отступов табуляцию. Разные редакторы интерпретируют табуляцию по разному.

Правила для выражений

Общие правила для простых выражений:

  • Всегда заканчивайте простые выражения точкой с запятой.

var values = ["Volvo", "Saab", "Fiat"];

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

Общие правила для сложных (составных) выражений:

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

Функции:


function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Циклы:


for (i = 0; i < 5; i++) {
    x += i;
}

Условия:


if (time < 20) {
    greeting = "Добрый день";
} else {
    greeting = "Добрый вечер";
}

Правила для объектов

Общие правила для объявления объектов:

  • Ставьте открывающую фигурную скобку на той же строчке, что и имя объекта.
  • Между именем свойства и его значением ставьте двоеточие с пробелом.
  • Строковые значения заключайте в кавычки, а числовые нет.
  • Не добавляйте запятую после последней пары "свойство-значение".
  • Закрывающую фигурную скобку ставьте на новой строке без пробелов перед ней.
  • Всегда после определения объекта ставьте точку с запятой.

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

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


var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Длина строки меньше 80 символов

Для улучшения читаемости строка кода не должна превышать длину в 80 символов.

Если выражение JavaScript не помещается на одной строке, то лучшее место для переноса, это после оператора или запятой:


 document.getElementById("demo").innerHTML =
    "Привет, мир!";

Соглашение по именам

При написании кода всегда используйте одни и те же соглашения по именам. Например:

  • Имена переменных и функций пишутся в "горбатом регистре", начинающимся с маленькой буквы - имяПеременной
  • Имена глобальных переменных пишутся большими буквами - ИМЯПЕРЕМЕННОЙ (Мы не советуем это делать, но это вполне обычная практика)
  • Имена констант (вроде PI) пишутся большими буквами

Что лучше использовать в именах переменных — дефис (имя-переменной), "горбатый регистр" (имяПеременной) или подчеркивание (имя_переменной)?

Этот вопрос часто обсуждается программистами. И ответ на него зависит от того, кого вы спрашиваете:

Дефис в HTML и CSS
Атрибуты в HTML5 могут начинаться с сочетания data- (data-quantity, data-price).

В CSS дефис используется в именах свойств (font-size).

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

Подчеркивание
Многие программисты, особенно работающие с базами данных SQL, предпочитают в именах использовать символ подчеркивания (date_of_birth).

Часто подчеркивание используется в документации по PHP.

Верхний "горбатый регистр" (PascalCase)
PascalCase часто используют программисты на языке C.

Нижний "горбатый регистр" (camelCase)
camelCase используется самим JavaScript, jQuery и другими библиотеками JavaScript.

Внимание! Не начинайте имена с символа доллара ($). Это приведет к конфликту с многими библиотеками JavaScript.

Загрузка JavaScript в HTML

Для загрузки внешних скриптов используйте простой синтаксис (атрибут type не нужен):


<script src="//msiter.ru/myscript.js"></script>

Доступ к элементам HTML

Следствием "неопрятного" стиля в HTML могут стать ошибки в JavaScript.

Следующие два выражения JavaScript дадут разные результаты:


var obj =  getElementById("Demo")

var obj = getElementById("demo")

По возможности в HTML используйте те же соглашения по именам (как в JavaScript).

Расширения файлов

Файлы HTML должны иметь расширение .html (не .htm).

Файлы CSS должны иметь расширение .css.

Файлы JavaScript должны иметь расширение .js.

В названиях файлов используйте только маленькие буквы

Большинство веб-серверов (Apache, Unix) регистрозависимы в отношении имен файлов: нельзя получить доступ к файлу с именем london.jpg как London.jpg.

Другие же веб-сервера (Microsoft, IIS) регистронезависимы: обратиться к файлу с именем london.jpg можно как London.jpg или london.jpg.

Если вы смешиваете верхний и нижний регистры, то вы должны быть чрезвычайно последовательным.

Если вы смените регистронезависимый сервер на регистрозависимый, то даже малейшая ошибка может нарушить работу вашего сайта.

Чтобы избежать этой проблемы, всегда в названиях файлов используйте нижний регистр.

Быстродействие

Соглашения по кодированию не предназначены и не учитываются компьютерами. Большинство правил написания кода мало влияют на процесс выполнения программы.

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

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