⏫ Фабричный метод - популярный паттерн, который может пригодиться. Про него часто задают на собесах, полезно знать базовые принципы:

Суть заключается в делегировании создания объектов подклассам или другим объектам.

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

Рассмотрим простой пример на 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 (данные для передачи в компонент). Она проверяет наличие компонента в карте и возвращает объект с компонентом и свойствами.

Использование фабрики в компоненте

Теперь давайте посмотрим, как можно использовать эту фабрику в родительском компоненте:

`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); } } };

Как это работает?

1. Инициализация: В момент создания компонента вызывается метод created, который создает начальный виджет через фабрику.

2. Динамическое изменение: Метод changeWidget позволяет менять тип виджета и передавать новые данные, обновляя содержимое компонента.

3. Использование ``: Мы используем динамический компонент , чтобы рендерить нужный виджет в зависимости от текущего состояния.

Преимущества подхода

1. Гибкость: Можно легко добавлять новые виды виджетов, расширяя карту widgetMap.

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

3. Упрощение управления: Благодаря динамическому созданию компонентов через фабрику, управление состоянием становится проще и понятнее.

Подробнее и с более наглядными изображениями можно почитать здесь``