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工具。或者您可以使用Require {domReady插件进行RequireJS。他们都能够检测到load事件已经发生的情况。

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

1 个答案: