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

Question

我正在尝试创建一个 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);

如果我这样做 $(document.body).someplugin().caption('hey how\'s it go ?').css('background-color', '#000');

但是我还需要能够执行 $(document.body).someplugin().css('background-color ', '#000').caption('嘿，进展如何？');

由于 .someplugin() 返回它自己的对象，而不是 jQuery 对象，因此它不会按预期工作。我还需要能够稍后通过 $(document.body) 访问 .caption()。例如，如果没有为初始 $(document.body).someplugin() 设置变量。这意味着如何通过 $.fn.caption = function () ... 为 document.body 设置 .caption()对象。这是我不太确定是否可能的部分。如果没有，那么我想我将不得不满足于要求设置一个变量，以维持插件函数的链能力。

这是我期望的示例代码：

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

如果这是不可能的，或者效率很低，那么我愿意解决这个问题：

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

Answer 1

作为 jquery-chainable，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...');

如果两个 .caption() 调用之间应该存在某种联系，请进一步解释，因为我没有从你的问题中得出这一点。