Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про JavaScript: filter, decorator pattern, composition, user interface, business logic

Как правильно добавлять базовые фильтры к пользовательским фильтрам?

Вопрос проверяет понимание паттерна проектирования 'Декоратор' или композиции функций для расширения базовой фильтрации в пользовательских интерфейсах или бизнес-логике.

Короткий ответ

Базовые фильтры добавляются к пользовательским через композицию или паттерн 'Декоратор'. Сначала определяется базовая логика фильтрации, например, по диапазону дат. Затем пользовательские фильтры применяются поверх, комбинируя условия через 'И' или 'ИЛИ'. Это позволяет сохранить стандартные ограничения и добавить гибкие настройки. Реализуется через цепочку функций или объект-обёртку, который применяет все фильтры последовательно.

Длинный ответ

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

Основные подходы

Существует два основных архитектурных подхода:

  • Композиция функций (или предикатов): Каждый фильтр — это функция, принимающая данные (или критерии запроса) и возвращающая отфильтрованный результат. Базовые и пользовательские фильтры объединяются в цепочку, где результат одного передается следующему.
  • Паттерн "Декоратор" (Decorator): Создается базовый класс или объект, реализующий интерфейс фильтра. Затем он "оборачивается" декораторами, каждый из которых добавляет свою логику фильтрации. Это особенно полезно, когда фильтры имеют сложное состояние или должны применяться в определенном порядке.

Практический пример на JavaScript

Рассмотрим простой пример композиции функций для фильтрации массива объектов-пользователей.

// Базовые фильтры (системные)
const filterByActive = (users) => users.filter(u => u.isActive);
const filterByOrg = (orgId) => (users) => users.filter(u => u.orgId === orgId);

// Пользовательский фильтр (динамический)
const filterByName = (name) => (users) => users.filter(u => u.name.includes(name));

// Функция для композиции фильтров
const applyFilters = (data, filters) => {
    return filters.reduce((result, filterFn) => filterFn(result), data);
};

// Пример использования
const allUsers = [
    { id: 1, name: 'Alice', isActive: true, orgId: 101 },
    { id: 2, name: 'Bob', isActive: false, orgId: 101 },
    { id: 3, name: 'Charlie', isActive: true, orgId: 102 }
];

// Создаем цепочку: сначала базовые, потом пользовательские
const filters = [
    filterByActive,               // Базовый: только активные
    filterByOrg(101),             // Базовый: только организация 101
    filterByName('A')             // Пользовательский: имя содержит 'A'
];

const filteredUsers = applyFilters(allUsers, filters);
console.log(filteredUsers); // [{ id: 1, name: 'Alice', ... }]

В этом примере базовые фильтры (filterByActive, filterByOrg) задают обязательные условия, а пользовательский (filterByName) добавляет дополнительное уточнение. Порядок применения может быть важен: обычно базовые фильтры применяются первыми для сокращения объема данных.

Где применяется

Данный подход широко используется в:

  • Backend-разработке: Построение запросов к базе данных (например, в ORM типа Sequelize или TypeORM), где к базовому запросу (WHERE org_id = X) добавляются условия из API-параметров.
  • Frontend-разработке: Фильтрация данных в таблицах (например, в React-компонентах), где есть фиксированные фильтры (сортировка по умолчанию) и динамические, выбираемые пользователем.
  • Системах отчетности и BI-инструментах: Глобальные фильтры (например, период) комбинируются с детальными настройками пользователя.

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

Уровень

  • Рейтинг:

    3

  • Сложность:

    4

Навыки

  • JavaScript

    JavaScript

  • React

    React

Ключевые слова

#filter

#decorator pattern

#composition

#user interface

#business logic

Подпишись на Python Developer в телеграм