Руководство по стилю 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 не помещается на одной строке, лучше всего его разбить после оператора или запятой.
Пример
document.getElementById("demo").innerHTML =
"Hello Dolly.";
Соглашения об именах
Всегда используйте одно и то же соглашение об именах для всего кода. Например:
- Имена переменных и функций, написанные как camelCase
- Глобальные переменные пишутся ЗАГЛАВНЫМИ БУКВАМИ (мы этого не делаем, но это довольно распространено)
- Константы (например, PI), написанные ЗАГЛАВНЫМИ БУКВАМИ.
Должны ли вы использовать дефисы, camelCase или under_scores в именах переменных?
Этот вопрос часто обсуждают программисты. Ответ зависит от того, кого вы спросите:
Дефисы в HTML и CSS:
Атрибуты HTML5 могут начинаться с data- (количество данных, цена данных).
CSS использует дефисы в именах свойств (размер шрифта).
Дефисы могут быть ошибочно приняты за попытки вычитания. Дефисы не допускаются в именах JavaScript.
Подчеркивания:
Многие программисты предпочитают использовать символы подчеркивания (дата_рождения), особенно в базах данных SQL.
Символы подчеркивания часто используются в документации PHP.
ПаскальРегистр:
Программисты на C часто предпочитают PascalCase.
верблюдКорпус:
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.
Если вы используете сочетание верхнего и нижнего регистра, вы должны быть предельно последовательны.
Если вы перейдете с сервера, не чувствительного к регистру, к серверу, чувствительному к регистру, даже небольшие ошибки могут нарушить работу вашего веб-сайта.
Чтобы избежать этих проблем, всегда используйте имена файлов в нижнем регистре (если это возможно).
Представление
Соглашения о кодировании не используются компьютерами. Большинство правил мало влияют на выполнение программ.
Отступы и лишние пробелы не имеют значения в небольших скриптах.
Для кода в разработке предпочтение следует отдавать удобочитаемости. Большие производственные сценарии должны быть минимизированы.