Профилирование производительности

Featherlight — это лёгкая и минималистичная библиотека для создания модальных окон в JavaScript. Она разработана для того, чтобы обеспечивать базовый функционал модальных окон без перегрузки интерфейса и кода. Основные возможности включают поддержку контента из DOM, Ajax-запросов и изображений, простую настройку анимаций и событий.

Подключение библиотеки производится стандартным способом: через CSS и JS-файлы. Важно подключать jQuery перед Featherlight, так как библиотека построена на его основе.

<link href="featherlight.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="featherlight.min.js"></script>

Для открытия модального окна достаточно добавить атрибут data-featherlight к элементу:

<a href="#demo-content" data-featherlight="inline">Открыть окно</a>
<div id="demo-content" style="display:none;">
    Контент модального окна
</div>

Настройка и параметры

Featherlight предоставляет несколько ключевых опций, которые настраиваются при инициализации:

  • targetAttr — определяет, какой атрибут использовать для источника контента. По умолчанию href.
  • type — указывает тип контента: image, iframe, ajax или inline.
  • afterOpen, beforeClose — хуки для выполнения кода после открытия или перед закрытием модального окна.
  • persist — сохраняет состояние DOM при повторном открытии.

Пример передачи опций:

$.featherlight('#demo-content', {
    afterOpen: function() {
        console.log('Модальное окно открыто');
    },
    beforeClose: function() {
        console.log('Модальное окно закроется');
    }
});

Работа с контентом

Inline-контент используется для отображения скрытых элементов страницы. Он не требует дополнительных запросов и загружается мгновенно.

Ajax-контент позволяет подгружать HTML с сервера. Featherlight автоматически создаёт запрос и вставляет результат в тело модального окна:

$.featherlight('/ajax/content.html', {
    type: 'ajax',
    afterContent: function() {
        console.log('Контент загружен');
    }
});

Изображения открываются с автоматической подгонкой под окно браузера. Featherlight управляет масштабированием и центрированием:

<a href="image.jpg" data-featherlight="image">Посмотреть изображение</a>

Iframe используется для отображения внешних страниц:

$.featherlight('<iframe src="https://example.com" width="600" height="400"></iframe>');

События и колбэки

Featherlight имеет развитую систему событий:

  • beforeOpen и afterOpen — перед и после открытия окна.
  • beforeClose и afterClose — перед и после закрытия.
  • afterContent — после загрузки контента (важно для Ajax и iframe).

Пример подписки на события через jQuery:

$(document).on('featherlight:afterOpen', function(event) {
    console.log('Модальное окно открылось');
});

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

Featherlight использует CSS для стилизации. По умолчанию окно имеет фиксированное позиционирование и плавное появление. Для изменения анимаций или размеров можно переопределять следующие классы:

  • .featherlight — контейнер окна.
  • .featherlight-content — блок с контентом.
  • .featherlight-close — кнопка закрытия.

Пример изменения стилей через CSS:

.featherlight {
    background: rgba(0, 0, 0, 0.85);
}

.featherlight-content {
    border-radius: 8px;
    padding: 20px;
}

.featherlight-close {
    color: #fff;
    font-size: 18px;
}

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

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

  • Использовать inline-контент для быстрого открытия без сетевых запросов.
  • Подгружать Ajax-контент только по необходимости, избегая массовых предварительных запросов.
  • Деинициализировать окна, которые больше не нужны, с помощью метода close.
  • Пакетировать и минимизировать CSS и JS библиотеки, чтобы уменьшить время загрузки.
  • Отключать анимации на мобильных устройствах для экономии ресурсов.

Расширение функционала

Featherlight поддерживает расширения через плагины. Пример добавления кнопки действия внутри модального окна:

$.featherlight.extend({
    afterOpen: function() {
        this.$content.append('<button id="action">Действие</button>');
        $('#action').on('click', () => alert('Кнопка нажата'));
    }
});

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

Совместимость и ограничения

Featherlight работает во всех современных браузерах и поддерживает jQuery 1.7+. Ограничения:

  • Не предназначен для сложных интерфейсов с множественными уровнями вложенности.
  • Не реализует собственный менеджер истории браузера, поэтому использование pushState требует сторонней интеграции.
  • Масштабирование изображений и iframe ограничено размерами окна браузера.

Эти особенности важно учитывать при разработке сложных приложений, чтобы избежать проблем с производительностью и пользовательским опытом.

Оглавление