Как и любой другой язык программирования, JavaScript имеет свой собственный список лучших практик, чтобы сделать программы легче читать и поддерживать. В JavaScript много хитрых частей, а это значит, что есть определенные паттерны или особенности, которых следует избегать. Мы можем следовать некоторым лучшим практикам, чтобы сделать наш код на JavaScript легким для чтения.
В этой статье мы рассмотрим некоторые лучшие практики стилизации кода, чтобы его было легко читать. Мы рассмотрим именование переменных и функций, избегание глобальных переменных, сохранение строгого стиля кодирования и комментирование кода в модерации.
Легкие, краткие и удобочитаемые имена для переменных, функций и классов.
Названия функций должны быть краткими и значимыми. Например, если мы хотим создать переменную для хранения чьего-то дня рождения, она должна иметь имя, указывающее на это.
Это означает, что это не должно быть имя типа b, но это также не должно быть что-то с посторонними словами типа veryVeryVeryLongBirthdayName. Название birthday было бы уместно.
Кроме того, чего-то следует избегать, так это сочетания значения с функциональностью в именах. Например, если мы хотим написать функцию для проверки, не достиг ли кто-нибудь совершеннолетия, мы должны назвать ее как isAdult(), а не как isOverEighteen().
Это также имеет смысл, так как не в каждой стране возраст совершеннолетия — 18 лет.
Можно также рассмотреть венгерскую нотацию для именования переменных и функций. Нотация объединяет в себе как тип возврата, так и имя. Поскольку JavaScript не имеет строгой типизации, мы можем добавить префикс типа для функции.
Например, если мы хотим вернуть булевую функцию с помощью функции isAdult(), мы можем написать bIAdult() с указанием b, что она является булевой.
Сохранение названий на английском языке также является хорошей идеей, так как оно сохраняет все в соответствии с остальным кодом. Все зарезервированные слова, такие как «function» и «new», все на английском языке, так что все остальное на английском останется неизменным.
Английский язык также более интернациональный, поэтому более вероятно, что разработчики знают английский язык, чем нет.
Классы — это функции, которые создают объекты, поэтому их именование должно отражать это. Например, если у нас есть класс, который создает объекты личность/персона, то они должны быть именованы Person.
Имена классов должны быть в верхнем регистре и указывать на то, какой объект мы создаем.
Избегайте глобальных переменных и функций.
В JavaScript все запускается в файле в той же области видимости. Это проблема, потому что некоторый ф-ции могут быть случайно изменены и на них могут быть случайно сделаны ссылки.
К счастью, начиная с ES6, JavaScript имеет несколько функций, чтобы справиться с этим. Одна из них — использование модулей. С модулями, только то, что мы явно экспортируем, доступно для использования другими модулями.
Также должен быть включен строгий режим JavaScript, чтобы предотвратить случайное объявление глобальных переменных. При строгом режиме что-то вроде x = 1 приведет к ошибке без ключевых слов var, let, or const.
Также let и const являются ключевыми словами для объявления блочных переменных и констант соответственно, поэтому мы не можем случайно ссылаться на них за пределами блока.
Например, если мы пишем следующий код:
if (true) {
var x = 1;
}
console.log(x);
Мы увидим в консоле 1 выведенную из console.log, так как это не блок.
С другой стороны, если мы используем let вместо var:
if (true) {
let x = 1;
}
console.log(x);
Мы получим ошибку ‘Uncaught ReferenceError: x is not defined’.
Как мы видим, мы не можем ссылаться на вещи в местах, которые не ожидаем.
Альтернативным способом было бы завернуть вещи, которые мы хотим быть приватными, в функцию.
Например, мы можем написать:
(function() {
var x = 1;
})();
console.log(x);
Также мы получим ошибку ‘Uncaught ReferenceError: x is not defined’. Функция, которая запускается сразу после объявления, как описано выше, называется «Выражение функции с немедленным вызовом» или «IIFE» для краткости.
Если мы хотим выставить что-то снаружи в IIFE, который у нас есть выше, мы можем просто вернуть то, что мы хотим, следующим образом:
let foo = (function() {
var x = 1;
return {
bar: 2
}
})();
console.log(foo.bar);
Мы вернули объект bar со свойством и присвоили его foo. Тогда мы должны получить 2 из console.logвывода.
Сохраняйте строгий стиль кода
У каждого разработчика в команде будет свой стиль, если он решит, как стилизовать код.
Это означает, что код будет иметь разные стили в разных местах, что затруднит его чтение.
Из-за этого, это хорошая идея, чтобы сохранить стиль последовательным. Мы можем стилизовать наш код автоматически с помощью программ, таких как ESLint или JSLint, которые выполняют статические проверки нашего кода, чтобы убедиться, что он придерживается установленного стиля.
Существуют также инструменты, такие как Prettier, для согласованного форматирования кода через нашу кодовую базу.
Чистый код легко читается и поддерживается. Не должно быть хакерских вещей, которые затрудняют чтение и отладку.
Комментарий при необходимости
Хотя большая часть кода не требует пояснений, некоторая часть кода требует уточнения. Например, если код является частью сложной системы, возможно, потребуется пояснение с комментариями.
Простая функция длиной в несколько строк, вероятно, не нуждается в большом объяснении.
Если мы пишем комментарии, мы должны использовать многострочные комментарии /* */вместо однострочных, //поскольку они более универсальны.
Один удобный трюк для комментариев — написать его с двойной косой чертой, прежде чем закрывать многострочные комментарии следующим образом:
/ *
function foo () {
return 1
};
// * /
Таким образом, мы можем раскомментировать код, поставив косую черту перед открытой косой чертой в первой строке, чтобы раскомментировать код:
// *
function foo () {
return 1
};
// * /
Код выше не комментируется.
Многие текстовые редакторы также должны быть достаточно умны, чтобы автоматически комментировать и раскомментировать код JavaScript.
Переменная и функции должны быть названы так, чтобы они указывали, что они хранят или делают соответственно. Классы должны начинаться с заглавной буквы в целом, и они должны быть названы в соответствии с типом объекта, который они создают.
Мы должны избегать глобальных переменных, поскольку на них можно ссылаться случайно и вызывать непреднамеренное изменение. Мы можем держать данные внутри функций или модулей.
Чтобы сделать код легко читаемым. Важно придерживаться строгого стиля кодирования, чтобы при чтении кода не возникало путаницы.
Наконец, мы можем комментировать код в модерации, если есть части, которые сложнее понять.