我正在尝试创建一个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).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...');
要实现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...');
如果两个.caption()
呼叫之间应该有某种联系,请进一步解释,因为我不理解你的问题。