Во время нашего обычного процесса разработки мы обязательно столкнемся с этой ситуацией: мы обрабатываем простые объекты и сложные объекты, состоящие из простых объектов одновременно. Эти простые объекты и сложные объекты будут объединены в структуру дерева, и клиент должен поддерживать последовательность при их обработке. Например, для заказов на продукты на веб-сайтах электронной коммерции каждый порядок продукта может иметь несколько комбинаций подпоможней, такие как папки в операционной системе, в каждой папке есть несколько подраздел или файлы. Когда мы копируем, удаляем их и т. Д., Будь то папка или файл, это то же самое для США. В этом сценарии очень подходит для использования комбинированного режима для его достижения.
Базовые знания
Комбинированный режим: объединение объектов в структуру дерева, чтобы представлять «частичную» иерархию. Комбинированный режим позволяет пользователям иметь последовательность в использовании отдельных объектов и комбинированных объектов.
В режиме комбинации есть три главных героя:
(1) абстрактный компонент (компонент): абстрактный класс, который в основном определяет публичный интерфейс объектов, участвующих в комбинации
(2) Субобъект (лист): самый базовый объект, который образует комбинированный объект
(3) Композитный: сложные объекты, объединенные дочерними объектами
Ключом к пониманию паттерна комбинации является понимание согласованности комбинированного шаблона для отдельных объектов и комбинированных объектов. Давайте поговорим о реализации комбинированных моделей, чтобы углубить наше понимание.
Комбинированный режим адаптирован для динамического пользовательского интерфейса на странице. Вы можете использовать только одну жизнь = команда для инициализации некоторых сложных или рекурсивных операций для многих объектов. Комбинированный режим содержит две точки:
(1) Позвольте вам рассматривать группу объектов как конкретные объекты. Композитный объект реализует ту же операцию, что и субъекты, которые это делают. Выполнение определенной операции на комбинированном объекте приведет к тому, что все субъекты в этом объекте выполняют одну и ту же операцию. Следовательно, вы можете не только плавно заменить один объект в набор объектов, но и то же самое по очереди. Эти независимые объекты так называются слабо связаны.
(2) Комбинированный шаблон объединит набор субобъектов в структуру дерева и позволит пройти через все дерево. Это скрыт внутреннюю реализацию и позволит вам организовать суб-объекты каким-либо образом. Любой код для этого объекта (комбинированный объект) не будет зависеть от реализации внутренних субъектов.
Реализация комбинированного режима
(1) Простейший комбинированный режим
Структура DOM документов HTML является естественной структурой дерева. Самые основные элементы становятся DOM Trees и в конечном итоге формируют документы DOM. Это очень подходит для комбинированного режима.
Мы часто используем библиотеку классов JQUERY, где комбинация применяется чаще, например, часто реализуется следующий код:
$ («.
Этот простой код состоит в том, чтобы получить элемент, который класс содержит тест, а затем обработать его с помощью AddClass и removeClass. Является ли $ (". Тест") является одним из элементов или нескольких элементов, в конечном итоге он вызывает через унифицированные интерфейсы AddClass и Remoclass.
Давайте кратко имитируем реализацию AddClass:
var addClass = function (eles, classname) {if (extanceOf nodeList) {for (var i = 0, length = eles.length; i <length; i ++) {eles [i] .nodetype === 1 && (eles [i] .classname += ('' +classname +'')); }} else if (exanceOf node) {eles.nodetype === 1 && (eles.classname + = ('' + classname + '')); } else {throw "eles не html -узел"; }} addClass (document.getElementById ("div3"), "test"); addClass (document.QuerySelectorall (". Div"), "test");Этот код просто имитирует реализацию AddClass (совместимость и универсальность не рассматриваются на данный момент), и сначала судить тип узла, а затем добавить классное имя в соответствии с различными типами. Для узла или узла клиентские вызовы используют интерфейс AddClass таким же образом. Это самая основная идея комбинированного режима, используя деталь и все последовательным.
(2) Типичные примеры
Мы упомянули типичный пример: заказ продукта содержит несколько подборов продукта, а несколько подборов продукта образуют сложный заказ продукта. Из -за характеристик языка JavaScript мы упрощаем три роли комбинированной шаблона на 2 роли:
(1) Subobject: в этом примере Subobject является подготовкой продукта
(2) Комбинированный объект: это общий порядок продукта
Предположим, мы разрабатываем веб-сайт туристического продукта, который содержит два подпродукта: воздушные билеты и отели. Мы определяем субобъекты следующим образом:
Функциональный пролокоз () {} Holdorder.prototyp.create = function () {console.log ("Порядок полета создал");} function Hotelorder () {} Hotelorder.prototype.create = function () {console.log ("Отель Clevice");};};};};};};Приведенный выше код определяет два класса: класс заказа на воздушные билеты и класс заказа в отеле. Каждый класс имеет свой собственный метод создания порядка.
Далее мы создаем полный класс заказа:
function totalorders () {this.orderlist = [];} totalorders.prototype.addorder = function (order) {this.orderlist.push (order);} totalorders.prototype.create = function (order) {for (var i = 0, length = this.ordetlide.length; i <length; i ++) {this.orderlist [i]. }}Этот объект имеет три основных члена: список заказов, метод добавления порядка и метод создания порядка.
При использовании клиента следующее следующее:
var flight = new Holderorder (); flight.create (); var orders = new Totalorders (); orders.addorder (new Holderord ()); orders.addorder (new HotelOrder ()); orders.create ();
Клиентские звонки показывают два способа, один из них заключается в создании заказов на воздушные билеты, а другой - создать несколько заказов, но в конечном итоге они создаются с помощью метода создания. Это очень типичный сценарий приложения режима комбинирования.
Суммировать
Комбинированный шаблон не сложно понять. В основном он решает задачу согласованности отдельных объектов и комбинированных объектов в том, как они используются. Это отлично подходит для использования комбинаторных шаблонов, если объекты имеют очевидные иерархии и хотят использовать их равномерно. В веб -разработке эта иерархия очень распространена и очень подходит для использования комбинированных шаблонов. Особенно для JS вам не нужно придерживаться традиционной объектно-ориентированной языковой формы и гибко использовать характеристики языка JS для достижения согласованности частично и общего использования.
(1) Сценарии с использованием комбинированного режима
Используйте режим комбинации при столкновении с следующими двумя ситуациями
A. Сборник объектов, содержащих определенную иерархическую структуру (конкретная структура не может быть определена в процессе разработки)
B. Хочу выполнить некоторую операцию на этих объектах или некоторых из них
(2) Недостатки комбинированного режима
Поскольку любая операция комбинированного объекта будет вызывать одну и ту же операцию на всех субъектах, будут проблемы с производительностью, когда комбинированная структура будет большой. Кроме того, при использовании комбинации режима для инкапсуляции HTML необходимо выбрать соответствующий тег. Например, таблица не может быть использована в комбинированном режиме, а узлы листьев не очевидны.