Question

我有一个包含三个文件的网站：

的index.html

<html>
<head>
<script src="First.js"></script>
<script src="Second.js"></script>
</head>
<body></body>
</html>

First.js

window.onload = Main;

Second.js

function Main() { var foo = 1; }

当我打开页面时，我希望变量'foo'设置为'1'。相反，当我打开页面时，它会断开，表示'Main is not defined'并且'Main（）'永远不会被调用。

如果窗口的'.onload'事件不应该在页面完全加载之前触发，因此假设两个脚本都已加载，为什么window对象没有引用'Main（） 'Second.js'中的方法？ 'Main（）'应该是一个全局可访问的函数吗？

注意：我意识到我可以更改加载脚本的顺序，然后我的代码可以工作，但这不是我的问题的目的。我真正想做的是验证我的假设。

Answer 1

应首先包含第二个脚本文件！这就是定义函数的地方。在未加载之前，您无法在第一个脚本中引用它。

Answer 2

它不起作用，因为<script>元素中的代码是顺序运行和独立（这假设是同步脚本，默认情况下）。也就是说，两个不同的<script>部分不能相互正向引用。现在，JavaScript“hoists”function name () {}在同一个上下文中构建，因此这将在单个<script>中“无序”地工作。

序言/警告：

使用onload考虑 not 。如果其他东西试图使用它（onload），那么某些东西可能会破裂。（我推荐jQuery，因为它“正确”并且“非常容易”......然后，许多其他框架也是如此。选择一个： - ）

例如，这可以在jQuery中使用：

jQuery(function () { Main() })

解释它为何起作用（以及如何在不重新排序脚本或使用jQuery的情况下修复它）：

请注意，在这种情况下，将调用jQuery内部事件处理程序，该处理程序调用匿名回调，然后调用Main（现在解析为函数对象）。这里的“类似”代码是：

window.onload = function () { Main() }

这些工作是因为Main 未评估，直到onload 发生了，在这种情况下，所有[同步] <script>元素都已被执行。（请参阅我对评估 Main的含义的评论。）

另一方面，window.onload = Main（或jQuery(Main)）评估 Main然后使用结果值;正如其他人所指出的那样，由于Main元素的排序（它们按顺序运行），此时<script>未设置（“未定义”）。

请参阅顶部的说明，了解不直接使用onload的原因; - ）

快乐的编码。

Answer 3

在加载Second.js之前，Main()函数不存在，因此如果您首先加载First.js，则window.onload = Main;中不会使用函数对象（{{1}是未定义的）。如果你还没有，请先加载Second.js。

为window.onload分配函数时，为什么脚本排序很重要？

3 个答案: