Составьте свой код с составным шаблоном
В этом посте мы рассмотрим составной шаблон проектирования в JavaScript.
В программной инженерии составной шаблон - это шаблон, в котором группа объектов должна обрабатываться так же, как один экземпляр одного объекта, что приводит к единообразию этих объектов и композиций.
Назначение композиции - составить несколько объектов в определенную древовидную структуру. Эта древовидная структура представляет собой иерархию "часть-целое".
Чтобы понять составной паттерн более подробно, нам нужно понять, что такое часть-целое и как она будет выглядеть с визуальной точки зрения.
В терминах отношения «часть-целое» - это, по сути, когда каждый объект в коллекции является частью всей композиции. Эта вся композиция представляет собой набор частей.
Теперь, когда мы думаем о иерархии «часть-целое», это древовидная структура, в которой каждый отдельный « лист» или «узел» обрабатывается так же, как любой другой лист или узел. в дереве. Это означает, что группа или набор объектов (поддерево листьев / узлов) также является листом или узлом.
С визуальной точки зрения пример этого может выглядеть примерно так:
Теперь, когда у нас есть более четкое представление о концепции "часть-целое", давайте вернемся к термину составной. Мы сказали, что цель композиции состоит в том, чтобы составить любой из этих объектов (листьев / узлов) в дерево, представляющее эту концепцию.
Итак, в шаблоне составного проектирования каждый элемент в коллекции может содержать другие коллекции, что позволяет им создавать глубоко вложенные структуры.
Анатомия
Каждый узел в древовидной структуре имеет общий набор свойств и методов, который позволяет им поддерживать отдельные объекты и обращаться с ними так же, как с коллекцией объектов.
Этот интерфейс способствует построению и разработке алгоритмов, которые являются рекурсивными и перебирают каждый объект в составной коллекции.
Кто использует паттерн?
Операционные системы используют шаблон, который, в свою очередь, приводит к полезным функциям, например, позволяя нам создавать каталоги внутри других каталогов.
Файлы (на данном этапе мы можем называть что-либо внутри каталога «элементом», что имеет больше смысла) - это листья / узлы (части) всей композиции (каталога).
Создание подкаталога в этом каталоге также является листом / узлом, включая другие элементы, такие как видео, изображения и т. Д. Однако каталог или подкаталог также является составным, потому что он также является набором частей (объекты / файлы / и т. Д. ).
Популярные библиотеки, такие как React и Vue, широко используют составной шаблон для создания надежных многоразовых интерфейсов. Все, что вы видите на веб-странице, представлено как компонент.
Каждый компонент веб-страницы является листом дерева и может составлять несколько компонентов вместе для создания нового листа. (Когда это происходит, это составной, но по-прежнему лист дерева).
Это мощная концепция, поскольку она помогает значительно упростить разработку для потребителей библиотеки, а также делает очень удобным создание масштабируемых приложений, использующих множество объектов.
Почему нам следует заботиться об этом шаблоне?
Проще всего сказать: Потому что это мощный инструмент.
Что делает шаблон составного дизайна таким мощным, так это его способность рассматривать объект как составной объект. Это возможно, потому что все они имеют общий интерфейс.
Это означает, что вы можете повторно использовать объекты, не беспокоясь о несовместимости с другими.
Когда вы разрабатываете приложение и сталкиваетесь с ситуацией, когда имеете дело с объектами, имеющими древовидную структуру, может оказаться очень хорошим решением внедрить этот шаблон в ваш код.
Примеры
Допустим, мы создаем приложение для нового бизнеса, основная цель которого - помочь врачам получить доступ к платформам телемедицины. Они делают это, собирая свои подписи под обязательными документами, которые требуются по закону.
У нас будет класс Document, у которого будет свойство signature со значением по умолчанию false. Если врач подписывает документ, signature должен перевернуть его значение на свою подпись.
Мы также определяем для него метод sign, чтобы реализовать эту функцию.
Вот как будет выглядеть Document:
Теперь, когда мы реализуем составной шаблон, мы собираемся поддерживать методы, аналогичные тем, которые определены в Document.
А вот и красота узора. Обратите внимание на два наших последних фрагмента кода. Давайте посмотрим на это с визуальной точки зрения:
Большой! Похоже, мы на правильном пути. Мы знаем это, потому что то, что у нас есть, напоминает диаграмму, которая у нас была раньше:
Итак, наша древовидная структура содержит два листа / узла, Document и DocumentComposite. У них обоих один и тот же интерфейс, поэтому они оба действуют как «части» всего составного дерева.
Дело в том, что лист / узел дерева, который не составной (Document), не является не коллекцией или группой объектов, поэтому на этом он остановится.
Однако лист / узел, который является составным, содержит набор частей (в нашем случае items). И помните, что Document и DocumentComposite имеют общий интерфейс, общий sign метод.
Так где же в этом сила?
Что ж, даже несмотря на то, что DocumentComposite использует тот же интерфейс, потому что имеет метод sign, как и Document, на самом деле он реализует более надежный подход, сохраняя при этом конечную цель.
Итак, вместо этого:
Мы можем изменить наш код, чтобы сделать его более надежным, используя преимущества композита:
В составном подходе нам нужно только sign один раз после того, как мы добавили необходимые нам документы, и он подписал все документы.
Мы можем подтвердить это, посмотрев на результат console.log(forms):
В предыдущем примере нам приходилось вручную добавлять элементы в массив, самостоятельно перебирать каждый документ и sign их.
Не забываем также о том, что наш DocumentComposite может содержать коллекцию предметов.
Итак, когда мы это сделали:
forms.add(pr2Form) // Document
forms.add(w2Form) // DocumentНаша диаграмма превратилась в такую:
Это очень похоже на нашу исходную диаграмму, поскольку мы добавили две формы:
Однако наше дерево останавливается, потому что последний лист дерева отображает только два листа, что не совсем то же самое, что и на этом последнем снимке экрана. Если бы вместо этого мы сделали w2form составной элемент, например:
Затем наше дерево может продолжать расти:
И, в конце концов, мы все же достигли той же цели, где нам нужно было подписать наши обязательные документы:
И в этом сила составного рисунка.
Заключение
На этом этот пост завершается! Я надеюсь, что вы нашли это ценным и ждете большего в будущем!
