В прошлых постах я писал, что учился в универе по технической специальности и там на предмете “Рефакторинг” я познакомился с основными техниками улучшения кода. Также в прошлом посте я писал, что активно его использовал в работе, когда поддерживал проект. Ниже кратко опишу основные приемы, которые я использовал в работе, погнали:

- Извлечение переменной Прием, выделяющий выражение в осмысленную переменную.

Проблема🙉

Например в коде есть такие конструкции: [0, 2].includes(taskIndex) и [1, 3].includes(taskIndex) taskIndex - это индекс текущей задачи. Выражения используются затем в template для отрисовки элементов по условию. И как же понять значение индексов?

Решение💡

const isMemoryStage = computed(() => [0, 2].includes(taskIndex)); const isActionStage = computed(() => [1, 3].includes(taskIndexx));

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

- Замена магического значения символьной константой

Проблема🙉

В коде есть значение, которое используется без поясняющего контекста в виде осмысленной переменной, например: if (![‘image/jpeg’, ‘image/png’, ‘image/webp’].includes(raw.type)) { ElMessage.error(‘Поддерживаются только JPEG, PNG, WEBP.’); } здесь идет перечисление допустимых методов, как можно это упроситить?

Решение💡

const allowedImageTypes = [‘image/jpeg’, ‘image/png’, ‘image/webp’]; if (!allowedTypes.includes(raw.type)) { ElMessage.error(‘Поддерживаются только JPEG, PNG, WEBP.’); } Для понимания еще пример выделения в константы, связанных с изображением: const maxMbForImage = 10; const maxPixelsImage = 6000; const minQualityImage = 0.6;

- Вынес вычислений из template в script Данный прием касается Vue, хотя думаю то же самое применимо и для других фреймворков.

Проблема🙉

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

Решение💡

вынести в script const imageSource = gender === ‘female’ ? item.imgFemale : item.img; и тогда шаблон становится линейным

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

- Принцип DRY Это один из базовых принципов, который я вообще начал применять еще на первой работе.

Проблема🙉

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

Решение💡

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

- Принцип KISS

Проблема🙉

Принцип такой же базовый как DRY, применялся еще в прошлом веке и зародился в ВМС США. Вкратце принцип утверждает, что простые системы работают лучше чем сложные. Немного абстрактно, но я применяю его так:

Решение💡

Во фронтенде всегда задаю вопросы после написания: а как можно упростить это решение? Если другой разработчик прочтет мой код, он вообще поймет что я написал? И вот на основе этого стараюсь выстраивать понятный код, опять же следуя принципам рефакторинга. Как-то так🙂

Вот и все, делитесь вашими техниками🧑‍💻 Также советую такой сайт https://refactoringu.ru/ в нем собраны основные приемы рефакторинга с примерами кода на разных языках программирования, а также паттерны проектирования.