ロード完了後に各モジュールを別々にレンダリングする

Question

複数のモジュールを持つアプリケーションがあり、ロードが完了するとすぐにレンダリングする必要があります。アイデアは、各モジュールが、他のモジュールの状態に関係なく、専用レンダリング機能を実行することです。ここで

は、メインモジュールの実装です：

;(function(doc, win, undefined) { 
    'use strict'; 

    define(['module', 'domReady!'], function(main) { 
     var modules = main.config().modules; 
     while (modules.length) { 
     require([].concat(modules.shift()), function(module) { 
      module.init(); 
     }); 
     } 
    }); 

}(document, window)); 

すべてのモジュールがロードを完了する前に、それがロードされていた後、各モジュールは、右レンダリングする必要があることにもかかわらず、画面に何も表示されていないようです。これは、アプリケーションに入るときの遅れを引き起こし、アプリケーションが実行を開始したことを示すものではありません。このような振る舞いを引き起こす可能性があり、できるだけスムーズにアプリの初期化を行うにはどうすればよいでしょうか？

Answer 1

あなたが探している効果を提供するのは、AMDのセマンティクスの一部ではありません。唯一の保証は、requireに渡すコールバックが、依存関係配列にリストされているモジュールとその依存関係がロードされるまで実行されないことです。

RequireJSは、ブラウザがサーバーにリクエストを送信する方法を細かく制御できません。たとえば、リクエストを発行するまでにブラウザに既に他のリクエストが多すぎる場合（スタイルシート、イメージ、またはリクエストしたモジュール以外にロードする必要があるものについてはrequire）、ブラウザ以前のものが解決されるまでRequireJSの要求を遅らせることを決定するかもしれません。

サーバー側で要求がどのように解決されるかは、どのような順序で発生するかにも影響します。

あなたのアプリケーションの構造があります。 main.config().modulesに['A', 'B', 'C']が含まれているとします。したがって、A、B、Cを順番にロードし、できるだけ早く初期化する必要があります。しかし、これらのすべてのモジュールもjqueryに依存していることがわかります。 RequireJSがAを実行すると、define(['jquery], function ($) {...が実行されます。さて、今はjqueryを取得する必要があります。 jqueryがフェッチされるまでには、BとCもそれを待つことになります。したがって、RequireJSはA,B、Cを実行し、コールバックは近い順に待機します。 1つの依存関係だけでは大したことではないかもしれませんが、あなたのモジュールが他の共通モジュールに依存している場合は、それが加算され、最終的な結果は共通モジュールがロードされている間に顕著な待機を得て、それからA 、B、Cはバッチで実行されます。

RequireJS独自のオプティマイザまたはAMDモジュールを理解している別のオプティマイザを使用して、モジュールを組み合わせて、探している結果を優先するバンドルにすることができます。このような最適化を行うには、開発者がアプリケーションの構造を慎重に分析する必要があります。一般的なケースでは、後で結果を得るためにオンにできる単一のフラグ、オプション、またはプラグインはありません。さらに、上記のように、ブラウザとサーバーはすべてそれをぶち壊すような方法で動作する可能性があります。

---

完全性について言及しておくべきことの1つです。あなたは、順次、初期化が、以前のものがロードされた後にのみつのモジュールに要求を強制することができます。

;(function(doc, win, undefined) { 
    'use strict'; 

    define(['module', 'domReady!'], function(main) { 
     var modules = main.config().modules; 
     function next() { 
     var name = modules.shift(); 
     if (name === undefined) { 
      return; 
     } 

     require([name], function (module) { 
      // When one module has loaded, we initiate the request for the 
      // next one. 
      next(); 

      // And init what we've got now. 
      module.init(); 
     }); 
     } 

     next(); 
    }); 
}(document, window)); 

しかし、ここでのコストはB等、Aがロードされた後にのみ要求されていることです元のコードでは、すべてのモジュールがバットからすぐに要求されます。これにより、総初期化時間が長くなる可能性があります。