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

时间:2012-01-29 20:11:04

标签: javascript jquery plugins namespaces

我正在尝试创建一个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对象,因此它不能按预期工作。我还需要稍后通过.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...');

1 个答案:

答案 0 :(得分:0)

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()电话之间存在某种联系,请进一步解释,因为我不会在您的问题中遵循这一点。