0

私は複雑な Web アプリを構築していますが、物事を単純にするために、さまざまなモジュール (オブジェクト) をさまざまなファイルに作成しました。これらのモジュールは、一部のページでは必須であり、他のページでは必須ではない場合があります。

そのため、どのページでもすべてのモジュールをロードして無駄なリクエストを増やしてしまうことは避けたいと思います。

これまでのところ、私はこのように働いています:

  1. 必要なすべてのライブラリを含めます
  2. その後、jQuery(function() {});現在のページの特定の #ids または .classes 引数を使用して、これらのライブラリをインスタンス化します。

すべてが正常に機能しますが、私のアプリは簡単に成長していないため、RequireJS で JS を管理したいと考えています。

そして、それが私にとって少し混乱し始めるところです。

を使用して、必要に応じてモジュールをロードできることはわかってrequire(['module1', 'module2', 'etc'], function (module1, module2, etc) {})いますが、次のように言えます。

「このページでは、これらのモジュールをロードし、それらの #ids と .classes でインスタンス化します」

と

「この他のページでは、この #other-id を使用して、そのモジュールのみをロードします」

?

たとえば、module1 は API からデータをロードし、パラメータとして指定された特定のテーブルにリストします。

// in page 1
var mod1 = new Module1($('#content>table');
mod1.init(); // will load the data from the api with the url located at <table data-api-url="http://....">

// in page 2
var mod1 = new Module1($('#content .items>table'); // The table where we want the data to be populated is not at the same position!
mod1.init();

つまり、ページによっては、モジュールを別の方法でロードする必要があります。それが、RequireJsの使用方法がわからない方法です:/

4

2 に答える 2

2

必要なのは、各ページの JavaScript ファイルです。そのファイルは、ページ固有のコードを実行する責任があります。

r.js を使用してコードを最適化し、パックすると仮定します。

Module1、Module2 などは複数のページで使用されるため、ライブラリとして解釈できます。ブラウザが各ライブラリ モジュールに対して 1 つのリクエストを実行するのを避けるには、最適化されたメインファイルにこのモジュールを含めることができます。

ビルド プロファイルの "modules:" 属性を次のように構成します。

...
modules: [
   {
       name: "main" // this is your main file
       includes: [
          "module1",
          "module2",
          "etc..."
       ]
   }
]
...

これを行うことで、requirejs に次のように指示します。「main.js」ファイルを最適化し、そのすべての依存関係を含め、「module1」、「module2」なども含めます。これを行う必要があるのは、メイン ファイルでこれらのモジュールを require()/define() 呼び出しに含めないでください。ただし、ページ固有のモジュールがそれらを必要とする場合に備えて、それらを利用できるようにしたいと考えています。ほとんどのページで使用されるライブラリ モジュールに対してのみ、これを行う必要はありません。

次に、これらのモジュールを使用するページ用の JavaScript ファイルを作成します。

define(function(require, exports, module) {
   var $ = require("jquery"),
       module1 = require("module1");

   var mod1 = new Module1($('#content>table'));
   mod1.init();       

   //other page specific-code.
});

そして、htmlファイルで：

<script data-main="main" data-start="home" src="require.js"></script>

そのため、ページが読み込まれると、require.js に対するリクエストが行われ、次に main.js に対するリクエストが行われ、次に home.js に対するリクエストが行われます。それだけです。

別の質問へのリンクを貼りますので、この回答はコンテキストを取得します: How to use RequireJS build profile + r.js in a multi-page project

于 2012-08-01T12:34:49.037 に答える
0

RequireJS の作成者は、ページ固有のメイン ファイルを使用するサンプル プロジェクトを実際に作成しました: https://github.com/requirejs/example-multipage

于 2013-07-26T08:31:43.693 に答える