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

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

Метод destroy

Синтаксис:

fullpage_api.destroy(type);

Параметры:

  • type — строка, определяющая способ уничтожения:

    • 'all' — полное удаление fullPage.js. Удаляются все встроенные обработчики событий, инлайн-стили, классы и элементы управления.
    • 'sections' — удаление только секций fullPage.js, оставляя базовую структуру DOM нетронутой.

Если параметр не указан, по умолчанию считается 'all'.

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

// Полное уничтожение плагина
fullpage_api.destroy('all');

После вызова метода destroy('all'):

  • Все события скроллинга удаляются.
  • Страница возвращается к обычной вертикальной прокрутке.
  • Секции перестают занимать 100% высоты окна.
  • Классы, добавленные библиотекой (.fp-section, .fp-tableCell, .fp-slide) удаляются.
  • Пользовательский HTML остается, но все стили, добавленные fullPage.js, сбрасываются.

Различие между 'all' и 'sections'

Параметр Действие
all Полное удаление всех функций fullPage.js, удаление событий, стилей, классов и навигации
sections Снимает обработку секций, но сохраняет базовую структуру DOM и навигацию

Использование 'sections' полезно, если требуется динамически перестроить слайды или секции без полной потери структуры страницы.

Пример:

// Удаление только секций, для динамической модификации
fullpage_api.destroy('sections');

После этого можно изменить DOM, добавить новые секции или слайды и затем повторно инициализировать fullPage.js:

new fullpage('#fullpage', {
    navigation: true,
    slidesNavigation: true,
    controlArrows: false
});

Особенности при использовании destroy

  1. События window При уничтожении экземпляра автоматически снимаются обработчики событий, такие как resize, scroll, keydown и другие, добавленные fullPage.js.

  2. Анимации и классы Все динамически добавленные классы секций (.active, .fp-completely) и слайдов (.active, .fp-slide-active) удаляются, а анимации прекращаются.

  3. Навигация Навигационные элементы (.fp-nav, .fp-slidesNav) удаляются, если использован 'all'. При 'sections' навигация может остаться, но будет недоступна для скроллинга.

  4. Пересоздание экземпляра После destroy возможно повторное создание экземпляра fullPage.js на том же элементе:

fullpage_api.destroy('all');

setTimeout(() => {
    new fullpage('#fullpage', {
        scrollingSpeed: 700,
        navigation: true
    });
}, 500);
  1. Совместимость с динамическим контентом Если секции создаются динамически через JavaScript после первичной инициализации fullPage.js, рекомендуется сначала уничтожить текущий экземпляр (destroy('sections')), обновить DOM, а затем создать новый экземпляр.

Практический пример

HTML структура:

<div id="fullpage">
  <div class="section">Секция 1</div>
  <div class="section">Секция 2</div>
  <div class="section">Секция 3</div>
</div>

<button id="reset">Сброс fullPage.js</button>

Jav * aScript:

var myFullpage = new fullpage('#fullpage', {
    navigation: true,
    scrollingSpeed: 600
});

document.getElementById('reset').addEventListener('click', function() {
    fullpage_api.destroy('all'); // Полное удаление fullPage.js
});

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

Метод destroy является ключевым инструментом при работе с динамическими сайтами на fullPage.js, обеспечивая безопасное удаление всех эффектов и подготовку DOM для последующих изменений.

Оглавление