jQuery: возможно ли прикрепить поля / методы к объекту-оболочке jQuery?

Question

Я пытаюсь написать плагин, который добавит несколько методов к объекту-оболочке jQuery. По сути, я хочу инициализировать его так:

var smart = $('img:first').smartImage();

Плагин 'smartImage' будет прикреплять 2 метода к объекту, на который ссылается 'smart', поэтому я смогу сделать что-нибудь вроде:

smart.saveState();
// do work
smart.loadState();

К сожалению, я не могу понять, как прикрепить эти 2 метода к объекту-оболочке. Код, который я имею, следует типичному шаблону плагина jQuery:

(function($)
{
    $.fn.smartImage = function()
    {
        return this.each(function()
        {
            $(this).saveState = function() { /* save */ }
            $(this).loadState = function() { /* load */ }
        }
    }
 }

После того, как я вызываю smartImage (), ни 'saveState', ни 'loadState' не определены. Что я делаю не так?

Answer 1

Вы не можете прикреплять методы / свойства такими, какими вы их продемонстрировали, потому что, как вы сказали, объект jQuery - это просто оболочка вокруг любых элементов DOM, которые он содержит. Вы, конечно, можете прикрепить методы / свойства к нему, но они не будут сохраняться при повторном выборе jQuery.

var a = $('.my-object');
a.do_something = function(){ alert('hiya'); }
a.do_something(); // This alerts.

var b = $('.my-object');
b.do_something(); // Freak-out.

Если вы хотите, чтобы метод существовал в объекте jQuery при его повторном восстановлении, его необходимо присвоить jQuery.fn. Таким образом, вы можете определить ваш вторичный метод, назначить его для jQuery.fn и использовать настройку данных jQuery, чтобы поддерживать состояние для вас ...

$.fn.setup_something = function()
{
    this.data('my-plugin-setup-check', true);
    return this;
}

$.fn.do_something = function()
{
    if (this.data('my-plugin-setup-check'))
    {
        alert('Tada!');
    }
    return this;
}

var a = $('.my-object').setup_something();
a.do_something(); // Alerts.
$('.my-object').do_something(); // Also alerts.

Я предлагаю вам взглянуть на http://docs.jquery.com/Internals/jQuery.data и http://docs.jquery.com/Core/data#name

Answer 2

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

Я не уверен, есть ли способ сделать то, что ты хочешь. Я бы порекомендовал следующее:

(function($) {
     var smartImageSave = function() { return this.each(function() { } ); };
     var smartImageLoad = function() { return this.each(function() { } ); };

     $.fn.extend( { "smartImageSave":smartImageSave, 
                     "smartImageLoad":smartImageLoad });
 });

 var $smart = $("img:first");
 $smart.smartImageSave();
 $smart.smartImageLoad();

Это одна техника, с которой я знаком и успешно использовал.

Answer 3

Я не совсем уверен, почему вы разрабатываете свой плагин таким образом - вы можете рассмотреть что-то в соответствии с предложением Джонстджона - но следующее должно быть похоже на то, что вы просите:

jQuery.fn.extend({
    smartImage: function() {
        return {
            saveState: function() { /* save */ },
            loadState: function() { /* load */ }
        };
    }
});