JQuery разработка базового плагина

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

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

$( "a" ).css( "color", "red" );

Когда вы используете знак "$" для выбора элементов, возвращается JQuery объект. Этот объект содержит все методы, которые можно использовать (click(), css(),...) и все элементы, которые указаны в нашем селекторе. JQuery объект получает эти методы из $.fn объекта. Этот объект содержит все JQuery методы, и если вы хотите написать собственные методы, то он должен также содержать их.

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

Предположим, мы хотим создать плагин, который устанавливает зедленый цвет к выбранным элементам. Также мы хотим добавить функцию "greenify" к "$.fn" чтобы она была доступна как и другие методы JQuery объекта.

$.fn.greenify = function() {
    this.css( "color", "green" );
};
 
$( "a" ).greenify(); // Делаем все ссылки зеленым цветом.

Учтите, что при использовании .css() мы используем this, а не $(this). Это потому, что наша "greenify" функция это часть такого же объекта как и метод .css().

Цепочки 

Наш предыдущий код является рабочим, но нужно сделать еще кое-что, чтобы он работал лучше. Одной из функций JQuery является цепочка, когда выполняется несколько действий, определенных для одного селектора. Это работает потому, что каждый метод JQuery снова возвращает объект JQuery (правда есть исключения, к примеру width() вызываемый без параметров возвращает ширину вместо объекта JQuery). Чтобы сделать наш метод связываемым цепочкой мы должны добавить только одну строку в наш код:

$.fn.greenify = function() {
    this.css( "color", "green" );
    return this;
}
 
$( "a" ).greenify().addClass( "greenified" );

Защита алиаса $ и добавление области

Переменная $ очень популярна в библиотеках JavaScript, поэтому если вы используете другие библиотеки совместно с JQuery вы не должны использовать и вместо этого использовать jQuery.noConflict(). Но в этом случае наш плагин перестанет работать, поскольку предполагалось что $ является псевдонимом JQuery функций. Чтобы не было конфликта с другими плагинами и по прежнему была возможность использовать псевдоним $, мы должны поместить наш код внутрь выражения с мгновенно вызываемой функцией, а затем передать функцию jQuery, имя и параметр $:

(function ( $ ) {
 
    $.fn.greenify = function() {
        this.css( "color", "green" );
        return this;
    };
 
}( jQuery ));

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

(function ( $ ) {
 
    var shade = "#556b2f";
 
    $.fn.greenify = function() {
        this.css( "color", shade );
        return this;
    };
 
}( jQuery ));

Минимизация кода плагина

Правильная практика разработки состоит в использовании только одного слота в $.fn. Это уменьшает вероятность того, что ваш плагин будет переопределен, или переопределит другие плагины. Таким образом вот пример того, как не нужно делать:

(function( $ ) {
 
    $.fn.openPopup = function() {
        // Open popup code.
    };
 
    $.fn.closePopup = function() {
        // Close popup code.
    };
 
}( jQuery ));

Гораздо правильнее использовать один слот и осуществлять проверку через переменную action, как показано в примере ниже:

(function( $ ) {
 
    $.fn.popup = function( action ) {
 
        if ( action === "open") {
            // Open popup code.
        }
 
        if ( action === "close" ) {
            // Close popup code.
        }
 
    };
 
}( jQuery ));

Использование each() метода

Ваш объект JQuery может содержать ссылки на любое количество DOM элементов, именно поэтому объекты JQuery часто называются коллекциями. Если вам необходимо выполнять определенные манипуляции с элеменами коллекций (например получать определенные атрибуты, производить вычисления) вы должны использовать each() перебирая в цикле все элементы коллекции:

$.fn.myNewPlugin = function() {
 
    return this.each(function() {
        // Здесь выполняем манипуляции с текущим элементом коллекции
    });
 
};

Обратите внимание, что мы возвращаем результат each() вместо возврата this. each() уже является связанным цепочкой, поскольку возвращает this. Это лучшая практика связывания цепочкой, которую мы до сих пор использовали.

Опции плагина

По мере усложнения ваших плагинов рекомендуется осуществить в нем поддержку задания опций. Самый простой способ сделать это, наряду с другими возможностями, использование литерала объекта. Давайте изменим наш greenify плагин, чтобы он позволял принимать некоторые параметры:

(function ( $ ) {
 
    $.fn.greenify = function( options ) {
 
        // Это самый простой метод для задания опций по умолчанию
        var settings = $.extend({
            // These are the defaults.
            color: "#556b2f",
            backgroundColor: "white"
        }, options );
 
        return this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });
 
    };
 
}( jQuery ));

Пример использования:

$( "div" ).greenify({
    color: "orange"
});

Теперь значение по умолчанию переменной color "#556b2f" будет перезаписано в "orange".

Все вместе

Ниже приведен пример небольшого плагина, который использует все техники, которые мы обсуждали:

(function( $ ) {
 
    $.fn.showLinkLocation = function() {
 
        this.filter( "a" ).each(function() {
            var link = $( this );
            link.append( " (" + link.attr( "href" ) + ")" );
        });
 
        return this;
 
    };
 
}( jQuery ));
 
// Пример использования
$( "a" ).showLinkLocation();

Этот плагин обходит все ссылки и добавляет к отображаемому содержимому значение атрибута href:

<!-- Перед вызовом плагина: -->
<a href="page.html">Foo</a>
 
<!-- После вызова плагина: -->
<a href="page.html">Foo (page.html)</a>

Мы можем оптимизировать наш плагин:

(function( $ ) {
 
    $.fn.showLinkLocation = function() {
 
        this.filter( "a" ).append(function() {
            return " (" + this.href + ")";
        });
 
        return this;
 
    };
 
}( jQuery ));

Как вы можете видеть, мы используем метод append() в контексте коллбек функции, а также не используем метод attr(), поскольку родной DOM API дает возможность более простого доступа к атрибутам объекта.

Поделиться: 




Чтобы оставить комментарий - авторизуйтесь




  JQuery   16.01.2018