Как сделать ваш код JavaScript простым и повысить его читабельность

1656677289 kak sdelat vash kod javascript prostym i povysit ego chitabelnost

Леонардо Лима

1*XsmvUvDELQVWAl3zhTvvlQ

По прошествии нескольких лет работы почти исключительно с Ruby on Rails и некоторым количеством jQuery я изменил свое внимание на разработку интерфейса. Я открыл для себя красоту синтаксиса JavaScript ES6 и увлекательных современных библиотек, таких как React и Vue. Я начал внедрять новые функции, используя только ES6 Vanilla JavaScript и мгновенно влюбился во всю эту новую абстракцию класса и функции со стрелками.

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

Чтобы продемонстрировать, о чем я говорю, я проведу вас через одну фантастическую сессию проверки кода, которую я провел на прошлой неделе с моим другом. Мы собираемся начать с 35-строчного класса JavaScript и закончим красивым 11-строчным фрагментом кода, используя только удобные функции. Имея терпение и стойкость, вы сможете наблюдать и применять шаблон к собственной кодовой базе.

1*2Dp7SafVzM24sQg_6YrmfA
Процесс рефакторинга описан в этой статье

Особенность

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

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

День 1 – Использование синтаксиса класса ES6 (он же обертка шаблона прототипа объекта)

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

Но подожди минутку. Если это пустой трекер индексов, то что это за иностранец TrackNewPlanAdd делать там?

День 2 – Избавление от шаблонного кода класса

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

Я узнал, что метод querySelectorAll уже возвращает список, поэтому мы можем удалить Array.from() функция от Array.from(document.getElementsByClassName('js-empty-index-tracking')) `. Помните, что метод getElementsByClassName возвращает объект.

Кроме того, поскольку основной обязанностью является связывание элементов HTML, document.addEventListener('DOMContentLoaded') Вызов функции больше не относится к файлу.

Хорошая работа!

День 3 – Удаление старых практик ES5 и еще большая изоляция обязанностей.

Если обратить пристальное внимание, то нет SuccessPlanTracker в коде выше — его постигла та же участь, что и старика EmptyIndexTracker. Мышление, убивающее классы, однажды установлено, распространяется и приумножается. Но не бойся, мой добрый парень.

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

Вам не кажется, что использование абстракции класса ES6 было перебором?

Вы также заметили, что я удалил экземпляры переменных в верхней части файла? Эта практика снова монтируется в ES5 и теперь нам не нужно об этом так сильно беспокоиться, поскольку у нас есть синтаксис ES6+.

Наконец, последнее большое изменение в этой третьей версии. Наш пустой связатель трекера индексов теперь производит только одно: связывает элементы.

После этих шагов код очень приблизился к принципу единой ответственности – одному из важнейших принципов SOLID.

День 4 — избегание нечистоплотных манипуляций DOM

Эй, теперь есть больше строк, ты лжец!

Дело в том, что наша третья версия была немного сломана. Мы неправильно изменяли наборы данных DOM Elements в строке properties.emptyIndexAction = button.dataset.trackingIdentifier;.

Свойство одной кнопки передавалось другой кнопке, что приводило к перепутанным событиям отслеживания. Чтобы разрешить эту ситуацию, мы сняли ответственность за назначение emptyIndexAction свойство из цикла привязки к надлежащей функции путем создания собственного метода с областью видимости trackAction().

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

Наконец, чтобы завершить и записать

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

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

ProTip на вылет: Вот очень полезная шпаргалка ES6 (ES2015+).

*Привет @anderson06 за то, что он такой хороший приятель по коду, который дает мне отличные отзывы.

Добавить комментарий

Ваш адрес email не будет опубликован.