Live collections

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

Создание и использование

В Bliss.js live collection создаётся с помощью метода $$ с опцией live: true. Например:

let buttons = $$('button', { live: true });

В этом примере переменная buttons содержит живую коллекцию всех элементов <button> на странице. Любое добавление нового <button> в DOM автоматически отражается в коллекции buttons.

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

  • Коллекция ведёт себя подобно массиву: можно использовать методы forEach, map, filter.
  • Методы массива, изменяющие коллекцию (push, splice), не применяются напрямую. Изменения должны происходить через DOM.

Итерация и методы

Live collection поддерживает большинство стандартных методов массивов для перебора элементов:

buttons.forEach(btn => {
    btn.textContent = 'Кнопка обновлена';
});

Методы фильтрации и поиска также применимы:

let activeButtons = buttons.filter(btn => btn.classList.contains('active'));

В отличие от обычных NodeList, коллекции Bliss.js не статичны. Если добавить новый <button>:

let newBtn = document.createElement('button');
newBtn.textContent = 'Новая кнопка';
document.body.appendChild(newBtn);

Элемент автоматически появляется в buttons, без необходимости пересоздавать коллекцию.

Поддержка событий

Live collection позволяет легко назначать обработчики событий на все элементы одновременно:

buttons.on('click', e => {
    e.target.classList.toggle('clicked');
});

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

Сочетание с селекторами

Метод $$ поддерживает комбинированные селекторы и контекст:

let liveItems = $$('.list-item.active', { live: true });
  • Можно указать конкретный контейнер для поиска элементов, используя второй аргумент:
let container = document.querySelector('.menu');
let menuItems = $$( 'li', { context: container, live: true } );

Live collection будет следить только за элементами внутри указанного контейнера.

Ограничения и особенности

  1. Методы массива не модифицируют DOM напрямую. Любые изменения структуры должны выполняться через стандартные DOM-операции (appendChild, remove, replaceWith).
  2. Производительность. При большом количестве элементов live collection может отслеживать изменения в DOM, что создаёт небольшую нагрузку на браузер.
  3. События делегирования. Использование on с live collection автоматически делегирует события, что избавляет от необходимости повторно назначать обработчики для новых элементов.

Пример комплексного применения

let items = $$('.todo-item', { live: true });

// Отметка выполненных задач
items.on('click', e => e.target.classList.toggle('done'));

// Добавление новой задачи
let addButton = document.querySelector('#add-task');
addButton.addEventListener('click', () => {
    let newTask = document.createElement('li');
    newTask.className = 'todo-item';
    newTask.textContent = 'Новая задача';
    document.querySelector('#todo-list').appendChild(newTask);
});

// Фильтрация активных задач
let activeTasks = items.filter(item => !item.classList.contains('done'));

В этом примере:

  • items всегда актуальны, отражают новые добавленные задачи.
  • Обработчик клика работает как для старых, так и для новых элементов.
  • Фильтрация возвращает только те элементы, которые соответствуют текущему состоянию DOM.

Сравнение с обычными коллекциями

Характеристика Статическая коллекция Live collection
Обновление при изменении DOM Нет Да
Использование методов массива Да Да
Поддержка событий Да, но новые элементы требуют повторного назначения Автоматическое делегирование
Контекст поиска Ограничен Поддерживается

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

Оглавление