jQuery：是否可以将字段/方法附加到 jQuery 包装对象？答案

【问题标题】：jQuery: Is it possible to attach fields/methods to a jQuery wrapper object?jQuery：是否可以将字段/方法附加到 jQuery 包装对象？
【发布时间】：2010-10-09 22:42:47
【问题描述】：

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

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

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

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' 都没有定义。我做错了什么？

【问题讨论】：

标签： javascript jquery plugins

【解决方案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

【讨论】：

我不知道这个“数据”地图的东西，结果这正是我想要的。谢谢！

【解决方案2】：

您实际上是在 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();

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

【讨论】：

【解决方案3】：

我不完全确定你为什么要这样设计你的插件——你可能想考虑一下 jonstjohn 的建议——但以下内容应该与你的要求相似：

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

【讨论】：