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
Використовуйте простий синтаксис для підключення зовнішніх скриптів (Згідно зі стандартом HTML5 атрибут 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.
Якщо ви використовуєте поєднання верхнього та нижнього регістру, ви маєте бути послідовні.
Якщо ви перейдете із сервера без урахування регістру на сервер з урахуванням регістру, навіть невеликі помилки можуть порушити роботу вашого вебсайту.
Щоб уникнути цих проблем, завжди використовуйте імена файлів в нижньому регістрі (якщо можливо).
Продуктивність
Угоди про кодування не використовуються комп’ютерами. Більшість правил мало впливають на виконання програм.
відступи та зайві пробіли не мають значення в невеликих скриптах.
Для коду, що знаходиться в розробці, перевагу слід віддавати зручності для читання. Великі виробничі скрипти слід мінімізувати.
