jQuery：是否可能将字段/方法附加到jQuery包装器对象？

Question

我正在尝试编写一个插件，将几个方法添加到jQuery包装对象中。基本上，我想像这样初始化它：

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

“smartImage”插件将会在被“smart”引用的对象上附加2个方法，因此我可以做如下操作：

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

很遗憾，我无法弄清楚如何将这两种方法附加到包装器对象上。 我的代码遵循典型的jQuery插件模式：

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

调用smartImage()后，'saveState'和'loadState'都未定义。我做错了什么？

- Outlaw Programmer

Answer 1

在smartImage()函数中，实际上返回的是一个jQuery对象。这是编写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();

那是一种我熟悉并成功使用过的技术。

- jonstjohn

Answer 2

你演示的方法/属性添加是错误的，因为正如你所说，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。

- Mike Boers

---

我之前不知道这个“数据”映射的东西，结果发现正是我想要的。谢谢！ - Tim Frey

Answer 3

我不完全确定你为什么要以这种方式设计你的插件 - 你可能需要考虑一些类似于jonstjohn的建议 - 但以下内容应该与你所要求的类似：

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

- Alex Barrett