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

Zepto.js предоставляет мощный инструмент расширения функционала через плагины. Плагины позволяют добавлять новые методы к объектам Zepto, сохраняя при этом цепочку вызовов и совместимость с другими методами библиотеки. Основной принцип создания плагина заключается в расширении прототипа объекта $.fn.

Расширение прототипа `$.fn`

Все методы, доступные через цепочку вызовов Zepto, определяются на прототипе $.fn. Чтобы добавить собственный метод, необходимо определить его на этом прототипе:

$.fn.myPlugin = function(options) {
    // Логика плагина
    return this; // важно возвращать this для поддержки цепочек
};

Ключевой момент: всегда возвращать this в конце метода. Это позволяет применять несколько методов последовательно:

$('#element').myPlugin().addClass('active');

Использование параметров и настроек

Плагины часто требуют гибкости. Для этого используется объект options с параметрами, который объединяется с дефолтными настройками:

$.fn.highlight = function(options) {
    var settings = $.extend({
        color: 'yellow',
        duration: 1000
    }, options);

    return this.each(function() {
        var $el = $(this);
        $el.css('background-color', settings.color);
        setTimeout(function() {
            $el.css('background-color', '');
        }, settings.duration);
    });
};

$.extend() объединяет объекты, создавая единый набор настроек.
Метод each() перебирает все элементы, выбранные селектором Zepto.

Обработка цепочек и возврат значений

Методы-плагины обычно делятся на два типа:

Цепочные методы, которые возвращают this для дальнейших вызовов:

$.fn.toggleClassCustom = function(className) {
    return this.each(function() {
        var $el = $(this);
        $el.hasClass(className) ? $el.removeClass(className) : $el.addClass(className);
    });
};

Методы-аксессоры, которые возвращают значение, например, текст или атрибут:

$.fn.getText = function() {
    return this.length ? this[0].textContent : null;
};

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

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

Zepto имеет встроенную систему работы с событиями через методы on, off, trigger. Плагины часто используют события для повышения интерактивности:

$.fn.clickLogger = function() {
    return this.each(function() {
        var $el = $(this);
        $el.on('click', function() {
            console.log('Элемент был нажат:', $el);
        });
    });
};

Для освобождения ресурсов можно добавлять метод удаления обработчиков:

$.fn.removeClickLogger = function() {
    return this.each(function() {
        $(this).off('click');
    });
};

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

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

(function($) {
    function privateHelper(el, text) {
        el.text(text.toUpperCase());
    }

    $.fn.uppercaseText = function() {
        return this.each(function() {
            privateHelper($(this), $(this).text());
        });
    };
})(Zepto);

privateHelper не доступен вне замыкания, что предотвращает конфликты с другими плагинами.

Паттерны проектирования плагинов

Модульный паттерн – изоляция кода через IIFE, использование приватных методов и переменных.
Методы-объекты – поддержка нескольких действий через один плагин:

(function($) {
    var methods = {
        init: function(options) { /* инициализация */ },
        destroy: function() { /* очистка */ }
    };

    $.fn.multiAction = function(methodOrOptions) {
        if (methods[methodOrOptions]) {
            return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Метод ' + methodOrOptions + ' не существует');
        }
    };
})(Zepto);

Такой подход позволяет использовать один плагин для разных действий: $('#el').multiAction('destroy');.