Паттерн "Фабрика" во фронтенде
Не знаю, как у остальных, а я начинаю глубже что-то понимать, когда сравниваю. Изучение Java дало мне понимание некоторых тонкостей, которые до этого ускользали от меня. Часто можно слышать, что паттерны проектирования являются сакральным знанием, которое поднимает тебя на ступень выше. С другой стороны, кроме паттернов “Одиночка”, “DTO” и “Наблюдатель”, распространённые паттерны сложно заметить в React разработке. Особенно после перехода к функциональным компонентам. А между тем, паттерн Фабрика у меня был всегда перед глазами на самом видном месте. Допустим, вы решили собрать несколько svg иконок как самостоятельные компоненты и использовать их в компоненте кнопки, так что бы рендерить эти иконки в зависимости от переданного пропа. Как поступит джун: накидает в кнопку кучу условного рендеринга или аналоги такого решения. Как поступить изящнее? Делаем файл реэкспорта нужных иконок (ограничить количество ре экспортируемых иконок важно, что бы не раздувать размер бандла). В кнопке делаем обобщённый импорт:
import * as Icons from ‘. /icons/button-icons’;
А в компоненте делаем что-то вроде такого:
const IconToRender = icons[iconNameAsAProp];
Использование TypeScript не сильно усложнит этот код. Так вот я к чему весь этот пост. Если что-то видится бесполезным, то оно видится бесполезным только с высоты текущего опыта или угла зрения. Алгоритмы, паттерны проектирования и миллионы других вещей существуют до сих пор не просто так. И это знание - одно из самых важных, пожалуй))
· 28.02
Коммент поддержки всем открытиям 🤘🏻
ответить
коммент удалён