Логирование событий

fullPage.js предоставляет мощный механизм работы с событиями, позволяющий отслеживать действия пользователя и управлять поведением страниц. Логирование событий необходимо для отладки, анализа взаимодействия и динамической подстройки интерфейса.

Основные события

Библиотека поддерживает несколько категорий событий:

  1. Навигационные события

    • onLeave(origin, destination, direction) — вызывается при уходе с секции. Параметры:

      • origin — объект секции, из которой уходит пользователь.
      • destination — объект секции, в которую направляется пользователь.
      • direction — строка 'up' или 'down'. Используется для логирования переходов и выполнения анимаций при смене секции.
      new fullpage('#fullpage', {
  onLeave: function(origin, destination, direction){
    console.log(`Переход из секции ${origin.index} в секцию ${destination.index}, направление: ${direction}`);
  }
});

    • afterLoad(origin, destination, direction) — вызывается после полной загрузки секции. Позволяет фиксировать завершение перехода и запуск анимаций внутри секции.

      afterLoad: function(origin, destination, direction){
  console.log(`Секция ${destination.index} полностью загружена`);
}

  2. События слайдов

    • onSlideLeave(section, origin, destination, direction) — срабатывает при уходе слайдa внутри секции.

    • afterSlideLoad(section, origin, destination, direction) — вызывается после загрузки слайда. Эти события позволяют вести логирование навигации внутри секций с горизонтальной прокруткой.

      onSlideLeave: function(section, origin, destination, direction){
  console.log(`Слайд ${origin.index} покидает секцию ${section.index}, направление: ${direction}`);
}

  3. События при полной инициализации

    • afterRender() — срабатывает после полной инициализации fullPage.js, когда DOM полностью готов. Идеально для логирования стартового состояния и инициализации пользовательских скриптов.

      afterRender: function(){
  console.log('fullPage.js успешно инициализирован');
}

Логирование ошибок и предупреждений

fullPage.js может выдавать предупреждения при некорректной конфигурации или попытках использовать недоступные методы. Для отладки рекомендуется использовать сочетание событий и стандартного console.warn:

afterRender: function(){
  if(!document.querySelectorAll('.section').length){
    console.warn('Нет секций для прокрутки');
  }
}

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

  1. Сбор статистики переходов Можно записывать каждый переход пользователя для аналитики:

    onLeave: function(origin, destination, direction){
  fetch('/log', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      from: origin.index,
      to: destination.index,
      dir: direction
    })
  });
}

  2. Отладка сложных анимаций Логирование начала и конца анимации помогает выявлять несоответствия:

    afterLoad: function(origin, destination){
  console.log(`Запуск анимаций секции ${destination.index}`);
  animateSection(destination);
}

  3. Комбинированное логирование Использование нескольких событий позволяет построить полную карту действий пользователя:

    new fullpage('#fullpage', {
  onLeave: logTransition,
  afterLoad: logLoaded,
  onSlideLeave: logSlideLeave,
  afterSlideLoad: logSlideLoad
});

function logTransition(origin, destination, direction){
  console.log(`Переход ${origin.index} → ${destination.index}`);
}

function logLoaded(origin, destination){
  console.log(`Секция ${destination.index} загружена`);
}

Настройка уровней логирования

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

const logLevel = 'debug'; // debug, info, warn, error

function logEvent(message, level='info'){
  if(level === 'debug' && logLevel !== 'debug') return;
  console[level](message);
}

new fullpage('#fullpage', {
  onLeave: function(origin, destination){
    logEvent(`onLeave: ${origin.index} → ${destination.index}`, 'debug');
  },
  afterLoad: function(origin, destination){
    logEvent(`afterLoad: ${destination.index}`, 'info');
  }
});

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

  • Логирование должно быть оптимизировано: вызовы console.log внутри часто срабатывающих событий могут замедлять работу страницы.
  • Для продакшена лучше отключать детальное логирование и использовать централизованные методы записи в файл или базу данных.
  • Использовать флаги типа debugMode для динамического включения/отключения логирования.

Логирование событий в fullPage.js позволяет не только отлаживать интерфейс, но и строить аналитику взаимодействия пользователя с прокручиваемыми страницами, что делает его ключевым инструментом при разработке сложных веб-проектов.

Оглавление