特定對象的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 going?').css('background-color', '#000');

但是我還需要能夠執行$(document.body).someplugin().css('background-color', '#000').caption('hey how\\'s it going?');

由於.someplugin()返回它自己的對象，而不是jQuery對象，因此它無法按預期工作。 我還需要稍后能夠通過$(document.body)訪問.caption() $(document.body) 。 因此，例如，如果未為初始$(document.body).someplugin()設置變量。 這意味着，在某種程度上如何.caption()是要通過設置$.fn.caption = function () ...只是為document.body對象。 這是我不太確定是否可能的部分。 如果沒有，那么我想我必須滿足要求設置一個變量，以保持插件功能的鏈式能力。

這是我期望的示例代碼：

$(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鏈接的jQuery方法，必須返回一個jQuery對象或支持所有jQuery方法的對象。 您只需要決定是要讓您的插件可鏈接到其他jQuery方法，還是要它返回自己的數據。 不能兩者兼有。 選一個。

在代碼示例中，您可以定義多個插件方法.someplugin()和.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()調用之間建立某種聯系，請進一步說明，因為我不遵循您的問題。