Question

我不知道我做对还是错，我的理解还不是很清楚。我总是制作许多外部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文件中获取a和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中？或者我不应该把文件准备好放在所有文件中？现在我想在一个完全加载之后逐个加载脚本，而不是同时加载一堆东西。因此，我必须先说清楚。

Answer 1

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

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

例如：

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

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

Answer 2

每个文件都是独立的[他们不知道它们是否存在]因此如果脚本要求文档准备就绪，那么每个文件都需要document.ready。

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

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

Answer 3

在$（document）.ready上面，你包含的变量是全局变量

var a;
var b;

无论是单独加载还是作为一个文件加载它都没有区别，但通常最好将经常使用的脚本放在一个js文件而不是加载。

现在我想在一个完全加载后逐个加载脚本，没有一堆东西同时加载。

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

Answer 4

将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中排除它们）

e.g。而不是var a = 1000，请a=1000

Answer 5

在第一个声明的Javascript文件中，执行popnoodles建议的内容。

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

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

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

外部JS如何实际加载到html中？

5 个答案: