Управление памятью

Библиотека Intro.js предназначена для создания пошаговых интерактивных руководств по интерфейсу веб-приложений. Она позволяет последовательно выделять элементы страницы, отображать подсказки и направлять пользователя через функциональные блоки. Для эффективного использования важно понимать структуру инициализации и настройки.

Инициализация осуществляется с помощью метода introJs(), который создаёт экземпляр объекта:

var intro = introJs();

После создания экземпляра можно настроить его поведение через цепочку методов, например:

intro.setOptions({
  steps: [
    { element: '#step1', intro: 'Описание первого шага' },
    { element: '#step2', intro: 'Описание второго шага' },
    { element: '#step3', intro: 'Описание третьего шага' }
  ],
  showBullets: true,
  showStepNumbers: true,
  exitOnOverlayClick: false
});

Метод start() запускает интерактивное руководство:

intro.start();

Настройка шагов и элементов

Каждый шаг определяется объектом с ключами:

  • element — селектор элемента DOM, к которому привязывается подсказка.
  • intro — текст подсказки, который будет показан пользователю.
  • position — положение подсказки относительно элемента (top, left, right, bottom, auto).
  • tooltipClass — дополнительный CSS-класс для кастомизации внешнего вида подсказки.
  • highlightClass — CSS-класс для выделения элемента.

Пример конфигурации с разными позициями подсказок:

intro.setOptions({
  steps: [
    { element: '#menu', intro: 'Главное меню', position: 'bottom' },
    { element: '#search', intro: 'Поле поиска', position: 'right' },
    { element: '#profile', intro: 'Профиль пользователя', position: 'left' }
  ]
});

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

Intro.js предоставляет методы для управления состоянием:

  • nextStep() — переход к следующему шагу.
  • previousStep() — возврат к предыдущему шагу.
  • goToStep(step) — переход к указанному шагу по номеру или селектору.
  • exit() — завершение руководства.
  • refresh() — обновление позиции подсказок при изменении DOM.

Можно контролировать завершение и переходы через события:

intro.onbeforechange(function(targetElement) {
  console.log('Перед сменой шага:', targetElement);
});

intro.onchange(function(targetElement) {
  console.log('Шаг изменён на:', targetElement);
});

intro.oncomplete(function() {
  console.log('Руководство завершено');
});

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

Для улучшения интерактивности можно добавлять кнопки и события к подсказкам. С помощью опции buttons можно кастомизировать текст и действия кнопок:

intro.setOptions({
  steps: [
    {
      element: '#step1',
      intro: 'Первый шаг с кастомными кнопками',
      buttons: [
        { text: 'Пропустить', action: intro.exit },
        { text: 'Далее', action: intro.nextStep }
      ]
    }
  ]
});

Асинхронная загрузка и динамическая генерация шагов

Intro.js поддерживает динамическое определение шагов. Это важно при работе с контентом, который подгружается после рендера страницы. Для этого используют метод setOptions или добавляют шаги через addStep:

intro.addStep({
  element: '#dynamicElement',
  intro: 'Элемент создан динамически',
  position: 'top'
});

Можно интегрировать с асинхронными операциями, например при подгрузке данных через fetch:

fetch('/api/steps')
  .then(response => response.json())
  .then(data => {
    intro.setOptions({ steps: data });
    intro.start();
  });

Кастомизация внешнего вида

Для точного контроля над стилем можно использовать CSS. Intro.js добавляет классы к подсказкам и элементам:

  • .introjs-tooltip — контейнер подсказки.
  • .introjs-helperLayer — оверлей вокруг выделяемого элемента.
  • .introjs-showElement — класс активного шага.

Пример изменения фона подсказки и шрифта:

.introjs-tooltip {
  background-color: #2c3e50;
  color: #ecf0f1;
  font-size: 16px;
}

Локализация и многоязычная поддержка

Для многоязычных приложений предусмотрена возможность локализации текста кнопок:

intro.setOptions({
  nextLabel: 'Далее',
  prevLabel: 'Назад',
  skipLabel: 'Пропустить',
  doneLabel: 'Готово'
});

Оптимизация производительности и памяти

Intro.js хранит состояние каждого шага в объекте экземпляра. Для больших руководств следует:

  • Удалять события после завершения руководства через off для предотвращения утечек памяти:
intro.offbeforechange();
intro.offchange();
intro.offcomplete();
  • Использовать refresh() только при необходимости, чтобы не перегружать обработчики событий.
  • Генерировать шаги динамически, избегая хранения большого массива шагов в памяти, если контент загружается постранично.

Эффективное управление экземплярами Intro.js и событиями позволяет минимизировать нагрузку на DOM и предотвращает замедление интерфейса при интерактивных обучающих сценариях.

Оглавление