destroy

Метод destroy используется для полного удаления экземпляра тура, освобождения всех ресурсов и очистки всех DOM-элементов, связанных с текущим туром. В отличие от метода cancel, который просто завершает тур, destroy полностью разрушает объект тура, делая его недоступным для дальнейшего использования, если не будет создан заново.

Синтаксис

tour.destroy();
  • tour — экземпляр объекта Shepherd.Tour.
  • Метод не принимает аргументов.
  • Возвращает undefined.

Основные эффекты вызова destroy

  1. Удаление всех шагов Все шаги, добавленные через addStep, будут удалены. После вызова destroy попытка доступа к шагам вернет пустой список.

    console.log(tour.steps); // []

  2. Удаление DOM-элементов Все всплывающие подсказки, оверлеи и элементы подсветки, создаваемые туром, будут удалены из DOM. Это особенно важно при динамических интерфейсах с частой сменой контента.

  3. Отмена всех событий Все обработчики событий, привязанные к шагам тура или глобально к объекту тура, будут автоматически удалены. Это предотвращает утечки памяти и нежелательные реакции после завершения тура.

  4. Сброс внутренних состояний После вызова destroy объект тура теряет все данные о текущем шаге, истории навигации и настройках. Экземпляр становится фактически неактивным.

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

import Shepherd from 'shepherd.js';

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    classes: 'shadow-md bg-purple-dark',
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  id: 'intro',
  text: 'Добро пожаловать в тур!',
  attachTo: { element: '.intro', on: 'bottom' },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

tour.start();

// Позже, после завершения использования тура
tour.destroy();

В этом примере после вызова tour.destroy() все подсказки будут удалены, а объект tour перестанет функционировать.

Отличие destroy от cancel

  • cancel просто останавливает тур, оставляя экземпляр доступным для повторного запуска:
tour.cancel();
tour.start(); // можно снова запустить
  • destroy полностью удаляет тур и делает повторный запуск невозможным без создания нового экземпляра:
tour.destroy();
tour.start(); // ошибка, объект тур уже не существует

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

  • Использовать destroy при переходе между страницами или динамическом обновлении интерфейса, чтобы не оставлять «мертвые» элементы в DOM.
  • Вызывать после полного завершения тура, если повторное использование не планируется.
  • Не использовать совместно с cancel без необходимости, так как destroy уже полностью очищает все состояния.

Связанные методы

  • next() — переход к следующему шагу.
  • back() — возвращение к предыдущему шагу.
  • start() — запуск тура с первого шага.
  • cancel() — прекращение тура без удаления экземпляра.

Метод destroy является ключевым инструментом управления жизненным циклом тура в Shepherd.js, обеспечивая безопасное и полное удаление всех связанных ресурсов.

Оглавление