Десять соглашений об именовании JavaScript, которые должен знать каждый разработчик

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

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

1. Соглашение об именовании переменных

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

var DogName = 'Scooby-Doo';
var dogName = 'Droopy';
var DOGNAME = 'Odie';
console.log(DogName); // "Scooby-Doo"
console.log(dogName); // "Droopy"
console.log(DOGNAME); // "Odie"

Однако наиболее рекомендуемым способом объявления переменных JavaScript является использование имён переменных в camel case. В JavaScript для всех типов переменных можно использовать имя в camel case, и это гарантирует, что не будет нескольких переменных с одинаковыми именами.

// плохо
var dogname = 'Droopy';
// плохо
var dog_name = 'Droopy';
// плохо
var DOGNAME = 'Droopy';
// плохо
var DOG_NAME = 'Droopy';
// хорошо
var dogName = 'Droopy';

Имена переменных должны быть понятны и описывать хранимое значение. Например, если вам нужна переменная для хранения клички собаки, то следует использовать dogName, а не просто Name, так как это более осмысленно.

// плохо
var d = 'Scooby-Doo';
// плохо
var name = 'Scooby-Doo';
// хорошо
var dogName = 'Scooby-Doo';

2. Соглашение об именовании логических переменных

Когда речь идёт о логических переменных, в качестве префикса следует использовать is или has. Например, если вам нужна логическая переменная, проверяющая, есть ли у собаки хозяин, то в качестве имени переменной следует использовать hasOwner.

// плохо
var bark = false;
// хорошо
var isBark = false;
// плохо
var ideal = true;
// хорошо
var areIdeal = true;
// плохо
var owner = true;
// хорошо
var hasOwner = true;

3. Соглашение об именовании функций

Имена функций JavaScript также чувствительны к регистру. Поэтому, как и в случае с переменными, при объявлении имён функций рекомендуется использовать camel case.

Кроме того, в качестве префиксов следует использовать описательные существительные и глаголы. Например, если мы объявляем функцию для получения имени, то имя функции должно быть getName.

// плохо
function name(dogName, ownerName) {
  return '${dogName} ${ownerName}';
}

// хорошо
function getName(dogName, ownerName) {
  return '${dogName} ${ownerName}';
}

4. Соглашение об именовании констант

Константы JavaScript также чувствительны к регистру. Однако эти константы следует писать в верхнем регистре, поскольку они являются неизменяемыми переменными.

var LEG = 4;
var TAIL = 1;
var MOVABLE = LEG + TAIL;

Если имя объявления переменной содержит более одного слова, то следует использовать UPPER_SNAKE_CASE.

var DAYS_UNTIL_TOMORROW = 1;

Все константы должны быть определены в начале файла, метода или класса.

5. Соглашение об именовании классов

Правила именования классов JavaScript довольно похожи на правила именования функций. Мы должны использовать описательные названия, поясняющие возможности класса.

Основное различие между именами функций и классов заключается в том, что для имён классов мы должны использовать Pascal case.

class DogCartoon {
  constructor(dogName, ownerName) {
    this.dogName = dogName;
    this.ownerName = ownerName;
  }
}

var cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');

6. Соглашение об именовании компонентов

JavaScript-компоненты широко используются во фронтенд-фреймворках, таких, как React. Хотя компоненты используются в DOM, рекомендуется обращаться с ними аналогично классам и использовать Pascal case для определения имён.

// плохо
function dogCartoon(roles) {
  return (
    < div >
      < span > Dog Name: { roles.dogName } < /span>
      < span > Owner Name: { roles.ownerName } < /span>
    < /div>
  );
}

// хорошо
function DogCartoon(roles) {
  return (
    < div >
      < span > Dog Name: { roles.dogName } < /span>
      < span > Owner Name: { roles.ownerName } < /span>
    < /div>
  );
}

Поскольку начальная буква всегда пишется в верхнем регистре, компонент при использовании выделяется на фоне обычных HTML- и веб-компонентов.

<div>
  <DogCartoon
    roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }}
  />
</div>

7. Соглашение об именовании методов

Несмотря на некоторые различия, структура функции и метода JavaScript довольно похожа. Поэтому и правила именования одинаковы.

Мы должны использовать camel case для объявления методов JavaScript и использовать глаголы в качестве префиксов, чтобы сделать имена более осмысленными.

class DogCartoon {
  constructor(dogName, ownerName) {
    this.dogName = dogName;
    this.ownerName = ownerName;
  }

  getName() {
    return '${this.dogName} ${this.ownerName}';
  }
}

var cartoon= new DogCartoon('Scooby-Doo', 'Shaggy');

console.log(cartoon.getName());
// "Scooby-Doo Shaggy"

8. Соглашение об именовании приватных функций

Знаки подчёркивания (_) широко используются в таких языках, как MySQL и PHP, для определения переменных, функций и методов. Однако в JavaScript знак подчёркивания используется для обозначения приватных переменных или функций.

Например, если у вас есть имя приватной функции, например toonName, вы можете обозначить её как приватную функцию, добавив в качестве префикса знак подчёркивания (_toonName).

class DogCartoon {
  constructor(dogName, ownerName) {
    this.dogName = dogName;
    this.ownerName = ownerName;
    this.name = _toonName(dogName, ownerName);
  }
  _toonName(dogName, ownerName) {
    return `${dogName} ${ownerName}`;
  }
}

var cartoon = new DodCartoon('Scooby-Doo', 'Shaggy');

// good
var name = cartoon.name;
console.log(name);
// "Scooby-Doo Shaggy"

// bad
name =cartoon._toonName(cartoon.dogName, cartoon.ownerName);
console.log(name);
// "Scooby-Doo Shaggy"

9. Соглашение об именовании глобальных переменных

Для глобальных переменных JavaScript не существует специальных стандартов именования.

Рекомендуется использовать camel case для изменяемых глобальных переменных и uppercase для неизменяемых глобальных переменных.

10. Соглашение об именовании имён файлов

Большинство веб-серверов (Apache, Unix) чувствительны к регистру при работе с файлами. Например, flower.jpg — это не Flower.jpg.

С другой стороны, веб-серверам, таким как IIS компании Microsoft, этот случай безразличен. В таких серверах для доступа к Flower.jpg можно использовать Flower.jpg или flower.jpg.

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

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

Заключение

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

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