Как написать плагин jQuery

Недавно, в процессе создания лендинга, столкнулся с проблемой — нужно было разместить «аккордион». Это даже не плагин, а просто набор функций jQuery. Постепенно код усложнялся и в какой-то момент я понял, что нужно его оформить отдельным плагином. Это упрощает его поддержку и можно дорабатывать по необходимости.

Я никогда не писал jQuery-плагины, поэтому пришлось немного погуглить и найти примеры и туториалы. По какой-то неведомой причине, практически все руководства содержат невероятное количество лишней информации, где уже на 2-минуте прочтения возникает путаница, поскольку подразумевают, что читающий прекрасно разбирается и в js, и тонкостях jQuery, что в корне неверно. :)

Поэтому я решил написать своё руководство, рассчитанное на неподготовленного читателя.

Начнём с постановки задачи. Пусть у нас есть некий jQuery-код, который нужно оформить в виде плагина. Не будем усложнять задачу, возьмём что-то совсем простое, например преключение класса элемента по клику (назовём это «первоначальным кодом»).

JS-код:
 
$(".click").click(function(){ 
    $(this).toggleClass('t-red') 
});
 
HTML-код:
 
<div class="click">какой-то текст для переключения</div>

К классу .clickмы цепляем обработчик «click», который меняет его css-класс на t-red. Метод toggleClassвключает/выключает класс по каждому клику.

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

$(".click").myClick();

Это уже типовой вызов jQuery-плагина. Его желательно будет снабдить опциями, чтобы можно было бы задавать произвольный css-класс. Пусть это будет параметр to:

$(".click").myClick({
    to: "t-green"
});

Ну и, кроме этого, было бы здорово задавать css-класс в html-атрибуте data-, что позволит указывать его прямо в html-разметке:

<div class="click" data-to="bg-yellow t-red">какой-то текст для переключения</div>

Почти все jQuery-плагины сейчас строятся по единому шаблону-каркасу. Для сложных плагинов этот каркас дорабатывается для подключения методов и прочих «фишек», но в нашем случае всё очень просто — у нас одна основная функция.

(function($) {
    // функция вызова jQuery-плагина
    $.fn.myClick = function(options) {
        // опции 
        var config = $.extend({}, {
            op1: '',
            op2: ''
        }, options);
        
        function main(e) {
            // это основная функция
        }
        this.each(function() { main($(this)); });
        return this;
    };
})(jQuery);

Строчка $.fn.myClickзадаёт то, как будет вызываться плагин извне (myClick). Желательно использовать такое имя, чтобы оно не конфликтовало с другими плагинами.

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

Функция main()собственно и выполняет основную работу плагина. При вызове плагина, она автоматически будет выполнена в строчке this.each(function() { main($(this)); });. Если вы решите поменять её имя, то не забудьте внести изменения и в этом коде.

Теперь рассмотрим main(). Её парамер eне что иное, как используемый элемент. Наш исходный код переместится в эту функцию в таком виде:

function main(e) {
    e.click(function(){ 
        $(this).toggleClass('t-red') 
    });
}

Этот тот же самый «первоначальный» код, только мы использовали переменную eвместо $(".click").

Теперь добавим опции. Тут всё очень просто:

var config = $.extend({}, {
    to: 't-red'
}, options);

У нас одна опция. Получить её в функции main()можно так: config.to. В данном случае переменная configсодержит все опции, а config.toконкретно выбранную. CSS-класс по умолчанию вы можете задать произвольно. Функция main()теперь будет такой:

function main(e) {
    e.click(function(){ 
        $(this).toggleClass(config.to) 
    });
}

Теперь можно задавать опции при вызове плагина, но нам нужно еще добавить возможность их менять/задавать через data-атрибуты. Мы будем использовать штатную возможность jQuery — функцию data(). Она возвращает значение указанного атрибута (без префикса «data-»).

function main(e) {
    
    var to = e.data('to');
    
    if (!to) { to = config.to }
 
    e.click(function(){ 
         $(this).toggleClass(to) 
    });
}

Вначале мы получаем data-атрибут «to» в одноименную переменную. Проверяем: если атрибута нет (он не задан), то переменной присваиваем значение из опции.

Получился вот такой плагин:

(function($) {
    $.fn.myClick = function(options) {
        var config = $.extend({}, {
            to: 't-red'
        }, options);
        
        function main(e) {
            var to = e.data('to');
            if (!to) { to = config.to }
            e.click(function(){ 
                 $(this).toggleClass(to) 
            });
        }
        
        this.each(function() { main($(this)); });
        return this;
    };
})(jQuery);

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