Создание собственных расширений

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

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

Структура расширения

Расширение создаётся как объект с методами жизненного цикла модального окна:

$.featherlight.extensions.myExtension = {
    /** Вызывается при инициализации окна */
    setup: function() {
        console.log("Setup extension");
    },
    /** Вызывается после вставки содержимого в DOM */
    afterContent: function() {
        console.log("Content inserted");
    },
    /** Вызывается перед закрытием окна */
    beforeClose: function(event) {
        console.log("Before closing");
    },
    /** Вызывается после закрытия окна */
    afterClose: function(event) {
        console.log("Window closed");
    }
};

Каждый метод получает контекст this, который ссылается на текущий экземпляр окна Featherlight. Внутри методов можно использовать стандартные свойства, например:

  • this.$content — jQuery-объект с содержимым модального окна
  • this.$instance — корневой элемент окна
  • this.target — элемент, по которому произошло открытие

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

Подключение расширений

Расширение подключается через свойство extensions при вызове $.featherlight:

$.featherlight($('#myContent'), {
    extensions: ['myExtension']
});

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

Пример с несколькими расширениями:

$.featherlight($('#myContent'), {
    extensions: ['myExtension', 'trackingExtension']
});

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

Переопределение методов

Расширение может переопределять стандартные методы Featherlight, сохраняя при этом доступ к оригинальной реализации через this._super():

$.featherlight.extensions.customClose = {
    beforeClose: function(event) {
        console.log("Custom logic before close");
        this._super(event); // вызов стандартного метода
    }
};

Метод _super гарантирует, что базовое поведение не будет потеряно. Это особенно важно при модификации закрытия окна, загрузки содержимого или обработки событий.

Работа с содержимым

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

  • this.$content.html(...) — изменение содержимого окна
  • this.$content.find(selector) — выборка элементов внутри окна
  • this.$content.append(...) — добавление элементов

Пример расширения, добавляющего кнопку закрытия в конец содержимого:

$.featherlight.extensions.addCloseButton = {
    afterContent: function() {
        var button = $('<button>Закрыть</button>');
        button.on('click', () => this.close());
        this.$content.append(button);
    }
};

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

Расширения позволяют подключать собственные обработчики событий:

  • setup — установка событий до открытия окна
  • afterContent — события после вставки DOM
  • afterClose — очистка или удаление обработчиков

Пример отслеживания кликов по элементам внутри окна:

$.featherlight.extensions.clickLogger = {
    afterContent: function() {
        this.$content.on('click', '.logItem', (e) => {
            console.log('Clicked:', e.currentTarget);
        });
    },
    afterClose: function() {
        this.$content.off('click', '.logItem');
    }
};

Такой подход предотвращает утечки памяти и обеспечивает корректное удаление обработчиков.

Передача параметров в расширение

Расширения могут использовать параметры, передаваемые через опции Featherlight. Для этого достаточно определить их в объекте расширения:

$.featherlight.extensions.colorize = {
    setup: function() {
        this.$content.css('background-color', this.opts.bgColor || 'white');
    }
};

$.featherlight($('#content'), {
    extensions: ['colorize'],
    bgColor: '#f0f0f0'
});

Это позволяет создавать гибкие расширения с настраиваемым поведением без изменения исходного кода.

Наследование расширений

Featherlight поддерживает создание новых классов модальных окон с подключёнными расширениями:

var MyLight = $.featherlight.extend({
    namespace: 'myLight',
    extensions: ['myExtension']
});

new MyLight($('#myContent'));

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

Практические советы

  • Разделять функциональность на отдельные расширения, чтобы их можно было комбинировать.
  • Всегда использовать afterClose для очистки событий и DOM-изменений.
  • Переопределяя методы Featherlight, сохранять вызов _super для сохранения базового поведения.
  • Использовать this.opts для передачи параметров в расширение, что повышает гибкость и переиспользуемость кода.
  • Проверять наличие DOM-элементов перед их изменением для предотвращения ошибок при динамическом контенте.

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

Оглавление