使用javascript模块模式的jQuery变量作用域_Javascript_Jquery_Scope_Module Pattern

使用javascript模块模式的jQuery变量作用域

javascript jquery

使用javascript模块模式的jQuery变量作用域,javascript,jquery,scope,module-pattern,Javascript,Jquery,Scope,Module Pattern,在下面的代码中，我为gobal变量“myDiv”分配了一个jQuery元素。但是在“test（）”函数中，似乎声明了myDiv变量，但没有定义。我必须重新分配它$（'myDiv'），然后才能使用它做任何事情伪变量xyz似乎可以很好地访问，但是 <!DOCTYPE html> <htm> <head> <title>Javascript Test Code</title> <script src="js/jquery-1.9.0.

在下面的代码中，我为gobal变量“myDiv”分配了一个jQuery元素。但是在“test（）”函数中，似乎声明了myDiv变量，但没有定义。我必须重新分配它$（'myDiv'），然后才能使用它做任何事情

伪变量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>


Javascript测试代码
var App=App | |（函数（）{
var myDiv=$（'#myDiv'），//定义一个全局jQuery元素变量。
xyz='xyz'；//和一个伪变量作为测试。
功能测试（）
{
log（'running test…'，'myDiv is'，myDiv）；//长度为0
log（'xyz is'，xyz）；//表示xyz
myDiv=$（'#myDiv'）；//使用jQuery选择后。。。
log（'running test…'，'myDiv is'，myDiv）；//长度为1
log（'xyz is'，xyz）；//仍然是xyz
}
返回{test:test}
}());
$（函数（）{
App.test（）；
});

由于未呈现任何内容，因此无法从文档头访问元素。这条线

var App = App || (function () {

将执行自动执行功能，因为此时的应用程序未定义

一旦运行了自执行函数，它将查找

$（'#myDiv'）

，但由于元素不存在，因此将找不到它（这就是为什么匹配选择器的元素数组的长度总是为0的原因）

稍后，当您尝试访问

应用程序时，它将已经生成
$(function(){
 App.test();
});

这意味着对App
的调用将返回自执行函数中已生成的App
，其中的值已存储在文档的头部
调用函数test
时，会反映加载的状态。但是，在您发出的函数中
myDiv = $('#myDiv'); // after selecting with jQuery...

一旦页面已经加载（因为我们已经在jqueryready回调中了）。这将在页面上找到元素，因为DOM已经呈现并更新了值。
在上面的特定示例代码中，初始myDiv为空，因为在声明App时，DOM尚未完全加载，因此#myDiv
的长度正确为零
您应该在加载DOM后移动要运行的模块，即移动到脚本的底部
请参阅示例JSFIDLE-您的作业很好
 这与作用域无关，变量存在且其值已正确记录。有关此问题，请参阅副本谢谢您的回答。我在var语句之后添加了一个init（）函数来执行全局变量赋值。在test（）之前，我必须先显式调用init（），但我将在将来避免此类问题。