Плагины для Bliss.js

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

Подключение плагинов

Любой плагин для Bliss.js подключается через глобальный объект Bliss с использованием метода Bliss.use(plugin). Синтаксис стандартный:

Bliss.use(function(Bliss, $) {
    // расширение функционала
});

Bliss — сам объект библиотеки, позволяющий обращаться к её методам.
$ — сокращённая форма для обращения к селекторам DOM через Bliss.js.

После вызова Bliss.use все новые методы плагина становятся доступны для всех элементов, выбранных через $.

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

Структура плагина обычно включает следующие элементы:

Регистрация метода — добавление функции к объекту Bliss или к его прототипу.
Обработка контекста — корректная работа с выбранными элементами DOM.
Возврат значения — либо результат выполнения, либо сам объект для цепочек вызовов (chainable).

Пример простого плагина, добавляющего метод highlight для подсветки элементов:

Bliss.use(function(Bliss, $) {
    $.fn.highlight = function(color = 'yellow') {
        this.forEach(el => {
            el.style.backgroundColor = color;
        });
        return this; // позволяет использовать цепочки вызовов
    };
});

Теперь любой элемент, выбранный через $, поддерживает метод highlight:

$('p').highlight('lightblue').highlight('pink');

Расширение существующих методов

Bliss.js позволяет не только добавлять новые методы, но и расширять поведение встроенных функций. Для этого плагин может переопределять методы прототипа, сохраняя при этом исходное поведение.

Пример плагина, добавляющего логирование к методу html():

Bliss.use(function(Bliss, $) {
    const originalHtml = $.fn.html;
    
    $.fn.html = function(content) {
        if (content !== undefined) {
            console.log('Изменение содержимого элемента:', content);
        }
        return originalHtml.call(this, content);
    };
});

В этом случае html() продолжает работать как прежде, но дополнительно выводит информацию в консоль.

Управление зависимостями плагинов

Bliss.js не имеет встроенной системы управления зависимостями, поэтому порядок подключения плагинов критичен. Рекомендуется:

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

Пример проверки существования метода перед добавлением:

Bliss.use(function(Bliss, $) {
    if (!$.fn.fadeIn) {
        $.fn.fadeIn = function(duration = 400) {
            this.forEach(el => {
                el.style.transition = `opacity ${duration}ms`;
                el.style.opacity = 1;
            });
            return this;
        };
    }
});

Цепочки вызовов и интеграция плагинов

Bliss.js поддерживает цепочки вызовов (chainable API), и правильно реализованный плагин должен возвращать текущий объект. Это позволяет создавать сложные последовательности действий, используя один и тот же набор методов.

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

$('div')
    .highlight('lightgreen')
    .fadeIn(500)
    .on('click', () => console.log('Клик по элементу'));

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