我在jQuery插件中遗漏了一些基本的变量范围。以下是jQuery插件存根(主要基于jQuery.com文档)。
我想让变量($test
和test
)可用于插件中的所有函数。
在下面的示例代码中,变量test按预期将“hello”写入控制台。
但是,变量$test
将jQuery()写入控制台。
问题:
(a)为什么$test
不将jQuery(div #test)写入控制台?
(b)在所有函数中使jQuery变量(或任何其他变量)可用的最佳实践。例如类似于.net类中的类级别变量。
(function ($) {
var settings = {
};
var methods = {
init: function (options) { if (options) { $.extend(settings, options); } return init(this, settings); }
};
$.fn.scopetest = function (method) {
// Method calling logic
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery plugin');
}
};
var $test = $('#test');
var test = 'hello';
var init = function (object, settings) {
return object.each(function () {
console.log($test);
console.log(test);
});
}
})(jQuery);
答案 0 :(得分:0)
尝试使用选项:
(function ($) {
var options = {
option1: "some_value",
option2: "another_value",
...
}
var settings = {
};
从您的函数中引用如下:
var self = this;
alert( self.options.option1 );
或者:
var self = this,
o = self.options;
alert( o.option1);
另请查看Jquery widget factory plugin layout,它与您的相近,但我更喜欢它。
(function( $, window) {
$.widget("widge_name", $.widget, {
options: {
...
},
init: function(param_1, param_2) {
...
},
_create: function() {
...
},
some_function_A: function(param3, param4) {
...
}
some_function_B: function(param3, param4) {
var self = this;
// run some_function_A
self.some_function_A("foo","bar");
}
});
}) (jQuery,this);
这样你就可以使用上面的 self 以相同的方式调用其他函数。
答案 1 :(得分:0)
为什么不测试jQuery(div #test)到控制台?
因为DOM中没有id为test
的元素。因此,jQuery返回空集合jQuery()
。
使所有函数都可以使用jQuery变量(或任何其他变量)的最佳实践是什么?
我不确定最佳实践,但如果我必须使变量可以全局访问,我会将变量与window
对象相关联。像,
window.$test = $('#test');
window.test = 'Hello';
并使用window
对象(例如:alert(window.$test);
)或仅使用变量名称alert($test);
答案 2 :(得分:0)
有趣的是,保留var $ test语句但将赋值转移到init函数似乎可行。所以使用$似乎存在一个问题,除非它在函数内部。将使用此作为解决方法,直到找到更好的解决方案。
(function ($) {
var settings = {
};
var methods = {
init: function (options) { if (options) { $.extend(settings, options); } return init(this, settings); }
};
$.fn.scopetest = function (method) {
// Method calling logic
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery plugin');
}
};
var $test;
var test;
var init = function (object, settings) {
return object.each(function () {
$test = $('#test');
test = 'hello';
testfunc();
});
}
var testfunc = function () {
console.log($test);
console.log(test);
}
})(jQuery);