Javascript 特定对象的jQuery插件命名空间

我正在尝试创建一个jQuery插件，它将向上下文对象添加新的名称空间函数，同时保持完整的链功能。我不确定这是否可能，但这里有一个我目前所拥有的例子：

(function ($) {
    var loadScreen = $('<div />').text('sup lol');

    $.fn.someplugin = function (args) {
        var args = args || {},
            $this = this;

        $this.append(loadScreen);

        return {
            'caption' : function (text) {
                loadScreen.text(text);
                return $this;
            }
        };
    }
})(jQuery);

如果这是不可能的，或者只是效率很低，我愿意接受以下内容：

var $body = $(document.body).someplugin().css('background-color', '#000');
$('.non-initialized').caption(); // Error, jQuery doesn't know what caption is
$body.caption('done loading...');

---

如果jquery方法是可链接的，则jquery方法必须返回jquery对象或支持所有jquery方法的对象。您只需决定您的插件是否可以链接到其他jQuery方法，还是希望它返回您自己的数据。你不能两者兼得。挑一个

在代码示例中，您可以定义多个插件方法，

.someplugin（）

和

.caption（）

。jQuery没有实现只应用于一个特定DOM对象的jQuery插件方法的方法。但是，使该方法在所有jQuery对象上都可用并没有什么害处，您只能将其用于对其有意义的对象

我想你可以用这个：

(function ($) {
    var loadScreen = $('<div />').text('sup lol');

    $.fn.someplugin = function (args) {
        var args = args || {},
            $this = this;

        $this.append(loadScreen);
        return(this);
    }

    $.fn.caption = function (text) {
        loadScreen.text(text);
        return this;
    }
})(jQuery);

$(document.body).someplugin().css('background-color', '#000');
$('.non-initialized').caption('whatever');
$(document.body).caption('done loading...');

（函数（$）{
var loadScreen=$（''）.text（'sup lol'）；
$.fn.someplugin=函数（args）{
var args=args |{}，
$this=这个；
$this.append（加载屏幕）；
返回（本）；
}
$.fn.caption=函数（文本）{
loadScreen.text（文本）；
归还这个；
}
})（jQuery）；
$（document.body）.someplugin（）.css（'background-color'，'#000'）；
$（'.non-initialized'）。标题（'whatever'）；
$（document.body）.caption（'完成加载…'）；

---

如果两个

.caption（）

调用之间应该有某种联系，请进一步解释，因为我没有从您的问题中理解这一点。

整个要点是，我不会弄乱jQuery名称空间，同时仍然能够将可链接函数扩展到我自己的插件上

.caption（）

可能与

$.fn.loading=function（）…

和

$.fn.tabs=function（）

完全不同。基本上，我需要在不同的插件之间分离

.caption（）

功能。。。它仍然要求我使用变量，但至少不会弄乱jQuery名称空间。请记住，您只扩展了特定的jQuery对象，必须保存该jQuery对象才能访问该方法。您也可以使用

this.caption=function（）{}

您不需要

.extend（）

。因此（可能是一个明显的问题）您认为使用

this.caption=function（）{}

比扩展它更有效吗？它们做的事情完全相同

.extend（）

合并两个对象，在源对象上有多个属性/方法时非常有用。在您的情况下，只有一个方法可以打包到临时对象中，这样您就可以使用

.extend（）

，所以使用

.extend（）

没有任何好处。我推荐的简单作业在我看来更简洁。两者都可以。

(function ($) {
    var loadScreen = $('<div />').text('sup lol');

    $.fn.someplugin = function (args) {
        var args = args || {},
            $this = this;

        $this.append(loadScreen);
        return(this);
    }

    $.fn.caption = function (text) {
        loadScreen.text(text);
        return this;
    }
})(jQuery);

$(document.body).someplugin().css('background-color', '#000');
$('.non-initialized').caption('whatever');
$(document.body).caption('done loading...');