Skip to content

Latest commit

 

History

History
98 lines (68 loc) · 8.17 KB

00035.md

File metadata and controls

98 lines (68 loc) · 8.17 KB
Raw

Чистый код

Написание чистого кода

Разработчики тратят НАМНОГО больше времени на чтение кода, чем на его написание. Это верно даже с вашим собственным кодом. Чтобы вы и разработчики, которым понадобится использовать, поддерживать или развивать ваш код, не ломали голову, пожалуйста, научитесь писать читаемый код!

Рассмотрим следующие 2 фрагмента JavaScript:

  1. Уродливый, трудночитаемый код (а-а-а, мои глаза):
const x =
function(z) {
let w = 0;z.forEach(
function(q){
     w += q;
});return w;
};

x([2, 2, 2]);
  1. Чистый и легко читаемый код:
const sumArray = function(array) {
  let sum = 0;
  array.forEach(function(number) {
    sum += number;
  });
  return sum;
};

sumArray([2, 2, 2]);

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

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

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

Простые правила

  1. Отступ: не имеет значения, какой стиль отступа вы используете. Различные руководства по стилю JS рекомендуют разные варианты, и разницы не особо много. Важно только одно - это единый стиль. В наших примерах мы будем использовать 2 пробела для отступов.

  2. Точки с запятой: точки с запятой необязательны в JavaScript, ведь компилятор JS автоматически добавит их, если нужно. Но это МОЖЕТ привести к ошибкам, поэтому лучше привыкнуть к добавлению точек с запятой. Просто сделайте это!

  3. Длина строки кода: Опять же, разные руководства по стилю задают разные ограничения, но почти ВСЕ предлагают ограничить длину каждой строки кода. Это правило не так строго, но ваш код будет легче читать, если вы разбиваете строки длиной более 80 символов. Многие редакторы кода показывают, когда вы перешли этот порог. При ручном разделении строк вы должны сделать двойной отступ для второй строки и попытаться разделить строки после оператора или запятой:

  let reallyReallyLongLine = something + somethingElse + anotherThing +
      howManyTacos + oneMoreReallyLongThing;
  1. Наименование: имена функций и переменных должны быть наглядными. Всегда используйте camelCase. Чтобы все было единообразно и легко читалось, переменные всегда должны начинаться с существительного, а функции - с глагола и самое главное на английском. Можно использовать отдельные символы в качестве имен переменных в контексте цикла или callback-функции (функции обратного вызова), но не в других местах.
// Хорошо
const numberOfThings = 10;
const myName = "Тор";
const selected = true;

// Плохо (они начинаются с глаголов, могут быть перепутаны с функциями)
const getCount = 10;
const isSelected = true;

// Хорошо
function getCount () {
  return numberOfThings;
}

// Плохо (это существительное)
function myName () {
  return "Тор";
}

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

  1. Список советов по чистому коду.

  2. Роль комментариев в коде.

  3. Советы по стилю кода.

  4. eng Список советов по чистому коду.

  5. eng Статья и еще статья о роли комментариев в коде.

Дополнительные ресурсы