Наш код должен быть максимально чистым и простым для чтения.
На самом деле это искусство программирования — взять сложную задачу и запрограммировать ее так, чтобы она была одновременно правильной и удобочитаемой. Хороший стиль кода очень помогает в этом.
Вот шпаргалка с некоторыми рекомендуемыми правилами (более подробную информацию см. ниже):
Теперь давайте подробно обсудим правила и причины их возникновения.
Нет никаких правил «вы должны»
Здесь ничего не высечено на камне. Это стилевые предпочтения, а не религиозные догмы.
В большинстве проектов JavaScript фигурные скобки написаны в «египетском» стиле, причем открывающая скобка находится на той же строке, что и соответствующее ключевое слово, а не на новой строке. Перед открывающей скобкой также должен быть пробел, например:
если (условие) {
// делаем это
// ...и это
// ...и это
} Однострочная конструкция, такая как if (condition) doSomething() , является важным крайним случаем. Стоит ли вообще использовать брекеты?
Вот аннотированные варианты, чтобы вы сами могли оценить их читабельность:
? Новички иногда так делают. Плохой! Фигурные скобки не нужны:
if (n < 0) {alert(`Power ${n} не поддерживается`);}? Выделить на отдельную строку без фигурных скобок. Никогда этого не делайте, легко допустить ошибку при добавлении новых строк:
если (п <0)
alert(`Мощность ${n} не поддерживается`);? Одна строка без фигурных скобок – допустимо, если она короткая:
if (n < 0) alert(`Power ${n} не поддерживается`);? Лучший вариант:
если (п < 0) {
alert(`Мощность ${n} не поддерживается`);
} Для очень короткого кода допускается использование одной строки, например, if (cond) return null . Но блок кода (последний вариант) обычно более читабелен.
Никто не любит читать длинную горизонтальную строку кода. Лучше всего разделить их.
Например:
// обратные кавычки ` позволяют разделить строку на несколько строк пусть строка = ` TC39 ECMA International — это группа разработчиков JavaScript, разработчики, ученые и многие другие, сотрудничающие с сообществом поддерживать и развивать определение JavaScript. `;
И для операторов if :
если (
идентификатор === 123 &&
MoonPhase === 'Убывающая Луна' &&
Знак зодиака === 'Весы'
) {
LetTheSorceryBegin();
}Максимальная длина строки должна быть согласована на уровне команды. Обычно это 80 или 120 символов.
Существует два типа отступов:
Горизонтальные отступы: 2 или 4 пробела.
Горизонтальный отступ делается с помощью 2 или 4 пробелов или символа горизонтальной табуляции (клавиша Tab ). Какой из них выбрать – это старая священная война. Пространства сегодня более распространены.
Одним из преимуществ пробелов перед табуляцией является то, что пробелы позволяют более гибко настраивать отступы, чем символ табуляции.
Например, мы можем выровнять параметры по открывающей скобке, вот так:
показать(параметры,
выровнено, // заполнение 5 пробелами слева
один,
после,
другой
) {
// ...
}Вертикальные отступы: пустые строки для разделения кода на логические блоки.
Даже одну функцию часто можно разделить на логические блоки. В примере ниже инициализация переменных, основной цикл и возврат результата разделены по вертикали:
функция pow(x, n) {
пусть результат = 1;
// <--
for (пусть я = 0; я < n; я++) {
результат *= х;
}
// <--
вернуть результат;
}Вставьте дополнительную новую строку там, где это поможет сделать код более читабельным. Не должно быть более девяти строк кода без вертикального отступа.
Точка с запятой должна стоять после каждого оператора, даже если ее можно пропустить.
Есть языки, в которых точка с запятой действительно необязательна и используется редко. Однако в JavaScript бывают случаи, когда разрыв строки не интерпретируется как точка с запятой, что делает код уязвимым для ошибок. Подробнее об этом читайте в главе «Структура кода».
Если вы опытный программист JavaScript, вы можете выбрать стиль кода без точек с запятой, например StandardJS. В противном случае лучше использовать точки с запятой, чтобы избежать возможных ошибок. Большинство разработчиков ставят точки с запятой.
Старайтесь избегать слишком многоуровневой вложенности кода.
Например, в цикле иногда полезно использовать директиву continue чтобы избежать дополнительной вложенности.
Например, вместо добавления вложенного условия if вот так:
для (пусть я = 0; я < 10; я++) {
если (условие) {
... // <- еще один уровень вложенности
}
}Мы можем написать:
для (пусть я = 0; я < 10; я++) {
если (!cond) продолжить;
... // <- нет дополнительного уровня вложенности
} То же самое можно сделать с помощью if/else и return .
Например, две конструкции ниже идентичны.
Вариант 1:
функция pow(x, n) {
если (п < 0) {
alert("Отрицательное значение 'n' не поддерживается");
} еще {
пусть результат = 1;
for (пусть я = 0; я < n; я++) {
результат *= х;
}
вернуть результат;
}
}Вариант 2:
функция pow(x, n) {
если (п < 0) {
alert("Отрицательное значение 'n' не поддерживается");
возвращаться;
}
пусть результат = 1;
for (пусть я = 0; я < n; я++) {
результат *= х;
}
вернуть результат;
} Второй вариант более читабелен, поскольку «особый случай» n < 0 обрабатывается заранее. После завершения проверки мы можем перейти к «основному» потоку кода без необходимости дополнительной вложенности.
Если вы пишете несколько «вспомогательных» функций и код, который их использует, существует три способа организации этих функций.
Объявите функции над кодом, который их использует:
// объявления функций
функция createElement() {
...
}
функция setHandler(elem) {
...
}
функция обхода() {
...
}
// код, который их использует
пусть элемент = createElement();
setHandler (элемент);
прогулка вокруг();Сначала код, потом функции
// код, который использует функции
пусть элемент = createElement();
setHandler (элемент);
прогулка вокруг();
// --- вспомогательные функции ---
функция createElement() {
...
}
функция setHandler(elem) {
...
}
функция обхода() {
...
}Смешанный: функция объявляется там, где она впервые используется.
В большинстве случаев предпочтение отдается второму варианту.
Это потому, что при чтении кода мы в первую очередь хотим знать , что он делает . Если код идет первым, то все становится ясно с самого начала. Тогда, возможно, нам вообще не понадобится читать функции, особенно если их имена описывают то, что они на самом деле делают.
Руководство по стилю содержит общие правила о том, «как писать» код, например, какие кавычки использовать, сколько пробелов делать отступ, максимальную длину строки и т. д. Множество мелочей.
Когда все члены команды используют одно и то же руководство по стилю, код выглядит единообразно, независимо от того, какой член команды его написал.
Конечно, команда всегда может написать собственное руководство по стилю, но обычно в этом нет необходимости. Существует множество существующих руководств на выбор.
Некоторые популярные варианты:
Руководство по стилю Google JavaScript
Руководство по стилю JavaScript Airbnb
Идиоматический.JS
СтандартJS
(плюс многое другое)
Если вы начинающий разработчик, начните со шпаргалки в начале этой главы. Затем вы можете просмотреть другие руководства по стилю, чтобы почерпнуть больше идей и решить, какое из них вам больше всего нравится.
Линтеры — это инструменты, которые могут автоматически проверять стиль вашего кода и вносить предложения по улучшению.
Самое замечательное в них то, что проверка стиля также может обнаружить некоторые ошибки, например опечатки в именах переменных или функций. Из-за этой особенности рекомендуется использовать линтер, даже если вы не хотите придерживаться одного конкретного «стиля кода».
Вот некоторые известные инструменты для линтинга:
JSLint — один из первых линтеров.
JSHint – больше настроек, чем у JSLint.
ESLint — вероятно, самый новый.
Все они могут выполнить эту работу. Автор использует ESLint.
Большинство линтеров интегрированы со многими популярными редакторами: достаточно включить плагин в редакторе и настроить стиль.
Например, для ESLint вам нужно сделать следующее:
Установите Node.js.
Установите ESLint с помощью команды npm install -g eslint (npm — установщик пакетов JavaScript).
Создайте файл конфигурации с именем .eslintrc в корне вашего проекта JavaScript (в папке, содержащей все ваши файлы).
Установите/включите плагин для вашего редактора, который интегрируется с ESLint. У большинства редакторов он есть.
Вот пример файла .eslintrc :
{
"extends": "eslint:рекомендуется",
"окр.": {
«браузер»: правда,
«узел»: правда,
"es6": правда
},
"правила": {
"без консоли": 0,
«отступ»: 2
}
} Здесь директива "extends" означает, что конфигурация основана на наборе настроек «eslint:recommended». После этого указываем свой.
Также можно загрузить наборы правил стиля из Интернета и расширить их. См. https://eslint.org/docs/user-guide/getting-started для получения более подробной информации об установке.
Кроме того, некоторые IDE имеют встроенный линтинг, который удобен, но не так настраиваем, как ESLint.
Все правила синтаксиса, описанные в этой главе (и в упомянутых руководствах по стилю), направлены на повышение читаемости вашего кода. Все они спорны.
Когда мы думаем о написании «лучшего» кода, мы должны задать себе следующие вопросы: «Что делает код более читабельным и простым для понимания?» и «Что может помочь нам избежать ошибок?» Это основные моменты, которые следует учитывать при выборе и обсуждении стилей кода.
Чтение популярных руководств по стилю позволит вам быть в курсе последних идей о тенденциях и лучших практиках стиля кода.
важность: 4
Что не так со стилем кода ниже?
функция pow(x,n)
{
пусть результат = 1;
for(let i=0;i<n;i++) {result*=x;}
вернуть результат;
}
let x=prompt("x?",''), n=prompt("n?",'')
если (n<=0)
{
alert(`Мощность ${n} не поддерживается, введите целое число больше нуля`);
}
еще
{
оповещение(pow(x,n))
}Исправьте это.
Вы могли бы отметить следующее:
function pow(x,n) // <- между аргументами нет пробела
{ // <- фигурная скобка на отдельной строке
пусть результат = 1; // <- никаких пробелов до и после =
for(let i=0;i<n;i++) {result*=x;} // <- без пробелов
// содержимое { ... } должно быть на новой строке
вернуть результат;
}
let x=prompt("x?",''), n=prompt("n?",'') // <-- технически возможно,
// но лучше сделать 2 строки, там тоже нет пробелов и пропущенных ;
if (n<=0) // <- внутри нет пробелов (n <= 0), и над ним должна быть дополнительная строка
{ // <- фигурная скобка на отдельной строке
// ниже — длинные строки можно разделить на несколько строк для улучшения читаемости
alert(`Мощность ${n} не поддерживается, введите целое число больше нуля`);
}
else // <- можно записать в одну строку, например "} else {"
{
alert(pow(x,n)) // нет пробелов и отсутствует ;
}Фиксированный вариант:
функция pow(x, n) {
пусть результат = 1;
for (пусть я = 0; я < n; я++) {
результат *= х;
}
вернуть результат;
}
let x = Prompt("x?", "");
let n = Prompt("n?", "");
если (п <= 0) {
alert(`Power ${n} не поддерживается,
пожалуйста, введите целое число больше нуля`);
} еще {
оповещение(pow(x, n));
}