切换到 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 函数可用，但我有一个问题 game.js 中的 window.load 代码没有触发。

有人可以帮忙吗？

Answer 1

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

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

如果您已经在使用 jQuery，您可以使用 jQuery 的 ready facility. Or you can use the domReady RequireJS 插件。他们都能够检测到 load 事件已经发生的情况。

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

onLoad events not firing after switching to require.js

javascript

requirejs