Расширение прототипа

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" rel="stylesheet">

Инициализация модального окна производится вызовом метода featherlight на элементе:

$('#openModal').featherlight('<p>Содержимое модального окна</p>');

В этом примере <p> будет отображено в модальном окне при клике на элемент с id openModal.

Прототип Featherlight и его расширение

Featherlight построен как объектно-ориентированная структура с использованием прототипов. Основная функция-конструктор $.featherlight создаёт экземпляр модального окна, а его методы доступны через $.featherlight.prototype. Это открывает возможность расширять функционал без изменения исходного кода библиотеки.

Добавление пользовательских методов

Для расширения прототипа создаются новые методы, которые могут использовать существующие свойства и методы:

$.featherlight.prototype.showAlert = function(message) {
    this.$content.html('<div class="custom-alert">' + message + '</div>');
    this.open();
};

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

$.featherlight('<p>Первый контент</p>').showAlert('Привет, мир!');

Важно, что методы прототипа имеют доступ к $content, $instance, $overlay и другим внутренним объектам, что позволяет полностью управлять поведением модального окна.

Переопределение существующих методов

С помощью прототипа можно переопределять стандартные методы, например, open или close. Это удобно для внедрения дополнительной логики:

const originalOpen = $.featherlight.prototype.open;
$.featherlight.prototype.open = function() {
    console.log('Модальное окно открывается');
    originalOpen.call(this); // вызов стандартного поведения
};

Использование call(this) важно для сохранения контекста текущего экземпляра.

Настройка параметров через прототип

Featherlight позволяет задавать глобальные параметры через прототип, которые будут применяться ко всем будущим модальным окнам. Это особенно полезно для стандартных стилей или поведения:

$.extend($.featherlight.prototype, {
    closeOnClick: 'background',
    variant: 'custom-theme',
    afterOpen: function() {
        console.log('Модальное окно успешно открылось');
    }
});

В данном примере closeOnClick задаёт закрытие по клику на фон, variant добавляет пользовательский класс для стилизации, а afterOpen запускается после открытия окна.

Работа с событиями

Featherlight предоставляет ряд событий жизненного цикла: beforeOpen, afterOpen, beforeClose, afterClose. Через прототип можно добавлять собственные обработчики по умолчанию:

$.featherlight.prototype.beforeClose = function() {
    console.log('Модальное окно закрывается');
    return true; // обязательно возвращать true для продолжения закрытия
};

Возврат false из beforeClose блокирует закрытие окна, что позволяет создавать модальные окна с подтверждением действия.

Расширение для пользовательских типов контента

Featherlight поддерживает стандартные типы контента (html, image, iframe), но прототип можно расширять для новых форматов:

$.featherlight.customType = function($content, config) {
    this.$content = $('<div class="custom-content">').append($content);
    this.open();
};
$.featherlight.customType.prototype = $.extend({}, $.featherlight.prototype);

Это позволяет создавать специализированные окна, например, для галерей, форм обратной связи или интерактивных виджетов, сохраняя совместимость с основным API.

Интеграция с jQuery и плагинами

Так как Featherlight построен на jQuery, расширение прототипа открывает возможности интеграции с другими плагинами и библиотеками:

$.featherlight.prototype.afterOpen = function() {
    this.$content.find('.datepicker').datepicker(); // инициализация jQuery UI Datepicker
};

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

Практические рекомендации

  • Сохранять оригинальные методы при переопределении для возможности вызова стандартного поведения.
  • Использовать $.extend для добавления нескольких свойств и методов одновременно.
  • Все новые методы должны учитывать контекст текущего экземпляра (this) для корректного доступа к $content и $instance.
  • Создавать отдельные типы контента через прототип позволяет стандартизировать модальные окна с разной функциональностью, не ломая основной код библиотеки.
Оглавление