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機能を使用できます。または、RequireJSにdomReadyプラグインを使用することもできます。どちらもイベントが既に発生している場合を検出できます。