⏫ Фабричный метод - популярный паттерн, который может пригодиться. Про него часто задают на собесах, полезно знать базовые принципы: Суть заключается в делегировании создания объектов подклассам или другим объектам. Во фронтенде использование паттерна фабричного метода особенно полезно, когда нужно динамически создавать компоненты, а также управлять их созданием в зависимости от различных условий. Например, это может пригодиться, если у вас есть несколько похожих компонентов, различающихся лишь некоторыми параметрами, и вы хотите создать единый интерфейс для их инициализации. Рассмотрим простой пример на Vue.js, где нам потребуется создавать различные виджеты, основываясь на типе данных. Пример: Создание компонента виджета Представим, что у нас есть три типа виджетов: ChartWidget, TextWidget и ImageWidget. Каждый из них отображается в интерфейсе приложения в зависимости от выбранного типа данных. Чтобы избежать избыточной логики в родительском компоненте, создадим фабрику, которая будет возвращать нужный виджет. Реализация фабрики Создадим фабричную функцию, которая принимает параметры и возвращает соответствующий компонент: // widgets/WidgetFactory.js import ChartWidget from './widgets/ChartWidget.vue'; import TextWidget from './widgets/TextWidget.vue'; import ImageWidget from './widgets/ImageWidget.vue'; const widgetMap = { chart: ChartWidget, text: TextWidget, image: ImageWidget }; export default function createWidget(type, props) { if (!widgetMap[type]) { throw new Error(`Не найден виджет для типа ${type}`); } return { component: widgetMap[type], propsData: props }; } Здесь мы используем объект widgetMap, который сопоставляет типы виджетов с соответствующими компонентами Vue. Функция createWidget принимает два параметра: type (тип виджета) и props (данные для передачи в компонент). Она проверяет наличие компонента в карте и возвращает объект с компонентом и свойствами. Использование фабрики в компоненте Теперь давайте посмотрим, как можно использовать эту фабрику в родительском компоненте: <!-- App.vue --> <template> <div id="app"> <component :is="currentWidget.component" v-bind="currentWidget.propsData"></component> </div> </template> <script> import WidgetFactory from '@/widgets/WidgetFactory'; export default { data() { return { currentType: 'chart', // Начальный тип виджета currentProps: { title: 'Мой график' }, // Данные для виджета currentWidget: null }; }, created() { this.currentWidget = WidgetFactory(this.currentType, this.currentProps); }, methods: { changeWidget(type, props) { this.currentWidget = WidgetFactory(type, props); } } }; </script> Как это работает? 1. Инициализация: В момент создания компонента вызывается метод created, который создает начальный виджет через фабрику. 2. Динамическое изменение: Метод changeWidget позволяет менять тип виджета и передавать новые данные, обновляя содержимое компонента. 3. Использование `<component>`: Мы используем динамический компонент <component>, чтобы рендерить нужный виджет в зависимости от текущего состояния. Преимущества подхода 1. Гибкость: Можно легко добавлять новые виды виджетов, расширяя карту widgetMap. 2. Отделение логики: Логика создания компонентов вынесена в отдельную фабрику, что делает код чище и легче поддерживаемым. 3. Упрощение управления: Благодаря динамическому созданию компонентов через фабрику, управление состоянием становится проще и понятнее. Подробнее и с более наглядными изображениями можно почитать здесь