我有一个文件调用text.js，它有
var Text = function(canvas){
var textField = $('#textField'),
addTextButton = $('#addText');
var init = function(){
addTextButton.click(function(){
alert('won"t work?')
});
},
resetTextField = function(){
// it work if I put the selector here like var textField = $('#textField'),
textField.val(''); // won't work
};
return{
init:init
}
}();
它包含在我的index.html中。我在那里做初始化
$(function(){
Text.init();
}());
问题是甚至不能被解雇。我想我搞砸了。
最佳答案
Text中的代码将立即运行，并返回带有init的对象。如果您在查找元素之前运行该代码，例如：
<!doctype html>
<html>
<head>
<!-- ... --->
<script src="text.js"></script><!-- Problem here -->
<script>
$(function(){
Text.init();
}());
</script>
</head>
<body>
<!-- ... --->
<input id="textField"><input id="addText" type="button" value="Add">
<!-- ... -->
</body>
</html>
...您最终将在
textField和addTextButton中使用空的jQuery对象。另外，您还要运行试图立即传递
ready的函数（然后将undefined传递给ready），问题出在这里： $(function(){
Text.init();
}());
// ^^---------- problem
您不想要那些
()。您要将函数传递到ready中：$(function(){
Text.init();
}); // <== Note no ()
如果要使用
init方法，最好将所有初始化都放在其中，而不要放在两个地方：var Text = function(canvas){
var textField, addTextButton;
var init = function(){
textField = $('#textField');
addTextButton = $('#addText');
addTextButton.click(function(){
alert('won"t work?')
});
},
resetTextField = function(){
// it work if I put the selector here like var textField = $('#textField'),
textField.val(''); // won't work
};
return{
init:init
}
}();
但是请注意，如果遵循usual best practice将脚本放在文档末尾的位置，就在结束
</body>标记之前，上面定义的元素将存在并且可用，这将使使用（和ready）是不必要的。因此，如果您控制init标记的位置，则可以选择。因此，例如：
<!doctype html>
<html>
<head>
<!-- ... --->
</head>
<body>
<!-- ... -->
<input id="textField"><input id="addText" type="button" value="Add">
<!-- ... -->
<script src="text.js"></script>
<script>
$(function(){
Text.init();
});
</script>
</body>
</html>
关于javascript - 显示模块模式和jQuery失败，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41459938/