Метод destroy

Метод destroy полностью удаляет экземпляр Isotope, освобождая связанные с ним ресурсы и возвращая DOM‑элемент контейнера в состояние, максимально близкое к исходному.

После вызова метода:

  • прекращается управление элементами со стороны библиотеки;
  • удаляются служебные стили, добавленные Isotope;
  • удаляются обработчики событий;
  • уничтожается внутренний экземпляр компоновщика;
  • отключается логика фильтрации, сортировки и динамического расположения элементов.

Метод используется в ситуациях, когда работа библиотеки более не требуется, либо перед повторной инициализацией компонента.

Базовый синтаксис

iso.destroy()

где iso — ранее созданный экземпляр Isotope.

Пример инициализации:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

Уничтожение экземпляра:

iso.destroy();

После выполнения метода контейнер .grid перестает управляться библиотекой.

Изменения в DOM после уничтожения

Во время работы Isotope библиотека активно изменяет структуру и стили элементов. При вызове destroy происходят следующие операции.

Удаление inline‑стилей

Isotope устанавливает inline‑стили для позиционирования элементов:

position: absolute;
left: ...
top: ...
transform: ...

После уничтожения экземпляра эти стили удаляются. Элементы возвращаются к стандартному поведению потока документа.

Сброс стилей контейнера

Контейнер сетки может получать служебные стили, например:

position: relative;
height: ...

Метод destroy удаляет подобные изменения, позволяя контейнеру снова управляться CSS или другой логикой.

Снятие служебных классов

Некоторые режимы компоновки добавляют классы к контейнеру или элементам. При уничтожении экземпляра эти классы могут быть удалены, если они были добавлены библиотекой.

Внутренние процессы уничтожения

Метод destroy выполняет несколько внутренних операций.

1. Отключение обработчиков событий

Isotope использует события:

  • layoutComplete
  • arrangeComplete
  • removeComplete

При уничтожении:

  • удаляются внутренние подписки;
  • отключаются обработчики resize;
  • прекращается отслеживание изменений контейнера.

2. Очистка данных экземпляра

Экземпляр хранит информацию о:

  • элементах (items)
  • текущей сортировке
  • активных фильтрах
  • параметрах layout

Метод destroy очищает эти структуры, предотвращая утечки памяти.

3. Удаление привязки к DOM‑элементу

Isotope сохраняет ссылку на экземпляр через data внутри элемента. После уничтожения эта связь удаляется.

Это позволяет безопасно создавать новый экземпляр на том же контейнере.

Повторная инициализация после destroy

Часто метод используется для полной переинициализации сетки.

Пример

var iso = new Isotope('.grid', {
  layoutMode: 'fitRows'
});

Позже требуется изменить режим компоновки.

iso.destroy();

iso = new Isotope('.grid', {
  layoutMode: 'masonry'
});

Подход обеспечивает:

  • чистое состояние контейнера;
  • отсутствие конфликтов старых настроек.

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

В одностраничных приложениях (SPA) компоненты часто создаются и удаляются динамически.

Если компонент, содержащий Isotope, удаляется из DOM, необходимо предварительно уничтожить экземпляр.

Пример:

function removeGallery() {
  iso.destroy();
  document.querySelector('.grid').remove();
}

Это предотвращает:

  • утечки памяти;
  • зависшие обработчики событий;
  • попытки работы с отсутствующим DOM.

Использование перед полной перестройкой сетки

Иногда проще уничтожить экземпляр и создать новый, чем изменять множество параметров.

Типичная ситуация:

  • меняется структура элементов;
  • изменяется itemSelector;
  • полностью обновляется layout.

Пример:

iso.destroy();

document.querySelector('.grid').innerHTML = newContent;

iso = new Isotope('.grid', {
  itemSelector: '.card',
  layoutMode: 'masonry'
});

Разница между destroy и remove

Методы решают разные задачи.

remove

Удаляет элементы из сетки, но экземпляр продолжает работать.

iso.remove(elements);
iso.layout();

destroy

Удаляет всю систему управления сеткой.

iso.destroy();

После вызова любые методы Isotope больше не работают.

Поведение после уничтожения

После выполнения:

iso.destroy();

вызовы методов становятся недоступными.

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

iso.destroy();
iso.arrange({ filter: '.active' });

Это приведёт к ошибке, поскольку экземпляр уже не управляет DOM.

Проверка существования экземпляра

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

Пример:

if (iso) {
  iso.destroy();
  iso = null;
}

Это предотвращает повторный вызов метода.

Использование вместе с getInstance

Если экземпляр создавался сторонним кодом, можно получить его через API.

var grid = document.querySelector('.grid');
var iso = Isotope.data(grid);

if (iso) {
  iso.destroy();
}

Метод Isotope.data() возвращает экземпляр, связанный с DOM‑элементом.

Уничтожение при смене вкладок интерфейса

В интерфейсах с вкладками или модальными окнами сетка может временно исчезать.

Пример:

tabs.on('change', function() {
  iso.destroy();
});

При повторном открытии вкладки выполняется новая инициализация.

Работа с несколькими экземплярами

Если на странице используется несколько сеток, каждая из них должна уничтожаться отдельно.

var grids = document.querySelectorAll('.grid');

grids.forEach(function(grid) {
  var iso = Isotope.data(grid);
  if (iso) {
    iso.destroy();
  }
});

Использование в системах сборки интерфейсов

В современных фреймворках (React, Vue, Angular) уничтожение экземпляра должно происходить при удалении компонента.

Пример (псевдокод)

componentWillUnmount() {
  this.iso.destroy();
}

Это предотвращает:

  • утечки памяти;
  • конфликты виртуального DOM с inline‑позиционированием.

Когда использование destroy обязательно

Ситуации, в которых метод необходим:

  • удаление сетки из DOM;
  • повторная инициализация с новыми параметрами;
  • смена библиотеки компоновки;
  • отключение функциональности фильтрации и сортировки;
  • очистка ресурсов в SPA.

Типичные ошибки

Повторный вызов метода

iso.destroy();
iso.destroy();

После первого вызова экземпляр фактически перестает существовать.

Отсутствие обнуления переменной

Лучшей практикой считается очистка ссылки:

iso.destroy();
iso = null;

Это помогает сборщику мусора корректно освободить память.

Использование старых ссылок на элементы

После уничтожения layout‑позиции удаляются. Код, который рассчитывает координаты элементов, может работать некорректно.

Практический пример полного цикла

Инициализация:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

Фильтрация:

iso.arrange({
  filter: '.featured'
});

Уничтожение:

iso.destroy();
iso = null;

Повторное создание:

iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

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

В крупных приложениях неправильное управление экземплярами может привести к:

  • накоплению обработчиков событий;
  • утечкам памяти;
  • ухудшению производительности при resize.

Использование destroy гарантирует:

  • очистку внутренних структур;
  • удаление всех подписок;
  • освобождение ресурсов браузера.

Краткая схема жизненного цикла

  1. Создание экземпляра
var iso = new Isotope(...)
  1. Работа с сеткой
layout
filter
sort
add/remove items
  1. Завершение работы
iso.destroy();

После этого контейнер возвращается к обычному DOM‑поведению без участия Isotope.

Оглавление