使用javascript模块模式的jQuery变量范围

在下面的代码中，我将gobal变量“myDiv”分配给一个jQuery元素。但是然后在“test（）”函数中，似乎myDiv变量已声明但未定义。我必须重新分配$（'myDiv'），然后才能对它做任何事情。使用javascript模块模式的jQuery变量范围

伪造变量XYZ似乎到达就好了，但...

<!DOCTYPE html> 
<htm> 
<head> 
<title>Javascript Test Code</title> 
<script src="js/jquery-1.9.0.min.js"></script> 
<script> 

var App = App || (function() { 

    var myDiv = $('#myDiv'), // define a global jQuery element variable. 
     xyz = 'xyz';  // and a bogus variable as a test. 

    function test() 
    { 
    console.log('running test...','myDiv is', myDiv); // length is 0 
    console.log('xyz is ', xyz); // says xyz 

    myDiv = $('#myDiv'); // after selecting with jQuery... 

    console.log('running test...','myDiv is', myDiv); //length is 1 
    console.log('xyz is ', xyz); // still says xyz 
    } 

    return {test:test} 

}()); 

$(function(){ 

    App.test(); 

}); 

</script> 
</head> 
<body> 
<div id="myDiv"></div> 
</body> 
</html>

来源

2013-02-21 Thomas Orion

这与范围界定无关，变量存在且其值正确记录。对于这个问题，请参阅重复[为什么jQuery或DOM方法（如\'getElementById \'找不到该元素？]（http://stackoverflow.com/questions/14028959/why-does-jquery-or-a -dom-method-such-as-getelementbyid-not-find-the-element） – Bergi 2013-02-21 00:51:42

有从文件的头部元素进不去，因为没有被渲染。此行

var App = App || (function() {

将执行自执行功能，因为该位置的应用程序未定义。

自执行函数运行后，它会查找$('#myDiv')，但由于该元素不存在，所以不会找到它（这总是为什么您获得匹配选择器的元素数组的长度为0）。

后来，当您尝试访问App时，它已经建好。

$(function(){ 
App.test(); 
});

这意味着调用App返回已建成App从自我执行的功能，与当它在文档的头部执行已存储的值。

当您调用函数test时，反映了加载的状态。然而，在功能下发出

myDiv = $('#myDiv'); // after selecting with jQuery...

一旦页面已经加载（因为我们是jQuery的准备回调的内部的话）。由于DOM已经被渲染并且更新了值，这将在页面上找到元素。

来源

2013-02-21 00:44:00

感谢您的回答。我在var语句之后添加了一个init（）函数来执行全局变量赋值。我必须在test（）之前先显式调用init（），但我将来会避免这种问题。 – 2013-02-21 01:52:19

在上面的特定示例代码中，初始myDiv为空，因为当声明App时，DOM尚未完全加载，因此#myDiv的长度正确为零。

您应该移动模块以在DOM加载后运行，即。移动到脚本的底部。

查看示例jsFiddle - 您的任务很好。 http://jsfiddle.net/yWhbL/

来源

2013-02-21 00:45:21

使用javascript模块模式的jQuery变量范围

回答

相关问题