Question

在下面的代码中，我将gobal变量“myDiv”指定为jQuery元素。但是在“test（）”函数内部，似乎声明了myDiv变量但未定义。在我能用它做任何事情之前，我必须再次重新分配$（'myDiv'）。

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

Answer 1

无法访问文档头部的元素，因为没有任何内容呈现。这一行

var App = App || (function () {

将执行自执行功能，因为那时的App未定义。

一旦运行了自执行函数，它将查找$('#myDiv')，但由于该元素不存在，因此将无法找到（这总是为什么你得到的元素数组匹配的长度为0选择器）。

稍后，当您尝试访问App时，它已经构建完毕。

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

这意味着对App的调用会从自执行函数返回已构建的App，其值已在文档头部执行时存储。

当您调用函数test时，会反映已加载的状态。但是，您发布的功能较低

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

一旦页面已经加载（因为我们已经在jquery ready回调内部了）。这将在页面上找到元素，因为DOM已经被渲染并更新了值。

Answer 2

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

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

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

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

2 个答案: