我是一名中级前端JS开发人员,我正在尝试Chris Coyyer
here概述的模块模式.
但是当我在设置中存储jQuery选择器时,我无法使用它来触发click事件.请参阅以下代码和我的评论…非常感谢任何帮助！
var s,TestWidget = {
settings: {
testButton: $("#testing")
},init: function() {
s = this.settings;
this.bindUIActions();
},bindUIActions: function() {
console.log(s.testButton); // This works: [context: document,selector: "#testing",constructor: function,init: function,selector: ""…]
//This doesn't work - why?????
s.testButton.click(function() {
//Why isn't this triggered?
alert('testButton clicked');
});
/*This works,obvIoUsly:
$('#testing').click(function() {
alert('testButton clicked');
});
*/
}
};
$(document).ready(function() {
TestWidget.init();
});
解决方法
问题是你在DOM准备好之前初始化$(“#testing”),所以这个jQuery对象是空的.
一个简单的解决方案是将所有代码放入就绪回调中.
另一个是替换
settings: {
testButton: $("#testing")
},
同
settings: {
},init: function() {
s = this.settings;
s.testButton = $("#testing");
this.bindUIActions();
},
但是很难理解你为什么这么简单的事情使用这么多代码.你可能在这里过度使用这个模式并且它不是很干净,因为你有两个全局变量s和TestWidget,当一个已经很多时.
这里有一些代码的细微变化,在我看来,更清洁,同时仍然使用模块(IIFE variant)：
TestWidget = (function(){
var settings = {};
return {
init: function() {
settings.testButton = $("#testing");
this.bindUIActions();
},bindUIActions: function() {
console.log(settings.testButton);
settings.testButton.click(function() {
alert('testButton clicked');
});
}
}
})();
$(document).ready(function() {
TestWidget.init();
});
设置保存在闭包中,并且不会在全局命名空间中泄漏.请注意,如果您不对该模块执行更多操作,即使是此版本也没有意义.