Уничтожение элементов

В библиотеке Muuri управление элементами сетки не ограничивается только их созданием и сортировкой — ключевое место занимает возможность удаления или уничтожения элементов. Правильное уничтожение элементов важно для освобождения ресурсов, предотвращения утечек памяти и поддержания производительности интерфейса при динамическом изменении содержимого.

Методы удаления элементов

grid.remove()

Метод remove позволяет удалить один или несколько элементов из сетки. Он принимает следующие параметры:

grid.remove(items, options);

  • items — элемент, массив элементов или объект Muuri.Item.

  • options — объект с дополнительными настройками удаления:

    • removeElements (boolean) — если true, DOM-элементы будут удалены из документа. По умолчанию true.
    • sort (boolean) — если true, элементы после удаления пересортируются. По умолчанию true.
    • layout (boolean) — если true, после удаления будет выполнена новая компоновка сетки. По умолчанию true.

Пример:

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

В этом примере все элементы с классом .to-remove будут удалены из DOM и сетки, а оставшиеся элементы перераспределены.

item.remove()

Каждый объект Muuri.Item имеет собственный метод remove. Он обеспечивает более точечное управление, если нужно удалить элемент по ссылке на объект Item.

item.remove([options]);

Параметры идентичны опциям grid.remove(). Пример удаления одного элемента:

const item = grid.getItem(element);
item.remove({ removeElements: true });

Метод remove удобен в случаях, когда элементы уже обработаны сеткой и нужно удалить конкретный объект без дополнительного поиска в DOM.

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

Для полного удаления сетки, включая все элементы и внутренние слушатели событий, используется метод:

grid.destroy([keepElements]);
  • keepElements (boolean) — если true, DOM-элементы останутся на странице; если false или не указан, элементы будут удалены.

Пример:

grid.destroy(false); // Полное уничтожение сетки вместе с DOM

После вызова destroy объект grid становится недействительным, и все методы Muuri больше нельзя применять.

Важные аспекты удаления элементов

  1. Удаление из DOM и памяти Удаление элементов с помощью removeElements: true гарантирует, что ссылки на DOM очищаются и память освобождается. Без этого при динамическом создании и удалении элементов возможны утечки памяти.

  2. Обновление компоновки Если не требуется перераспределять элементы после удаления, можно указать layout: false для повышения производительности при массовом удалении.

grid.remove(items, { layout: false });
  1. Удаление элементов при фильтрации Часто элементы удаляются в процессе фильтрации контента. Например, при динамическом отображении только выбранной категории:
const hiddenItems = grid.getItems(item => !item.getElement().classList.contains('active'));
grid.remove(hiddenItems, { removeElements: true, layout: true });
  1. События при удалении Muuri генерирует события remove и removeEnd. Их можно использовать для выполнения действий после удаления, например, анимаций или логирования:
grid.on('removeEnd', (items) => {
  console.log('Удалены элементы:', items);
});

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

  • При динамических интерфейсах всегда использовать опцию removeElements: true, если элемент больше не нужен.
  • Для массового удаления элементов лучше отключать layout на время удаления и выполнять компоновку после завершения операции.
  • Если необходимо полностью уничтожить сетку и предотвратить утечки памяти, использовать destroy(false).

Примеры сложных сценариев

Удаление всех элементов с определённым условием

const itemsToDelete = grid.getItems(item => item.getElement().dataset.status === 'obsolete');
grid.remove(itemsToDelete, { removeElements: true, layout: false });
grid.layout(true); // единоразовая компоновка после удаления

Комбинированное удаление и анимация

grid.getItems('.fade-out').forEach(item => {
  item.getElement().classList.add('fade');
  setTimeout(() => item.remove({ removeElements: true }), 500);
});

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

Управление удалением элементов в Muuri — это сочетание гибкости и контроля над ресурсами. Понимание методов remove, item.remove и destroy позволяет создавать динамичные и эффективные сетки без утечек памяти и с корректной компоновкой элементов.

Оглавление