Руководство по стилю JavaScript

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

Соглашения по JavaScript коду

Соглашения по кодированию (Coding conventions) это:Руководящие принципы стиля программированияЭти принципы в основном включают:

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

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

  • Улучшение читаемости кода
  • Повышение Maintainability кода

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

Эта страница описывает общие соглашения по JavaScript, используемые на CodeW3C.com.

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

Имя переменной

На CodeW3C.com мы используем camelCase для имен идентификаторов (переменных и функций).camelCase.

Все имена начинаются сБуквыНачало.

На этой странице мы более подробно обсудим правила именования.

firstName = "Bill";
lastName = "Gates";
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: "Bill",
     lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

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

  • Пишите открывающую скобу в конце первой строки;
  • Используйте пробел перед открывающей скобой;
  • Пишите закрывающую скобу на новой строке, без пробела впереди;
  • Не заканчивайте сложные предложения точкой с запятой;

Функция:

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

Цикл:

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

Условие:

if (time < 20) {
    greeting = "Good day";
} else {
     greeting = "Good evening";
}

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

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

  • Поставьте открывающую скобу и имя объекта на одной строке;
  • Используйте двоеточие с пробелом между свойством и его значением;
  • Не пишите запятую после последнего значения свойства;
  • Пишите закрывающую скобу на новой строке, без пробела впереди;
  • Всегда заканчивайте определение объекта точкой с запятой;

Пример

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

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

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

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

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

Если строка JavaScript exceeds one line in length, the best place to break is after an operator or comma.

Пример

document.getElementById("demo").innerHTML =
    "Hello Kitty.";

Попробуйте это лично

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

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

  • Имена переменных и функций должны начинаться сcamelCaseчтобы написать
  • Глобальные переменные используютстрочные буквы(Мы так не делаем, но это довольно распространено)
  • Константы (например, PI) используютстрочные буквы

Должны ли мы использовать в именах переменныхдефис,camelCaseилиПодчеркиваниеПравильно?

Это вопрос, который часто обсуждают программисты. Ответ зависит от того, кто его отвечает:

Дефисы в HTML и CSS:

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

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

Гипенес может быть неправильно принят за оператор вычитания. Названия переменных в JavaScript не должны содержать дефисы.

Подчеркивание:

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

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

ПascalCase:

Программисты C часто используют пascalCase.

Строчная и заглавная раскладка (camelCase):

JavaScript himself, jQuery и другие библиотеки JavaScript используют строчную и заглавную раскладку (camelCase).

Названия переменных JavaScript не должны начинаться с символа $. Это может привести к конфликту имен библиотек JavaScript.

Загрузка JavaScript в HTML

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

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

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

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

Эти две строки JavaScript производят разные результаты:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Если возможно, пожалуйста, используйте одинаковое соглашение по命名ам в HTML (как в JavaScript).

Доступ к руководству по стилям HTML.

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

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

Файлы CSS должны использовать .css Расширение

Файлы JavaScript должны использовать .js Расширение

Использование lowercase имён файлов

Большинство веб-серверов (Apache, Unix) чувствительны к регистру имён файлов:

london.jpg не может быть доступен как London.jpg.

Другие веб-серверы (Microsoft IIS) не чувствительны к регистру:

london.jpg может быть доступен как London.jpg или london.jpg.

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

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

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

Производительность

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

Отступы и дополнительные пробелы не важны для коротких скриптов.

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