Паттерн Factory (Фабрика), туториал: создание формы в фабрике

С помощью Factory-подхода можно реализовать класс/функцию, генерирующую единым интерфейсом объекты с разной логикой. То есть вместо ручного создания каждого объекта/элемента/компонента, можно прописать параметры в отдельном конфиге, а фабрика по этому конфигу сгенерирует из полученных данных нужные объекты/элементы/компоненты.

К примеру, частый юзкейс такого подхода во фронтенде — динамическое создание компонентов на основе JSON-конфигов от бэкенда или CMS.

Представьте, что есть конфиг формы с текстовым полем, селектом и чекбоксом:

const formConfig = [
  { type: "text", label: "Имя", name: "name" },
  { type: "select", label: "Страна", options: ["Россия", "США"] },
  { type: "checkbox", label: "Согласие" },
];

Фабрика обработает этот массив и вернёт соответствующие DOM-элементы.

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

• логика рендеринга каждого элемента инкапсулирована в своей ветке
• все элементы создаются через один единый интерфейс (метод createField)
• сама фабрика не хранит конфиг, его можно редактировать отдельно и получать его извне
• добавление нового типа поля требует только описание в конфиге и создание отдельной ветки в фабрике

В JS реализовать Фабрику можно как с помощью класса, так и с помощью обычного объекта с методами. Суть паттерна — не в синтаксисе, а в идее делегирования создания объектов отдельной сущности. Вот так выглядит пример фабрики-объекта:

const FormFieldFactory = {
  createField(config) {},
};