onDestroyed

Метод onDestroyed является одним из ключевых коллбеков в библиотеке Driver.js, предназначенной для создания интерактивных пошаговых руководств по пользовательскому интерфейсу. Он срабатывает после завершения работы Driver.js, когда все шаги пройдены или когда тур был прерван программно. Использование onDestroyed позволяет выполнять операции очистки, логирование или запуск дополнительных действий после завершения интерактивного гида.

Синтаксис

driver.onDestroyed(function() {
    // Код, который выполняется после разрушения Driver.js
});

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

Основные сценарии использования

  1. Возврат элементов DOM к исходному состоянию Часто во время тура элементы получают классы или стили для подсветки. После завершения тура необходимо убрать эти изменения:
driver.onDestroyed(() => {
    const highlightedElements = document.querySelectorAll('.driver-highlighted');
    highlightedElements.forEach(el => {
        el.classList.remove('driver-highlighted');
    });
});
  1. Запуск аналитики или логирования Метод позволяет фиксировать факт завершения тура для сбора статистики:
driver.onDestroyed(() => {
    console.log('Тур завершен');
    analytics.track('tour_completed');
});
  1. Активация дополнительных UI-компонентов После завершения интерактивного тура можно включить скрытые элементы интерфейса:
driver.onDestroyed(() => {
    document.querySelector('#main-menu').style.display = 'block';
});

Взаимодействие с другими методами Driver.js

onDestroyed тесно связан с методами start(), reset(), и destroy():

  • start() инициирует тур. Коллбек onDestroyed вызовется только после завершения всех шагов.
  • reset() возвращает Driver.js к исходному состоянию без срабатывания onDestroyed.
  • destroy() полностью удаляет экземпляр Driver.js и вызывает onDestroyed.

Пример:

const driver = new Driver({
    animate: true
});

driver.defineSteps([
    {
        element: '#step1',
        popover: {
            title: 'Первый шаг',
            description: 'Описание первого шага'
        }
    },
    {
        element: '#step2',
        popover: {
            title: 'Второй шаг',
            description: 'Описание второго шага'
        }
    }
]);

driver.onDestroyed(() => {
    console.log('Экземпляр Driver.js уничтожен');
});

driver.start();

Если пользователь закроет тур досрочно, например через driver.destroy(), onDestroyed все равно будет выполнен.

Советы по использованию

  • Всегда использовать для очистки изменений DOM — это предотвращает накопление классов и стилей, оставшихся после тура.
  • Не полагаться на порядок шагов — onDestroyed срабатывает независимо от того, завершен тур полностью или прерван.
  • Можно объединять с onReset и onNext — это позволяет реализовать комплексное управление логикой интерактивного руководства.
  • Оптимизация производительности — если в коллбеке выполняются сложные операции, рекомендуется использовать requestAnimationFrame или setTimeout для отложенного выполнения, чтобы не блокировать UI.

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

const driver = new Driver({
    opacity: 0.7,
    allowClose: true
});

driver.defineSteps([
    {
        element: '#nav',
        popover: {
            title: 'Навигация',
            description: 'Здесь находится меню сайта'
        }
    },
    {
        element: '#content',
        popover: {
            title: 'Контент',
            description: 'Основная информация отображается здесь'
        }
    }
]);

driver.onDestroyed(() => {
    // Очистка стилей
    document.querySelectorAll('.driver-highlighted').forEach(el => {
        el.classList.remove('driver-highlighted');
    });
    
    // Логирование
    console.log('Тур завершен пользователем');
    
    // Активация скрытого блока
    document.querySelector('#feedback-form').style.display = 'block';
});

driver.start();

В этом примере onDestroyed обеспечивает полное восстановление интерфейса и логирование независимо от того, прошел ли пользователь весь тур или закрыл его досрочно.

Метод onDestroyed является незаменимым инструментом для контроля завершения интерактивного гида и гарантирует, что любые побочные эффекты тура будут корректно обработаны после его завершения.

Оглавление