Создание плагинов

Dom7 — это легковесная библиотека для работы с DOM, вдохновлённая jQuery, используемая в первую очередь в экосистеме Framework7. Одним из мощных аспектов Dom7 является возможность расширения её функционала с помощью собственных плагинов, что позволяет создавать переиспользуемые и модульные компоненты для работы с DOM-элементами.

Структура плагина

Плагин Dom7 — это обычная функция, которая добавляется к прототипу объекта Dom7. Любая функция, добавленная таким образом, становится доступной для всех объектов Dom7, что позволяет вызывать её напрямую на выбранных элементах:

Dom7.prototype.myPlugin = function(options) {
    const settings = Object.assign({
        color: 'red',
        duration: 300
    }, options);

    this.each((el) => {
        el.style.transition = `all ${settings.duration}ms`;
        el.style.color = settings.color;
    });

    return this;
};

Ключевые моменты:

  • this внутри плагина всегда ссылается на объект Dom7, содержащий выбранные элементы.
  • Использование this.each позволяет обработать каждый элемент выборки.
  • Возврат this обеспечивает цепочку вызовов методов (chaining).

Работа с параметрами

Плагины Dom7 часто используют объект options для конфигурации. Слияние пользовательских настроек с дефолтными выполняется через Object.assign или деструктуризацию:

const defaults = {
    background: 'yellow',
    fontSize: '16px'
};

const settings = { ...defaults, ...options };

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

Методы и вспомогательные функции

Для упрощения работы с DOM внутри плагина можно использовать встроенные методы Dom7, например:

  • addClass / removeClass / toggleClass — управление классами.
  • css — установка стилей.
  • on / off — работа с событиями.
  • attr / prop — управление атрибутами и свойствами.

Пример плагина с использованием встроенных методов:

Dom7.prototype.highlight = function(color = 'yellow') {
    this.css('background-color', color);
    this.on('mouseenter', function() {
        this.style.backgroundColor = '';
    });
    return this;
};

Поддержка цепочек вызовов

Возврат this в конце функции — обязательный элемент при создании плагинов, если требуется возможность цепочек вызовов:

$$('.item')
    .highlight('lightblue')
    .addClass('active')
    .on('click', () => console.log('Clicked'));

Отсутствие возврата объекта Dom7 приведёт к разрыву цепочки и невозможности дальнейшего вызова методов.

Управление событиями внутри плагина

Dom7 позволяет удобно работать с событиями. При создании плагинов рекомендуется использовать именованные функции для добавления и удаления обработчиков:

Dom7.prototype.toggleClick = function(callback) {
    function handler(e) {
        callback.call(this, e);
    }
    this.on('click', handler);
    return this;
};

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

Создание плагинов с внутренним состоянием

Иногда требуется хранить данные между вызовами плагина для одного элемента. Для этого можно использовать атрибуты data-* или встроенный объект Dom7 через el.f7PluginData:

Dom7.prototype.counter = function() {
    this.each((el) => {
        if (!el.f7PluginData) el.f7PluginData = { count: 0 };
        el.f7PluginData.count += 1;
        el.textContent = el.f7PluginData.count;
    });
    return this;
};

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

Расширение существующих плагинов

Dom7 поддерживает модульный подход. Новый плагин может вызывать существующие методы:

Dom7.prototype.flash = function(color = 'red', duration = 500) {
    this.each((el) => {
        const originalColor = el.style.backgroundColor;
        Dom7(el).css('background-color', color);
        setTimeout(() => Dom7(el).css('background-color', originalColor), duration);
    });
    return this;
};

Такой подход повышает переиспользуемость и сокращает дублирование кода.

Советы по оптимизации

  1. Минимизация выборок: сохранять выборку this в переменные внутри цикла each для уменьшения повторного обхода DOM.
  2. Использование делегирования событий при работе с динамическими элементами.
  3. Избегать прямого изменения стилей через style без необходимости — лучше использовать классы.
  4. Очистка ресурсов: удалять обработчики через off, если плагин временный или перезапускается.

Интеграция с Framework7

В экосистеме Framework7 плагины Dom7 часто используются для создания кастомных UI-компонентов: слайдеров, всплывающих окон, интерактивных списков. Их можно подключать как отдельные модули или расширять существующие, что делает архитектуру приложения модульной и легко поддерживаемой.

Плагин Dom7 становится полноценным строительным блоком, позволяя создавать сложное поведение с минимальным количеством кода, сохраняя простоту цепочек вызовов и совместимость с другими инструментами.

Оглавление