destroy

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

Основное назначение

destroy удаляет все внутренние структуры Packery, включая:

  • Ссылки на элементы сетки.
  • Обработчики событий resize, drag и пользовательские колбэки.
  • Любые временные данные, хранящиеся внутри экземпляра Packery.

После вызова destroy объект Packery становится неактивным, и повторный вызов методов управления макетом (например, layout или append) приведет к ошибкам. Это делает метод незаменимым для корректного освобождения памяти и предотвращения утечек.

Синтаксис

let pckry = new Packery('.grid', {
  itemSelector: '.grid-item',
  gutter: 10
});

pckry.destroy();
  • pckry — экземпляр Packery.
  • Метод не принимает аргументов.
  • После выполнения метод возвращает undefined.

Влияние на DOM

Метод destroy не удаляет сами DOM-элементы, он лишь отключает функциональность Packery. Если требуется удалить элементы из DOM, это необходимо сделать отдельно:

pckry.destroy();
document.querySelector('.grid').remove();

Таким образом, destroy отвечает только за корректное завершение работы Packery с существующими элементами.

Использование при динамических изменениях

При работе с динамическими сетками, где элементы добавляются или удаляются после инициализации, destroy позволяет:

  • Перезапустить макет с новым набором элементов.
  • Освободить ресурсы перед полной заменой сетки.
  • Предотвратить дублирование событий, если Packery инициализируется повторно на тех же элементах.

Пример последовательного использования:

// Инициализация
let grid = document.querySelector('.grid');
let pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10
});

// Добавление новых элементов
let newItems = document.querySelectorAll('.new-item');
newItems.forEach(item => grid.appendChild(item));

// Перестроение макета
pckry.reloadItems();
pckry.layout();

// Полная очистка
pckry.destroy();

// Инициализация с нуля
pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 20
});

Особенности интеграции с Draggabilly

Если элементы сетки используют Draggabilly для перетаскивания, перед вызовом destroy важно отключить взаимодействие с drag-событиями. Packery автоматически снимает обработчики, но прямое уничтожение Draggabilly экземпляров предотвращает потенциальные утечки:

let draggies = pckry.getItemElements().map(item => new Draggabilly(item));
pckry.destroy();
draggies.forEach(draggie => draggie.destroy());

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

  • destroy следует использовать всегда, когда сетка удаляется или полностью заменяется.
  • Не вызывать методы Packery после destroy без повторной инициализации.
  • Для оптимизации производительности лучше комбинировать destroy с reloadItems и layout при динамических изменениях контента.
  • Контролировать удаление событий drag и resize для предотвращения «висящих» обработчиков.

Отличие от remove

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

Итоговое поведение

После вызова destroy:

  • Все внутренние массивы и ссылки на элементы очищаются.
  • Обработчики событий полностью удаляются.
  • Экземпляр Packery становится неактивным.
  • DOM-структура остаётся нетронутой.

Метод destroy является фундаментальным инструментом управления жизненным циклом сетки и обеспечивает надежное завершение работы Packery в сложных динамических интерфейсах.

Оглавление