javascript - 在window.onload = function()之后协调多个Javascript文件按顺序加载

Question

我发现，当我将媒体内容添加到 HTML5 程序时，除非我在 HTML5 程序中运行脚本，否则事情无法正常工作。 window.onload = 函数() { }

问题是，即使我的脚本按照我希望它们运行的​​顺序包含在内，如果我将每个脚本包装在 window.onload = function() 中，我会收到看起来它们没有运行的错误订单。

在我的 .html 文件中:

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>

是否有正确的方法告诉我的所有脚本在 window.onload 之后运行，以便按顺序加载内容，并且即使我想拆分我的项目，也不会遇到未声明的函数和变量的问题直到多个 .js 文件以使其更易于管理？

我将此声明放在 window.onload 下，因为如果我尝试在 window.onload 之前声明 bgm“audio1”，它会一直表现得像资源不存在一样。

var Foo = {
choice: ["0", "0", "0", "0", "0"],
bgm: document.getElementById("audio1"),
song1: "test.mp3"
};

在 window.onload 之前没有任何“运行”。事实上，我所有的执行功能都在这个功能之下。但我尝试在其他文件中声明其他函数，无论是否将该 .js 文件包装在 window.onload = function() {} 中，但它给了我错误。

我收到“ Uncaught ReferenceError :Foo 未定义”

当我在最后执行的 .js 文件中声明 Foo 时，就会发生这种情况，并且它位于 window.onload 包装器中。

之前的脚本有函数(只是函数，直到最后一个 .js 脚本全部包含在 window.onload 中)才会调用它们来查找 Foo 变量。

如果我将 Foo 放入该文件中，它找不到 document.getElementById("audio1") 因为我认为它尚未加载。如果我把它放回此处，它会找到audio1，但声明的其他函数无法使用该变量。我发现的唯一解决方案是将整个 javascript 应用程序混合到一个文件中，所有这些都在 window.onload 函数下。

我尝试将其他 .js 函数包装在它们自己的 window.onload 函数中，但随后出现错误，表明在这些早期脚本中声明的函数未定义。

3.js

window.onload = function() {

var Foo= {
    choice: ["0", "0", "0", "0", "0"],
    bgm: document.getElementById("audio1"),
    };

Game.NewArea("newgame");
}

2.js

var Game = (function() {
function NewArea($area) {
        switch($area)
    {
    case "newgame": 
        $("#textbox").html("Test");
        $("#choice0").html("Look");
        Foo.choice[0] = "look_1";
        Foo.bgm.play();
        break;

        default: break;
        }
    }
    return {
        NewArea: NewArea
    };
})();

Answer 1

难道不能在三个 JS 文件中分别定义一个普通函数，然后添加第四个文件/脚本部分，以正确的顺序在窗口加载时调用它们吗？

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script type="text/javascript">
window.onload(function() {
    one(); //Function from 1.js
    two(); //Function from 2.js
    three(); //Function from 3.js
    four(); //Function from 4.js
})
</script>

请注意，JS 文件不应使用 window.onload，而应仅定义代码示例中提到的函数。