Напишите умный код с составным шаблоном

Составной шаблон может стать вашим швейцарским армейским ножом при разработке динамических пользовательских интерфейсов. Когда мы разрабатываем веб-приложения, мы работаем с DOM на стороне клиента. Это идеально из-за того, как структурирован DOM.

Цель состоит в том, чтобы скомпоновать более одного объекта в определенную древовидную структуру, представляющую иерархию часть-целое.

Отношения часть-целое — это когда каждый объект в коллекции является частью целой композиции. Эта «цельная» композиция представляет собой набор частей. Когда мы думаем об иерархии часть-целое, это древовидная структура, в которой каждый отдельный «лист» или «узел» обрабатывается так же, как и любой другой лист или узел в иерархии. дерево, что позволяет работать с ними единообразно в нашей программе. Это означает, что набор или группа объектов (поддерево листьев/узлов) также является листом или узлом.

Вот как это выглядит, если мы посмотрим на это с визуальной точки зрения:

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

В этом посте я объясню причины, по которым важно знать составной шаблон проектирования.

Вы можете работать с коллекциями так же, как с отдельными объектами.

Работать в единообразии с объектами и коллекциями объектов — это уже мощно.

Скорее всего, вы уже работали с кодом, который его использует. Если вы знакомы с DOM, то вы уже знакомы с обходом потомков узлов DOM.

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

Рекурсия становится проще

В предыдущем примере кода мы видели, как обход DOM позволил нам выделить набор узлов DOM. Но код также показывает рекурсию в функции traverse.

Рекурсия становится легкой задачей, потому что код становится намного меньше, что упрощает его обслуживание и чтение. Нет необходимости выполнять for loop или отслеживать какое-либо состояние, чтобы пройти и получить доступ ко всем потомкам.

Вы можете найти положение любого элемента DOM

Благодаря природе составной структуры мы можем использовать эту возможность для обхода дерева узлов DOM.

Поиск положения элемента в DOM может быть кошмаром, особенно когда они настроены с разными значениями position.

Конечно, мы можем просто использовать что-то вроде myElement.getBoundingClientRect() и закругляться, так как это возвращает нам позиции. Но это не очень надежно, потому что, если вы прокручиваете страницу вниз, вы можете получить отрицательное значение (в этом случае вам нужно будет включить window.pageYOffset), поскольку оно вычисляется относительно прокручиваемого окна.

Мы можем воспользоваться шаблоном, чтобы найти позицию элемента в DOM, пройдя вверх по дереву, потому что все они имеют такой интерфейс:

Вы можете понять, как пропить дрель в реакции

Это может звучать глупо, но вы должны понимать, что детализация реквизита зависит от каждого компонента реакции, разделяющего интерфейс children (возвращаемый элемент/компоненты — это children за кулисами):

Это очень простая задача — сохранить единообразие наших объектов, когда нам нужно расширить существующие объекты, пока мы сохраняем сигнатуру или интерфейс наших листовых узлов/композитов. Это означает, что масштабируемость не будет большой проблемой в будущем.

Формы могут быть созданы с легкостью

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

Расширение класса Field было простым и коротким. Благодаря составному характеру наших экземпляров мы можем захватить все значения в красивый объект JSON, вызвав функцию получения юниформ value:

Результат:

Разработчику не нужно беспокоиться о каких-либо деталях реализации при использовании компонентов, и это позволяет ему сосредоточиться на написании фактического кода для своего приложения.

Заключение

На этом и заканчивается этот пост! Я надеюсь, что вы нашли это полезным и ждите больше в будущем!