Фильтрация коллекций

Bliss.js предоставляет мощный и лаконичный инструмент для работы с DOM и коллекциями элементов. Одной из ключевых возможностей является фильтрация коллекций, позволяющая выбирать элементы по заданным критериям без необходимости вручную перебираать массивы или использовать сложные циклы.

Метод filter

Метод filter в Bliss.js работает аналогично стандартному Array.prototype.filter, но применяется к коллекции элементов DOM, возвращаемой библиотекой. Он принимает в качестве аргумента функцию-колбэк, которая получает каждый элемент коллекции и должна возвращать true или false в зависимости от того, должен ли элемент оставаться в результирующей выборке.

// Пример: выбрать все элементы <li> с классом "active"
const activeItems = bliss.$$('li').filter(el => el.classList.contains('active'));

Ключевые моменты:

  • Колбэк вызывается для каждого элемента коллекции.
  • Возвращаемое значение true сохраняет элемент в новой коллекции.
  • Возвращаемое значение false исключает элемент из выборки.
  • Возвращается новая коллекция Bliss.js, а исходная не изменяется.

Использование селекторов внутри фильтрации

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

// Выбрать все <div> внутри .container, которые содержат <p> с текстом
const filtered = bliss.$$('.container div').filter(div => div.querySelector('p'));
  • Метод querySelector проверяет наличие вложенного элемента.
  • В фильтре можно использовать любые DOM-свойства: id, className, dataset, textContent.

Фильтрация по атрибутам и состояниям

Bliss.js упрощает работу с атрибутами и состояниями элементов. С помощью метода filter можно легко отбирать элементы с определёнными атрибутами или состояниями.

// Выбрать все кнопки, которые отключены
const disabledButtons = bliss.$$('button').filter(btn => btn.disabled);

// Элементы с определённым атрибутом data-role
const adminElements = bliss.$$('[data-role]').filter(el => el.dataset.role === 'admin');

Особенности:

  • Использование dataset позволяет читать любые data-* атрибуты.
  • Свойства DOM, такие как disabled, checked, selected, доступны напрямую.
  • Фильтрация не создаёт лишних массивов вручную, возвращая коллекцию Bliss.js для дальнейших цепочек методов.

Комбинирование фильтров и других методов Bliss.js

Коллекции Bliss.js поддерживают метод цепочек, что позволяет комбинировать фильтрацию с другими методами, например, addClass, removeClass, each, find.

// Добавить класс "highlight" ко всем активным элементам списка
bliss.$$('li')
    .filter(el => el.classList.contains('active'))
    .addClass('highlight');
  • Фильтр может быть первым шагом в цепочке, чтобы ограничить количество обрабатываемых элементов.
  • После фильтрации можно выполнять любые операции над оставшейся коллекцией.

Сложные условия фильтрации

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

const specialItems = bliss.$$('li').filter(el => 
    el.classList.contains('active') && el.dataset.priority === 'high'
);
  • Можно комбинировать несколько условий через логические операторы &&, ||, !.
  • Поддерживаются вызовы методов DOM и проверка содержимого текста через textContent.includes.

Особенности производительности

Bliss.js оптимизирует работу с коллекциями, и фильтрация не требует преобразования коллекции в массив вручную. Это снижает нагрузку на память и повышает скорость при работе с большими списками элементов.

  • Внутри filter элементы перебираются напрямую, без лишнего копирования.
  • Возвращаемая коллекция Bliss.js совместима с другими методами библиотеки, что упрощает построение цепочек операций.

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

  1. Выбор элементов формы по состоянию:
const requiredFields = bliss.$$('input, textarea')
    .filter(field => field.required && !field.value);
  1. Отбор видимых элементов для анимации:
const visibleItems = bliss.$$('.item')
    .filter(item => item.offsetWidth > 0 && item.offsetHeight > 0);
  1. Создание динамических списков с определёнными классами и атрибутами:
const featuredArticles = bliss.$$('.article')
    .filter(article => article.dataset.featured === 'true')
    .addClass('highlighted');

Фильтрация коллекций в Bliss.js объединяет лаконичность синтаксиса и гибкость стандартного filter, адаптированного для работы с DOM. Она позволяет создавать динамические интерфейсы, управлять состояниями элементов и эффективно взаимодействовать с большим количеством элементов на странице.

Оглавление