2011-09-26 10 views
0

私は、WebフレームワークにJavaScriptコンパイラを統合する作業をしています。jsモジュールの実行を妨げる

開発モードで実行すると、すべてのjavascriptモジュールがajaxによって個別にロードされますが、プロダクションモードに切り替えると複数のモジュールが1つのファイルにコンパイルされ、HTTP要求の数が削減されます。各モジュールは、別のモジュールを「要求」するための関数を呼び出すことができます。

私が抱えている問題は、moduleAにmoduleBが必要で、moduleBがロードされていないと、ajaxリクエストが発生するということです。 moduleAとmoduleBが一緒にコンパイルされる次のコードサンプル(非常に単純化されている)を考えてみましょう。 moduleAはmoduleBを必要とし、moduleBはスクリプト内のそのポイントによってロードされていないので、ajaxリクエストを行います。数行後にmoduleBが実行され、2回実行されています。

/* compiled script file (multiple files combined) */ 

util.require = function(moduleName) { 
    if (moduleIsNotLoaded(moduleName)) { 
     loadByAjax(moduleName); 
    } 
} 

/* start module a */ 
util.require('moduleB'); 
moduleB.func(); 
/* end module a */ 
util.setModuleLoaded('moduleA'); 

/* start module b */ 
moduleB.func = function() { 
    alert('hello world'); 
}; 
bind_some_event(); 
/* end module b */ 
util.setModuleLoaded('moduleB'); 

それがHTTPリクエストを削減する最初の目的に反して、いくつかのモジュールが二回バインドすることはできませんイベントハンドラを、バインドするので、これはunnacceptableです。モジュールの中には、関数定義だけでなく、即座に実行されるコードを持つものもあります。

ファイル全体が実行されるまで、各モジュール内のコードを実際に実行することなく、すべてのモジュールを使用可能にしてロード済みとして強制的に登録できる方法はありますか?おそらく単純な解決策はないと理解しており、パラダイムシフトが必要な場合があります。

答えて

0

私たちのWebアプリケーションもモジュールで構成されています。

最も一般的なモジュールは、最初のHTMLページ(HTML、JS、CSS、データイメージ)に組み込まれています。 アプリは、そのページ(300-400kb、次にキャッシュから)から始まり、データのための単一のHTTP呼び出しを開始します。
これは非常に迅速にアプリを起動させます。

ユーザーが新しいモジュールを選択した場合、まだ読み込まれていません。それはiframeを介して取得します。 HTML、CSS、およびJavascriptオブジェクトは、親ページによってインポートされます。

新しいモジュールも親ページから開始されます。

関連する問題