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

Umbrella JS предоставляет лёгкий и гибкий способ расширения функциональности через плагины. Плагины позволяют добавлять собственные методы к объектам Umbrella, обеспечивая удобный синтаксис цепочек и совместимость с остальным API.

Создание плагина в Umbrella JS строится вокруг двух ключевых принципов: расширение прототипа и поддержка цепочек вызовов.

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

Все объекты Umbrella создаются через функцию u(), которая возвращает объект с прототипом u.fn. Для добавления нового метода необходимо расширить этот прототип:

u.fn.myPlugin = function(options) {
    // Логика метода
    return this; // Возврат объекта для цепочек
};

Особенности:

  • this внутри метода ссылается на текущую коллекцию элементов Umbrella.
  • Возврат this обеспечивает возможность цепочек вызовов (u('div').myPlugin().addClass('highlight')).
  • Методы можно принимать параметры, включая объект настроек.

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

Типичный плагин содержит несколько компонентов:

  1. Проверка и инициализация опций
options = options || {};
const defaults = { color: 'red', fontSize: '16px' };
const settings = Object.assign({}, defaults, options);
  1. Итерация по коллекции элементов
this.each(function(el) {
    el.style.color = settings.color;
    el.style.fontSize = settings.fontSize;
});

Метод each в Umbrella JS упрощает перебор коллекции элементов, аналогично Array.prototype.forEach.

  1. Возврат объекта для цепочек
return this;

Пример простого плагина

Создадим плагин highlight, который изменяет фон и текст выбранных элементов:

u.fn.highlight = function(options) {
    options = options || {};
    const settings = Object.assign({
        background: 'yellow',
        color: 'black'
    }, options);

    this.each(function(el) {
        el.style.backgroundColor = settings.background;
        el.style.color = settings.color;
    });

    return this;
};

Использование:

u('p').highlight({ background: 'orange', color: 'white' });

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

Цепочки вызовов позволяют применять несколько методов Umbrella подряд. Для этого необходимо возвращать объект this на каждом этапе.

Пример цепочки с нашим плагином:

u('div')
  .highlight({ background: 'lightblue' })
  .addClass('active')
  .css('border', '1px solid blue');

Все методы в цепочке работают с одной и той же коллекцией элементов.

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

Плагины могут добавлять обработчики событий:

u.fn.onHoverHighli ght = function(color) {
    this.each(function(el) {
        u(el).on('mouseenter', function() {
            el.style.backgroundColor = color;
        });
        u(el).on('mouseleave', function() {
            el.style.backgroundColor = '';
        });
    });
    return this;
};

Использование:

u('li').onHoverHighlight('lightgreen');

Инкапсуляция и приватные функции

Для сложных плагинов рекомендуется выносить повторяющиеся действия в приватные функции:

u.fn.tooltip = function(options) {
    const settings = Object.assign({ text: 'Tooltip' }, options);

    function createTooltip(el) {
        const tooltip = document.createElement('span');
        tooltip.className = 'tooltip';
        tooltip.textContent = settings.text;
        el.appendChild(tooltip);
    }

    this.each(function(el) {
        createTooltip(el);
    });

    return this;
};

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

Обработка коллекций элементов

Umbrella JS работает с набором элементов, поэтому плагины должны обрабатывать каждый элемент коллекции независимо:

this.each(function(el, index) {
    el.textContent = `Элемент ${index + 1}`;
});

В метод each передаётся второй аргумент — индекс текущего элемента, что удобно для нумерации или привязки данных.

Поддержка опций и умолчаний

Хорошие плагины всегда поддерживают гибкую настройку:

const defaults = { duration: 300, easing: 'linear' };
const settings = Object.assign({}, defaults, options);
  • Object.assign позволяет объединять объекты настроек.
  • Значения по умолчанию делают плагин удобным для быстрого использования без сложной конфигурации.

Создание цепочек с возвращением значения

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

u.fn.getTextLength = function() {
    if (this.length > 0) {
        return this[0].textContent.length;
    }
    return 0;
};

Пример:

const len = u('p').getTextLength();
console.log(len);

Такие методы разрывают цепочку, поэтому нужно чётко разделять методы для цепочек и методы для получения данных.

Стандарты именования плагинов

  • Использовать camelCase (highlightText, toggleVisibility).
  • Избегать конфликтов с уже существующими методами Umbrella (addClass, css, on).
  • Плагины должны быть независимыми и легко подключаемыми через отдельные файлы.
Оглавление