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

Все проекты на JavaScript следуют одному и тому же руководству по стилю.

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

Руководство по стилю обычно включает следующие аспекты:

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

Стандартизированный код легче читать и поддерживать.

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

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

Имена переменных рекомендуется записывать в camelCase (camelCase):

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);
}
Note Не рекомендуется использовать клавишу TAB для отступов, потому что разные редакторы интерпретируют клавишу TAB по-разному.

Правила инструкций

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

  • Инструкция обычно заканчивается точкой с запятой.

Пример:

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 = "Good day";
} else {
    greeting = "Good evening";
}

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

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

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

Пример:

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

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

Пример:

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

Каждая строка кода короче 80 символов

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

Если инструкция JavaScript превышает 80 символов, рекомендуется перенести строку после оператора или запятой.

Пример:

document.getElementById("demo").innerHTML =
    "Пример приветствия.";

Попробуйте сами »

Правила именования

Как правило, многие языки программирования имеют схожие правила именования, например:

  • Переменные и функции обозначаются с использованием нижнего верблюжьего регистра, то есть, за исключением первого слова, первая буква остальных слов заглавная (lowerCamelCase）
  • Глобальные переменные пишутся в верхнем регистре (UPPERCASE )
  • Константы (например, PI) пишутся в верхнем регистре (UPPERCASE )

Используете ли вы эти правила для именования переменных:hyp-hens, camelCase, илиunder_scores ?

Символ дефиса (-) в HTML и CSS:

Атрибуты HTML5 могут использовать data- в качестве префикса (например, data-quantity, data-price).

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

Note - обычно считается вычитанием в JavaScript, поэтому это не допускается.

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

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

В языке PHP обычно используются подчёркивания.

PascalCase:

PascalCase чаще встречается в языке C.

Верблюжий регистр:

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

Note Имена переменных не должны начинаться с $, так как это будет конфликтовать со многими библиотеками JavaScript.

Загрузка внешних файлов JavaScript в HTML

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

<script src="myscript.js">

Использование JavaScript для доступа к элементам HTML

Плохое форматирование HTML может вызвать ошибки выполнения JavaScript.

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

Пример

var obj = getElementById("Demo")

var obj = getElementById("demo")

Попробуйте сами »

Старайтесь использовать одинаковые правила именования для HTML и JavaScript.

Посетите руководство по стилю HTML(5)。

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

Расширения файлов HTML могут быть.html( или.htm).

Расширение файла CSS —.css 。

Расширение файла JavaScript —.js 。

Используйте имена файлов в нижнем регистре

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

Другие веб-серверы (Microsoft, IIS) нечувствительны к регистру: london.jpg доступен через London.jpg или london.jpg.

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

Другие расширения