JavaScript Гид по стилю
Всегда используйте одни и те же соглашения о кодировании для всех своих проектов JavaScript.
Соглашения о кодировании JavaScript
Соглашения о кодировании - это рекомендации по стилю программирования. Обычно они содержат:
- Правила именования и объявления для переменных и функций
- Правила использования пробелов, отступов и комментариев
- Практика и принципы программирования
Правила кодирования безопасное качество:
- Улучшают читаемость кода
- Упрощают обслуживание кода
Соглашения о кодировании могут быть задокументированными правилами, которым должны следовать команды, или просто вашей индивидуальной практикой кодирования.
На этой странице описаны общие соглашения о коде JavaScript, используемые W3Schools.
Вам также следует прочитать следующую главу "Лучшие практики" и узнать, как избежать ошибок при программировании.
Имена переменных
В W3schools мы используем camelCase (верблюжийРегистр) для имен идентификаторов (переменных и функций).
Все имена начинаются с буквы.
Внизу страницы вы найдете более широкое обсуждение правил именования.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
Пространства (пробелы) вокруг операторов
Всегда ставьте пробелы вокруг операторов ( = + - * / ) и после запятых:
Примеры:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];
Отступы в коде
Всегда используйте 2 пробела для отступов кодовых блоков:
Функции:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Не используйте табы (табуляторы) для отступов. Разные редакторы по-разному интерпретируют табы.
Правила инструкций
Общие правила для простых инструкций:
- Всегда заканчивайте простую инструкцию точкой с запятой.
Примеры:
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Общие правила для сложных (составных) инструкций:
- Поместите открывающую скобку в конец первой строки
- Используйте один пробел перед открывающей скобкой
- Поместите закрывающую скобку в новую строку без начальных пробелов
- Не заканчивайте сложную инструкцию точкой с запятой
Функции:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Циклы:
for (let i = 0; i < 5; i++) {
x += i;
}
Условия:
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
Правила объекта
Общие правила для определений объектов:
- Разместите открывающую скобку на той же строке, что и имя объекта
- Используйте двоеточие плюс один пробел между каждым свойством и его значением
- Используйте кавычки для строковых значений, а не для числовых значений
- Не ставьте запятую после последней пары "свойство-значение"
- Поместите закрывающую скобку в новую строку без пробелов в начале
- Всегда заканчивайте определение объекта точкой с запятой
Пример
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Короткие объекты могут быть записаны сжатыми в одну строку, используя только пробелы между свойствами, например:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Длина строки < 80
Для удобства чтения избегайте строк длиной более 80 символов.
Если оператор JavaScript не умещается в одной строке, лучше всего его разорвать после оператора или запятой.
Соглашения об именах
Всегда используйте одно и то же соглашение об именах для всего кода. Например:
- Имена переменных и функций записываются как camelCase (верблюжийРегистр)
- Глобальные переменные, записываются в ВЕРХНЕМ РЕГИСТРЕ (мы этого не делаем, но это довольно часто)
- Константы (например, PI) записываются в ВЕРХНЕМ РЕГИСТРЕ
Что следует использовать в именах переменных: hyp-hens, camelCase или under_scores?
Программисты часто обсуждают этот вопрос. Ответ зависит от того, кого вы спрашиваете:
Дефисы в HTML и CSS:
Атрибуты HTML5 могут начинаться с data-, например: data-quantity (количество данных), data-price (цена данных) и т.д.
CSS использует дефисы в именах свойств, например: font-size (размер шрифта).
Дефисы могут быть ошибочно приняты за попытки вычитания. В именах JavaScript нельзя использовать дефис.
Подчеркивание:
Многие программисты предпочитают использовать символы подчеркивания (date_of_birth), особенно в базах данных SQL.
Подчеркивание часто используется в документации PHP.
PascalCase:
Программисты на C часто предпочитают PascalCase.
camelCase:
camelCase используется самим JavaScript, jQuery и другими библиотеками JavaScript.
Не начинайте имена со знака $. Это приведет к конфликту со многими именами библиотек JavaScript.
Загрузка JavaScript в HTML
Используйте простой синтаксис для загрузки внешних скриптов (атрибут type не нужен):
<script src="myscript.js"></script>
Доступ к HTML-элементам
Последствие использования "неопрятного" HTML стиля могут привести к ошибкам JavaScript.
Эти два оператора JavaScript дадут разные результаты:
const obj = getElementById("Demo")
const obj = getElementById("demo")
Если возможно, используйте то же соглашение об именах (как JavaScript) в HTML.
Посетите учебник по HTML Стилю.
Расширения файлов
HTML файлы должны иметь расширение .html, (также допускается .htm).
CSS файлы должны иметь расширение .css.
JavaScript файлы должны иметь расширение .js.
Используйте имена файлов в нижнем регистре
Большинство веб-серверов (Apache, Unix) чувствительны к регистру в именах файлов:
london.jpg недоступен как London.jpg.
Другие веб-серверы (Microsoft, IIS) не чувствительны к регистру:
london.jpg можно открыть как London.jpg или london.jpg.
Если вы используете сочетание верхнего и нижнего регистра, вы должны быть предельно последовательны.
Если вы перейдете с сервера без учета регистра на сервер с учетом регистра, даже небольшие ошибки могут нарушить работу вашего веб-сайта.
Чтобы избежать этих проблем, всегда используйте имена файлов в нижнем регистре (если возможно).
Производительность
Соглашения о кодировании не используются компьютерами. Большинство правил мало влияют на выполнение программ.
Отступы и лишние пробелы не имеют значения в небольших скриптах.
Для кода, находящегося в разработке, предпочтение следует отдавать удобочитаемости. Большие производственные скрипты следует минимизировать.
