Шаблон: фабрика.


Когда я познакомился с шаблонами проектирования, я сразу стал искать возможности применения в js (Где паттерны встречаются на практике, для решения каких практических задач их нужно использовать). Поначалу я недоумевал: все с чем я работал — шаблоны не использовало. Я попросту не мог понять зачем. внятного ответа на вопрос для каких практических задач нужно использовать тот или иной шаблон проектирования я не нашел. Со временем я переступил ту черту, которая отделяет «Верстальщика» от «веб-разработчика», и те поиски кажутся для меня наивными. НО претендент создан, в рунете я такой инфы не мог найти, а значит, пора этой инфой поделиться.

Если вы не в теме,то для начала рекомендую ознакомиться с тем что такое шаблон проектирования «Абстрактная Фабрика», вот тут хорошее описание в доступной форме .

Теперь собственно задача: Страница редактирования профиля пользователя, на которой отражена информация о пользователе — Имя, место работы, аватар, страна, мэйл, сайт, соц. сети, краткая биография. Инфа доступна для редактирования с помощью контекстных инструментов редактирования информации (по-простому: карандашик возле текста, по щелчку на который появляется форма редактирования вместо текста).

По определенным причинам на серверной стороне, было принято решение для каждой отдельной порции информации о пользователе использовать отдельную форму, атрибут action которой, будет содержать URL на котором принимается AJAX запрос для каждой формы свой.

Что имеем по факту: Известное множество форм, с индивидуальным количеством полей и индивидуальным контейнером в верстке для вывода статичных данных (значения полей формы). Также необходимо учитывать что у каждой порции информации о пользователе есть 2 состояния: Состояние редактирования, и состояние отображения, которые переключаются по нажатию на «карандашик».

Логически это набор схожих сущностей с различным набором данных, но общей структурой. Как раз то, что описывает паттерн фабрики. Чтобы в этом убедиться, проведем анализ и спроектируем наш функционал в виде UML диаграммы (прошу сильно не ругать, последний раз работал с UML на первых курсах универа.)

диаграмма Паттерна Абстрактная фабрика

Ниже я привожу пример своей реализации этой задумки.

В итоге: Мы с вами видим конкретный рабочий пример полезного применения шаблона проектирования «Абстрактная фабрика» в js.

Надеюсь был полезен, все вопросы и предложения оставляйте в комментариях ниже.


комментарии: