javascript - 切换到 require.js 后 onLoad 事件未触发

Question

我目前将 JS 分成了几个脚本，全部位于 js/script 目录中。每个脚本的结构类似于以下示例:

var game=(function(){
    //inner functions here, i.e.:
    function _tick(){
        return "something";
    }

    function _server_time(){
        return "something else";
    }

    window.addEventListener('load',function(){
        console.log("happening?");
    });

    var _ext={
        tick:_tick,
        server_time: _server_time
    };

    return _ext;
})();

其他脚本中的函数将通过调用 game.tick 或 game.server_time 来访问上述函数。任何地方都没有全局变量。

现在我想切换到基于 require.js 的架构。

所以我添加了这个:

<script data-main="/js/main" src="/js/require.js"></script>

js/main.js 目前是:

requirejs(["scripts/app"], function(app) {
    console.log(app);
});

在 scripts/app.js 中我有:

define(function (require) {
    var game = require('./game');
});

现在，game.tick 和 game.server_time 函数可用，但我在使用 window.load 代码时遇到了问题game.js 未触发。

有人可以帮忙吗？

Answer 1

当您使用script加载脚本并且不使用async属性时，脚本会立即执行。因此它有机会监听 load 事件。

当您使用 RequireJS 时，脚本是异步加载的。在许多情况下，这意味着 load 事件将在脚本运行之前发生，也就是在 window.addEventListener('load',... 运行。因此，您的代码正在监听已经发生且不会再次发生的事件。

如果你已经使用了 jQuery，你可以使用 jQuery 的 ready设施。或者您可以使用domReady RequireJS 的插件。它们都能够检测到 load 事件已经发生的情况。