Функция up.destroy

up.destroy — это ключевой метод библиотеки Unpoly, предназначенный для безопасного удаления компонентов страницы и связанных с ними ресурсов. В отличие от простого удаления DOM-элементов через стандартные методы JavaScript (remove(), innerHTML = ''), up.destroy учитывает внутренние механизмы Unpoly: события, привязанные обработчики, таймеры и кеширование фрагментов. Это обеспечивает корректную очистку и предотвращает утечки памяти.

Синтаксис

up.destroy(element, options)

Параметры:

  • element — элемент DOM или CSS-селектор, который необходимо удалить.
  • options — объект с дополнительными настройками удаления (необязательный).

Пример:

up.destroy('#modal-window');
up.destroy(document.querySelector('.notification'));

Основные возможности

  1. Удаление с учетом Unpoly-событий up.destroy автоматически вызывает все необходимые события жизненного цикла:

    • up:destroy для самого элемента.
    • up:destroy для всех вложенных компонентов.

    Это позволяет корректно очищать дочерние фрагменты и связанные обработчики.

  2. Поддержка CSS-анимаций Если для элемента настроены CSS-анимации скрытия (up-hide), up.destroy выполнит удаление после завершения анимации. Это обеспечивает плавный визуальный эффект без необходимости вручную управлять задержками.

    up.destroy('#alert-box', { animate: true });

  3. Очистка кеша Unpoly хранит ранее загруженные фрагменты страницы для ускорения навигации. up.destroy удаляет элемент и освобождает его из кеша, что предотвращает случайное восстановление удалённых компонентов при навигации назад.

  4. Удаление с делегированными обработчиками Элементы Unpoly часто используют делегирование событий через up.on. Прямое удаление через remove() оставляет обработчики активными, что может приводить к утечкам памяти. up.destroy корректно снимает все привязки событий.

Параметры объекта options

  • animate: Boolean — запуск анимации при удалении (по умолчанию false).
  • force: Boolean — принудительное удаление даже если элемент заблокирован или находится в процессе анимации (по умолчанию false).
  • silent: Boolean — подавление событий up:destroy (по умолчанию false).

Пример с параметрами:

up.destroy('#sidebar', {
  animate: true,
  force: true,
  silent: false
});

Возврат значения

up.destroy возвращает Promise, который разрешается после полного удаления элемента и завершения анимаций. Это позволяет использовать метод в цепочках асинхронных операций.

up.destroy('#popup').then(() => {
  console.log('Элемент удалён и события обработаны');
});

Взаимодействие с другими методами Unpoly

  • up.fragment: если элемент был загружен с помощью up.fragment, его удаление через up.destroy автоматически освобождает внутренний кеш.
  • up.render: при перерисовке фрагмента старый элемент, если его удалить через up.destroy, корректно вызовет все события up:destroy перед вставкой нового содержимого.
  • События жизненного цикла: использование up.destroy гарантирует вызов всех стандартных событий Unpoly (up:destroy, up:removed) без необходимости вручную триггерить их.

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

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

Примеры использования

Удаление всплывающего окна с анимацией:

up.destroy('#toast', { animate: true });

Принудительное удаление элемента, который блокируется текущей операцией:

up.destroy('.loading-indicator', { force: true });

Удаление элемента без вызова событий:

up.destroy('#temp-element', { silent: true });

Асинхронная цепочка удаления с последующей операцией:

up.destroy('#modal').then(() => {
  console.log('Модальное окно удалено, можно продолжать обработку');
});

up.destroy является важным инструментом управления динамическими компонентами на страницах Unpoly, обеспечивая корректное удаление, очистку ресурсов и безопасное взаимодействие с событиями и кешем.

Оглавление