Обратная совместимость

FullPage.js — это мощная библиотека для создания эффектных полноэкранных скроллируемых сайтов. При обновлениях библиотеки важно учитывать обратную совместимость, чтобы существующие проекты продолжали корректно работать при переходе на новые версии. Обратная совместимость касается как API, так и структуры HTML/CSS, а также поведения событий и методов.

Сохранение структуры HTML

FullPage.js ожидает определённую структуру документа. Для корректной работы каждой версии необходимо:

  • Каждый экран (section) должен быть заключён в контейнер с классом .section.
  • Для внутренних слайдов используется .slide внутри .section.
  • Контейнер всего сайта обозначается идентификатором или классом, переданным в new fullpage('#id', options).

Если структура изменяется в новой версии, старые страницы могут перестать корректно отображаться. Для обратной совместимости большинство изменений в HTML должны поддерживать старый синтаксис:

<div id="fullpage">
    <div class="section">Секция 1</div>
    <div class="section">
        Секция 2
        <div class="slide">Слайд 1</div>
        <div class="slide">Слайд 2</div>
    </div>
</div>

Методы и опции

FullPage.js со временем меняет и расширяет API, но старается сохранять старые методы. Например:

  • moveSectionUp() и moveSectionDown() остаются в актуальной версии.
  • moveTo(section, slide) также работает для перехода к определённой секции или слайду.

Новые методы часто дополняют старые, а не заменяют их, что позволяет минимизировать изменения кода при апгрейде.

Примеры изменения опций

В версиях до 4.x для вертикальной навигации использовалась опция verticalCentered: true. В новой версии она может быть заменена на CSS-правила display: flex и justify-content: center. Для обратной совместимости библиотека позволяет старый синтаксис:

new fullpage('#fullpage', {
    verticalCentered: true, // старая опция
    navigation: true,
    scrollingSpeed: 700
});

Обработка событий

FullPage.js предоставляет множество событий: afterLoad, onLeave, afterSlideLoad, onSlideLeave. При обновлении версии важно следить за сигнатурой колбэков. Для обратной совместимости:

  • Старые параметры колбэков сохраняются. Например, afterLoad(origin, destination, direction) остаётся для старых проектов.
  • Новые события могут добавляться без изменения поведения старых.

Пример использования событий с сохранением обратной совместимости:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        console.log('Текущая секция:', destination.index);
    },
    onLeave: function(origin, destination, direction){
        console.log('Покидаем секцию', origin.index);
    }
});

Поддержка старых браузеров

FullPage.js старается обеспечивать кроссбраузерность. В старых версиях активно использовался CSS-трансформ для анимаций. В новых версиях добавляется поддержка CSS Grid и современных анимаций, но старый код остаётся рабочим через поллифиллы и fallback-решения. Основные моменты:

  • IE11 поддерживается частично, без современных эффектов, но базовая функциональность (scrolling, navigation) работает.
  • Старые версии JavaScript (ES5) остаются совместимыми с большинством методов библиотеки.

Миграция между версиями

При переходе с версии 3.x на 4.x или выше необходимо:

  1. Проверить HTML-структуру секций и слайдов.
  2. Сверить используемые опции с документацией. Некоторые устаревшие опции помечены как deprecated.
  3. Проверить используемые методы и события: старые методы остаются рабочими, но новые могут быть более оптимизированными.
  4. Использовать режим совместимости при необходимости, например, подключая полифиллы или специальный скрипт fullpage.compat.js.

Пример режима совместимости для старого кода:

<script src="fullpage.compat.js"></script>
<script>
new fullpage('#fullpage', {
    navigation: true,
    scrollBar: false,
    verticalCentered: true // поддерживается старый синтаксис
});
</script>

Важные моменты обратной совместимости

  • Не удалять старые классы .section и .slide.
  • Сохранять старый синтаксис событий и методов при обновлениях.
  • Следить за опциями, помеченными как deprecated, чтобы иметь возможность обновить их позже без поломки текущей логики.
  • Проверять CSS-анимации и полифиллы, чтобы старые браузеры корректно отображали переходы.

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

Оглавление