smetaniny-react-composite v1.0.2

Шаблон "Компоновщик"

Шаблон "Компоновщик" позволяет организовать объекты в древовидную структуру для представления иерархий "часть-целое". Он позволяет клиентам работать с отдельными объектами и их композициями единообразно.

Пакет реализован в рамках изучения паттерна "Компоновщик"

PHP Abstract Factory GitHub

Что это такое?

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

Когда использовать?

• Когда объекты можно представить в виде древовидной структуры "часть-целое".
• Когда нужно, чтобы клиентский код одинаково работал как с отдельными объектами, так и с их группами.
• Когда нужно динамически строить иерархии объектов.

Как это работает?

Компоненты:

1. Компонент: Общий интерфейс для как одиночных объектов, так и их композиций.
2. Лист: Представляет отдельные объекты, которые не содержат других объектов.
3. Контейнер (Композит): Хранит другие объекты (листья или другие контейнеры) и реализует операции, которые могут быть выполнены на этих объектах.
4. Клиент: Работает с объектами через интерфейс компонента, не зная, является ли объект листом или композитом.

Плюсы

• Единообразие: Клиенты могут работать с отдельными объектами и их группами через один и тот же интерфейс.
• Простота управления сложными структурами: Упрощает работу с иерархиями объектов, позволяет легко изменять и расширять структуру.
• Гибкость: Легко добавлять новые типы компонентов (листьев и контейнеров) без изменения клиентского кода.

Минусы

• Сложность отладки: Глубокие иерархии могут усложнить отладку и отслеживание ошибок.
• Переусложнение: Использование "Компоновщика" может привести к чрезмерному усложнению системы, если структура объектов не требует сложной иерархии.
• Может ухудшить производительность: Работа с большими и сложными композициями может привести к замедлению системы из-за необходимости обхода дерева объектов.

Почему это полезно?

• Позволяет работать с объектами и их композициями единообразно.
• Упрощает управление сложными иерархиями объектов.
• Делает код гибким для добавления новых типов объектов и их структур.

Участники

• Component (Товар) — базовый интерфейс для всех товаров. Может быть как отдельным товаром (например, футболка), так и категорией товаров (например, "Одежда").
• Leaf (Товар) — представляет конкретный товар, например, футболку или джинсы. Не имеет потомков.
• Composite (Категория) — представляет категорию или подкатегорию товаров, которая может содержать как отдельные товары, так и другие категории. Например, категория "Одежда" может содержать подкатегории "Футболки", "Джинсы" и т.д.
• Client (Клиент) — взаимодействует с товарами и категориями, добавляет товары в корзину и просматривает их.

Отношения

Клиенты используют интерфейс класса Component для взаимодействия с объектами в составной структуре. Если получателем запроса является листовой объект Leaf, то он и обрабатывает запрос. Когда же получателем является составной объект Composite, то обычно он перенаправляет запрос своим потомкам - возможно, с выполнением некоторых дополнительных операций до или после перенаправления.

Паттерн "Компоновщик" может быть использован в различных ситуациях, включая:

1. Иерархия категорий товаров:

   • Реализация компонентов для категорий и подкатегорий, которые могут рендерить вложенные компоненты.

2. Композиция товаров:

   • Создание составных компонентов, таких как наборы, которые могут включать другие компоненты товаров.

3. Расширяемые системы фильтров:

   • Использование состояния и props для реализации многоуровневых фильтров в пользовательском интерфейсе.

4. Отображение списков товаров:

   • Использование методов .map() для рендеринга списков товаров и категорий в виде компонентов.

5. Адаптивные интерфейсы:

   • Создание адаптивных интерфейсов с помощью стилей и условного рендеринга для отображения разных типов контента.

6. Корзина покупок:

   • Управление состоянием корзины с помощью React Hooks (например, useState и useContext) для добавления и удаления товаров.

7. Управление акциями и скидками:

   • Применение акций в компонентах на основе состояния и props, отображая обновленные цены на товары.

8. Создание отчетов и анализа:

   • Визуализация данных о продажах с помощью графиков и таблиц, используя библиотеки для построения графиков, такие как Chart.js или D3.js.

import React, {useState} from 'react';
import {
    products,
    Filter,
    ProductList,
    Filters,
} from "react-composite";

/**
 * Компонент CompositeController отвечает за управление состоянием фильтров
 * и отображение списка продуктов на основе выбранных фильтров.
 */
const CompositeController: React.FC = () => {
    // Определяем состояние filters с использованием useState
    const [filters, setFilters] = useState<Filters>({
        category: 'Все',
        name: '',
        priceRange: [0, 10000],
    });

    // Обработчик изменения фильтров
    const handleFilterChange = (newFilters: Filters) => {
        // Обновляем состояние фильтров на основе нового значения
        setFilters(newFilters);
    };

    return (
        <div>
            <h1>Интернет-магазин</h1>
            <Filter filters={filters} onFilterChange={handleFilterChange} />
            <ProductList products={products} filters={filters} />
        </div>
    );
};

// Экспортируем компонент для использования в других частях приложения
export default CompositeController;