Чистый код JavaScript — Вертикальное форматирование

Зачем форматировать код?

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

Более того, люди, читающие код, также должны выполнять его очистку. Они не должны страдать из-за плохого форматирования, которое можно легко исправить.

Вертикальное форматирование

Длина кода не должна превышать 500 строк. Большие файлы отнимают больше времени на чтение, чем на выполнение реальной работы.

Исходный код похож на газетную статью. Чем больше прочитано, тем больше информации мы получаем. Тот же принцип работает и с кодом. У нас есть введение с объявлениями переменных и функций, а ниже находится больше деталей реализации кода.

Пустые строки

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

Например, следующий фрагмент трудно прочитать:

class Foo {metho1(){}metho2(){}}
class Bar {metho1(){}metho2(){}}

Однако этот намного проще:

class Foo {
  method1() {}

  method2() {}
}

class Bar {
  method1() {}

  method2() {}
}

Трудно сосредоточиться на определенном разделе кода, когда все части соединены вместе.

Вертикальная плотность

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

Объявления переменных можно группировать без пустых строк отдельно от классов следующим образом:

let x = 1;
let y = 2;

class Foo {
  method1() {}

  method2() {}
}

class Bar {
  method1() {}

  method2() {}
}

Вертикальное расстояние

Необходимость переходить от одной функции к другой и постоянно пролистывать страницу вверх и вниз, чтобы прочитать код, отнимает много времени.

Более того, приходится просматривать множество файлов, чтобы найти оригинальное определение какого-либо элемента.

Чтобы избежать этого, связанные концепции должны находиться близко друг к другу.

Объявления переменных

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

Переменные управления циклами следует объявлять в операторе цикла, чтобы читатели знали, что он используется в цикле.

Переменные экземпляра

Переменные экземпляра должны быть объявлены в верхней части класса. Их можно поместить в constructor для удобства использования или изменения.

Для примера возьмем следующий класс:

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  getPoint() {}

  setPoint() {}
}

Он намного чище, чем этот:

class Point {
  getPoint() {}

  setPoint() {}

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

Код инициализации для класса должен находиться сверху (в данном случае он помещен в constructor).

Зависимые функции

Зависимые функции следует располагать близко друг к другу, чтобы избежать необходимости просматривать файл в поисках исходных определений вызываемых функций.

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

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

class Foo {
  foo() {
    this.bar();
  }

  bar() {
    this.baz();
  }

  baz() {}
}

Связанный код

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

Например, в следующем классе есть методы, которые тесно связаны друг с другом:

class Assert {
  assertTrue() {}

  assertFalse() {}

  assertNotUndefined() {}
}

Все 3 элемента утверждают о выполнении какого-либо условия, поэтому они являются связанными концепциями и должны располагаться рядом.

Вертикальный порядок

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

Таким образом, приведенный выше пример можно применить и в данном случае:

class Foo {
  foo() {
    this.bar();
  }

  bar() {
    this.baz();
  }

  baz() {}
}

foo вызывает bar для каких-либо действий, а bar вызывает baz для других целей. Таким образом, foo относится к высшему уровню, поскольку вызывается в первую очередь, а затем вызовы спускаются вниз по цепочке к baz.

Заключение

Форматирование кода играет важную роль и упрощает чтение и поддержание кода.

Для начала необходимо оценить вертикальное форматирование кода. В каждом файле должны быть тысячи или более строк. Кроме того, между группами кода, такими как объявления функций и переменных, необходимо оставлять пустые строки.

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

Переменные экземпляра должны находиться сверху для упрощения поиска. Другие объявления переменных также должны располагаться близко друг к другу и находиться рядом с местом использования для минимизации прокрутки.

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

Читайте также:

• Что значит this в JavaSсript?
• Даты-заглушки в модульных тестах на JavaSсript
• Декораторы в JavaScript

---

Перевод статьи John Au-Yeung: JavaScript Clean Code — Vertical Formatting