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

Featherlight — это лёгкая библиотека для создания модальных окон в JavaScript, которая делает акцент на минимализме и гибкости. Управление жизненным циклом экземпляра, включая его уничтожение, является ключевым аспектом работы с библиотекой. Правильное уничтожение экземпляра предотвращает утечки памяти, освобождает ресурсы и обеспечивает корректное поведение приложения при динамическом создании и удалении модальных окон.

Методы уничтожения

Для удаления экземпляра модального окна используется метод .close(), который закрывает окно, и метод .destroy(), предназначенный для полного уничтожения экземпляра.

Метод .close()

var instance = $.featherlight('<p>Пример содержимого</p>');
instance.close();
  • Закрывает модальное окно.
  • Выполняет стандартные колбэки beforeClose и afterClose.
  • После вызова .close() DOM-элемент остаётся доступным, и при необходимости окно можно открыть повторно.

Метод .destroy()

var instance = $.featherlight('<p>Пример содержимого</p>');
instance.destroy();
  • Полностью уничтожает экземпляр.
  • Удаляет DOM-элемент модального окна из документа.
  • Отписывает все внутренние обработчики событий.
  • После вызова .destroy() повторное открытие через тот же объект невозможно. Для повторного использования требуется создать новый экземпляр.

Разница между close() и destroy()

Метод Действие на DOM Обработчики событий Возможность повторного открытия
close() Скрывает окно Сохраняются Да
destroy() Удаляет окно Удаляются Нет

Это различие критично для приложений, где модальные окна создаются динамически. Использование .destroy() предотвращает накопление скрытых элементов и связанных с ними слушателей событий, что особенно важно при массовом или повторяющемся создании окон.

Автоматическое уничтожение

Featherlight поддерживает автоматическое уничтожение экземпляра после закрытия через опцию persist.

$.featherlight('<p>Временное окно</p>', {
    persist: false
});
  • persist: false — модальное окно будет автоматически уничтожено после закрытия.
  • По умолчанию persist равен true, что позволяет повторно открывать одно и то же окно.

Очистка контента и ресурсов

При создании модального окна с динамическим контентом (например, загруженным через AJAX) важно очищать внутренние элементы перед уничтожением:

var instance = $.featherlight({
    ajax: 'example.html',
    afterClose: function() {
        this.$content.empty();
    }
});
  • afterClose позволяет гарантировать, что динамический контент удалён из DOM.
  • Использование .destroy() вместе с очисткой контента полностью освобождает ресурсы.

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

  1. Для одноразовых модальных окон рекомендуется использовать комбинацию persist: false и автоматического закрытия, чтобы избежать утечек памяти.
  2. Для повторно используемых окон использовать .close(), чтобы не создавать новые экземпляры без необходимости.
  3. При динамическом контенте всегда очищать DOM перед уничтожением, чтобы удалить ссылки на события или данные, связанные с элементами.
  4. Не вызывать .destroy() на экземплярах, которые могут быть открыты повторно, иначе придётся создавать новый объект каждый раз.

Управление жизненным циклом модальных окон Featherlight, особенно их уничтожением, обеспечивает стабильность приложения и чистоту DOM, что особенно критично для динамических веб-приложений с большим количеством интерактивных элементов.

Оглавление