3

我不知道我做的是对还是错，我的理解不是很清楚。我总是制作许多外部 js 文件，并将它们全部放在标题中。我所有的外部 js 文件都以这样的方式开始：

$(document).ready(function(){
  //all the functions and variables
});

例如，如果我有 3 个外部 js 文件：

1.

$(document).ready(function(){
  var a = 1000;
  function run(){alert(a)};
  $('#btna').click(function(){run();});
});

2.

$(document).ready(function(){
  var b = 2000;
  function run(){alert(b)};
  $('#btnb').click(function(){run();});
});

3.

我从未尝试使用其他 JS 文件中的变量和函数。是否可以在第三个 JS 文件中获取aand变量？b

$(document).ready(function(){
  //is it possiblr to do this?
  alert(a+b);
  //or if I use run(), which methods will be called?
  run();
});

我很困惑......外部JS实际上是如何加载到html中的？或者我不应该在所有文件中准备好文件？现在我想在一个完全加载后一个接一个地加载脚本，而不是同时加载一堆东西。因此，我必须先说清楚。

4

5 回答 5

2

不要开始将变量放在全局范围内。虽然这有时是必要的，但您最好使用http://requirejs.org之类的东西在不同范围之间共享模块。通过使用模块和对象，您可以限制变量的范围并减少由于在具有相同范围的不同文件中定义的变量之间的冲突而导致错误的机会。RequireJS 还为您提供了一种管理依赖项、异步加载 javascript 文件的方法，并提供了一种简洁的方法来优化您的脚本（如果需要）。

正如其他人所指出的那样，从学习的角度来看，您观察到的困难是由于变量的范围是在文档就绪上运行的匿名函数的本地变量。在 JavaScript 中定义的变量var具有包含代码块的本地范围。如果您不使用定义变量var然后它是全球范围内的。应避免使用全局范围，以减少在多个位置意外重用变量的机会。一个好的经验法则是尽可能地限制范围，将其定义为本地使用它的地方。如果必须全局共享变量，您可能应该将其定义为对象的属性并全局共享该对象。虽然对象是全局共享的，但对象上下文充当变量的范围（如命名空间），如果您不小心将它重用于其他地方用于不同目的，则不太可能发生这种情况。

例如：

<script type="text/javascript">
     var globalConstants = {
          a = 5,
          b = 10
     };
</script>

然后您可以稍后参考globalConstants.aor globalConstants.b- 这样您就不太可能在不知道它们实际上是相同变量的情况下意外地在单独的脚本中重复使用aor 。b

于 2012-11-25T05:51:05.590 回答
0

每个文件都是独立的[他们不知道其中任何一个存在]，因此document.ready如果脚本要求文档准备好，他们将需要每个文件。

最好将脚本包含在正文的末尾而不是头部。看看这个问题：Putting jQuery/javascript source pages before end of body tag

现在有趣的是你的例子，你会得到错误，因为你的变量是本地范围的。由于局部作用域，变量a、b和run将在第三个文件中未定义。

于 2012-11-25T05:24:08.410 回答
0

在您包含的第一个文件中的 $(document).ready 之上，使变量成为全局变量

var a;
var b;

无论您是单独加载还是将其作为一个文件加载，这对 javascript 都没有影响，但通常将经常使用的脚本放在一个 js 文件中而不是加载是一个好主意。

现在我想在一个完全加载后一个接一个地加载脚本，而不是同时加载一堆东西。

...这可能会变得更慢，因为你正在加载更多。

于 2012-11-25T05:28:57.043 回答
0

将 js 代码放在单独的文件中没有任何区别。您可以认为这 3 个文件的结果将是具有此代码的单个文件，

$(document).ready(function(){
 var a = 1000;
 function run(){alert(a)};
 $('#btna').click(function(){run();});
});

 $(document).ready(function(){
     var b = 2000;
     function run(){alert(b)};
     $('#btnb').click(function(){run();});
    });

 $(document).ready(function(){
       //is it possiblr to do this?
    alert(a+b); 
       //or if I use run(), which methods will be called?
    run();
 });

但是在第三个片段中，不可能这样做a+b不是因为它们不在单独的文件中，而是因为a和b是在不同的函数上定义的。JS 有函数作用域。一旦函数终止，变量就会被销毁。

如果您想使用它们，a+b只需将它们设为全局（通过var从它们中排除）

例如，而不是var a = 1000，做a=1000

于 2012-11-25T05:32:27.940 回答
0

在第一个声明的 Javascript 文件中，按照 popnoodles 的建议进行操作。

您也可以在任何其他 js 文件包含之前添加以下内容。

<script>
 var a;
 var b;
</script>

全局变量需要在顶部声明，以便后续的 JavaScript 文件可以使用它们。

于 2012-11-25T05:33:50.997 回答