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

Анонимные функции

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

Возьмем, к примеру, эту стрелочную функцию:

let numberArray = [1,2,3,4];
let newNumberArray = numberArray.map((v,i) => {
    var ni = i+1 >= numberArray.length ? 0 : i+1;
    return v+numberArray[ni];
});

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

let numberArray = [1,2,3,4];
let addNextIndex = (v,i) => {
    var ni = i+1 >= numberArray.length ? 0 : i+1;
    return v+numberArray[ni];
}
let newNumberArray = numberArray.map(addNextIndex);

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

Именование переменных

Последний пример все же был не самым лучшим. Никто на самом деле не знает, не копаясь в этом, что такое v, i или ni. Эти имена переменных не будут тем, что я считаю читабельным. Разработчику-любителю потребуется добрых 10 минут, чтобы посмотреть, что map использует в качестве своих параметров, и понять тот факт, что ni представляет собой сумму текущего значения плюс значение следующего индекса (или первого индекса, если текущий индекс является последний в массиве). Мы можем улучшить это:

let numberArray = [1,2,3,4];
let addNextIndex = (value,index) => {
    var nextIndex = index+1 >= numberArray.length ? 0 : index+1;
    return value+numberArray[nextIndex];
}
let newNumberArray = numberArray.map(addNextIndex);

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

Комментарии

На одной из моих работ мы обсуждали стандарты и лучшие практики, и возникла тема комментирования. К моему удивлению, появилось мнение, которого я не ожидал. Разработчик заявил, что его код «самокомментирующий» и ему не нужны никакие комментарии в его коде. Я был сбит с толку, потому что всегда видел ценность комментирования кода, я не всегда был хорош в этом, и обычно это последнее, что я делаю, но полное игнорирование этого было для меня шоком. Правильные комментарии в нужном месте могут быть очень полезными, слишком много комментариев в слишком многих местах могут иметь противоположный эффект. Я видел и то, и другое, лучший способ, который я знаю, это сделать все возможное, чтобы сделать ваш код читабельным, а затем заполнить пробелы комментариями:

let numberArray = [1,2,3,4];
let addNextIndex = (value,index) => {
    // Get the next index of the array, or the first if index is the last
    var nextIndex = index+1 >= numberArray.length ? 0 : index+1;
    return value+numberArray[nextIndex];
}
let newNumberArray = numberArray.map(addNextIndex);

Простой комментарий может иметь большое значение.

Организация

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

  • Не бойтесь создавать файлы. Файлы – это отличный способ разделить код и сохранить читабельность.
  • Используйте множество функций.Одна функция, которая делает много вещей, всегда МЕНЬШЕ предпочтительнее множества функций. Это приведет к большей модульности и удобочитаемости.
  • Организуйте папки и файлы.Разбивайте файлы по папкам, которые имеют смысл. Создание групп для сервера, клиента, компонентов и дистрибутива поможет вам поддерживать ваш проект. Как только вы найдете методологию, придерживайтесь ее, это поможет вам вспомнить, где что находится, и поможет обучить тех, кто придет после вас.

Держать его просто глупо

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