Управление жизненным циклом

Библиотека Muuri предоставляет мощный инструмент для создания динамичных сеток элементов с возможностью перетаскивания, фильтрации и сортировки. Управление жизненным циклом элементов и самой сетки является ключевым аспектом при построении интерактивных интерфейсов. Жизненный цикл включает инициализацию сетки, добавление и удаление элементов, их обновление и окончательное уничтожение сетки.

Инициализация сетки

Для начала работы с Muuri создается объект сетки с помощью конструктора Muuri. Он принимает контейнер и объект настроек:

const grid = new Muuri('.grid', {
  dragEnabled: true,
  layout: {
    fillGaps: true,
    rounding: true
  },
  sortData: {
    name: (item, element) => element.getAttribute('data-name'),
    date: (item, element) => parseInt(element.getAttribute('data-date'), 10)
  }
});

Ключевые моменты при инициализации:

Контейнер – DOM-элемент или селектор, содержащий все элементы сетки.
Опции сортировки и фильтрации позволяют управлять порядком и видимостью элементов.
Drag и layout управляют взаимодействием и расположением элементов внутри сетки.

Инициализация автоматически вызывает внутреннюю функцию layout, формируя начальное расположение элементов.

Добавление элементов

Muuri позволяет добавлять новые элементы как в процессе инициализации, так и динамически после создания сетки:

const newItem = document.createElement('div');
newItem.classList.add('item');
newItem.setAttribute('data-name', 'Новый элемент');
grid.add(newItem, { index: 0 });

Особенности метода add:

items может быть одним элементом или массивом элементов.
Параметр index задает позицию нового элемента в сетке.
После добавления элементы автоматически включаются в сортировку и фильтрацию.

Удаление элементов

Для удаления элементов используется метод remove:

const itemsToRemove = grid.getItems('.remove-me');
grid.remove(itemsToRemove, { removeElements: true });

Важные моменты:

removeElements: true гарантирует удаление DOM-элемента, иначе он только исключается из сетки.
Удаление автоматически пересчитывает layout, обеспечивая корректное выравнивание оставшихся элементов.
Можно комбинировать с анимацией: сначала вызвать hide с анимацией, затем remove.

Обновление элементов

Обновление жизненного цикла подразумевает внесение изменений в существующие элементы:

grid.updateItems().layout();

updateItems синхронизирует данные с DOM-элементами.
layout перераспределяет элементы с учетом новых размеров или порядка.
Можно обновлять отдельные элементы, передавая массив: grid.update(itemsArray).layout();.

Управление состоянием перетаскивания

Muuri предоставляет события жизненного цикла для drag & drop:

grid.on('dragStart', (item) => console.log('Начало перетаскивания', item));
grid.on('dragReleaseEnd', (item) => console.log('Завершение перетаскивания', item));

Ключевые события:

dragStart, dragMove, dragReleaseStart, dragReleaseEnd – отслеживают полный цикл перетаскивания.
layoutStart, layoutEnd – сигнализируют о начале и завершении перестановки элементов.
Подписка на события позволяет интегрировать сетку с внешними процессами, например, синхронизацией с сервером.

Динамическая фильтрация и сортировка

Жизненный цикл элементов тесно связан с их видимостью и порядком:

grid.filter((item) => item.getElement().getAttribute('data-category') === 'active');
grid.sort('name', { descending: false });

filter не удаляет элементы, а скрывает их, сохраняя в памяти сетки.
sort изменяет порядок элементов, учитывая пользовательские данные (sortData).
Любая фильтрация или сортировка автоматически вызывает layout, поддерживая корректное позиционирование.

Уничтожение сетки

Завершение жизненного цикла включает полное уничтожение сетки:

grid.destroy();

После вызова destroy все события отсоединяются.
DOM-элементы остаются в контейнере, если не указано removeElements: true.
Этот этап важен при динамических SPA-интерфейсах, чтобы предотвращать утечки памяти.