显示模块模式和jQuery失败
[英]Revealing module pattern and jquery failed
问题描述
I have a file call text.js and it has 
我有一个文件调用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
}
}();
It's included in my index.html. 它包含在我的index.html中。 In there I do init like 我在那里做初始化
$(function(){
Text.init();
}());
The problem is the even't can't be fired. 问题是甚至不能被解雇。 I think I messed up something. 我想我搞砸了。
2 个解决方案
解决方案1
1 2017-01-04 09:19:41
The code in Text is run immediately , and returns the object with init on it. Text的代码立即运行，并返回带有init的对象。 If you run that code before the elements it looks up exist, for instance: 如果您在查找元素之前运行该代码，例如：
<!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>
... you'll end up with empty jQuery objects in textField and addTextButton . ...您最终将在textField和addTextButton得到空的jQuery对象。
Separately, you're also running the function you're trying to pass ready immediately (and then passing undefined into ready ), the problem is here: 另外，您还要运行试图立即传递ready （然后将undefined传递给ready ）的函数，问题出在这里：
$(function(){
Text.init();
}());
// ^^---------- problem
You don't want those () . 您不想要那些() 。 You want to pass the function into ready : 您要将函数传递给ready ：
$(function(){
Text.init();
}); // <== Note no ()
If you're going to have the init method, it would be best to put all your initialization inside it rather than putting it in two places: 如果要使用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
}
}();
Note, though, that if you follow the usual best practice of putting your scripts at the end of the document, just prior to the closing </body> tag, the elements defined above that will exist and be available, which would make using ready (and init ) unnecessary. 但是请注意，如果您遵循通常的最佳做法将脚本放在文档的末尾 ，即在</body>标记之前，则上面定义的元素将存在并可用，这将使使用ready （和init ）是不必要的。 So if you control where the script tags go, that's an option. 因此，如果您控制script标记的位置，则可以选择。
So for instance: 因此，例如：
<!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>
解决方案2
0 2017-01-04 09:14:48
You are invoking the function once defined using () at a point where DOM is not loaded. 一旦在() DOM）未加载的位置调用了使用()定义的函数。 Thus, all selectors return zero nodes. 因此，所有选择器都返回零节点。
var Text = function(canvas){
// ...
}();
^^
Remove that. 删除它。 And when you call it, you need to instance the function first, and keep that instance reference (if you wish to). 并且在调用它时，需要首先实例化该函数，并保留该实例引用（如果需要）。
var text = new Text();
text.init();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.