0

require.jsを使用して次のコードがあります。

Utilities.js：

define(["thirdparty-script-A.js"], function(){ ... });

application.js：

define(["utilities", "order!thirdparty-script-A.js", "order!thirdparty-script-B.js"], function(){ ... });

thirdparty-script-B.jsに依存関係があり、ロード（実行）が完了していないthirdparty-script-A.js場合は正しくロードされません。thirdparty-script-A.js

要約すると、依存関係の構造は次のようになります。

  utilities +---> thirdparty-script-A.js <---+ thirdparty-script-B.js

        ^                   ^                          ^
        |                   |                          |
        |                   +                          |
        |                                              |
        +------------+ application.js +----------------+

ファイアバグを見ると、フェッチの順序は次のとおりです。

  1. ユーティリティ
  2. サードパーティ-スクリプト-A.js
  3. 応用
  4. サードパーティ-スクリプト-B.js

また、console.log（）を使用したデバッグから（および理論的な観点から）、ロード（実行）の順序は次のとおりです。

  1. サードパーティ-スクリプト-A.js
  2. ユーティリティ
  3. サードパーティ-スクリプト-B.js
  4. 応用

ここに問題があります。 ほとんどの場合、上記はFirefox、Chrome、およびIE9で問題なく機能します。ただし、thirdparty-script-A.jsの読み込みがまだ完了していないため、thirdparty-script-B.jsの読み込みに失敗する場合があります。実際、console.logsは、thirdparty-script-B.jsが最初に実行され、次にサードパーティ-A.js、ユーティリティ、そして最後にアプリケーションが実行されることを示しました。何が起こっている？これまでのところ、この問題はIE9でしか再現できません。

application.jsでは、orderプラグインを使用して、2つのサードパーティスクリプトが読み込まれる順序を保証しているため、非常に奇妙です。それでも、スクリプトは順不同で実行されます。

さらに調査したところ、この問題は、thirdparty-script-A.jsのフェッチにthirdparty-script-B.jsよりも時間がかかる場合にのみ発生することがわかりました。それは私にその順序を推測させます！プラグインはdefine（）では機能しません。理論的には、thirdparty-script-A.jsのフェッチとロードに20秒かかった場合でも、thirdparty-script-B.jsは実行を待機する必要があります。それが注文です！振る舞いますね

もう1つの理論は、ファイルのいずれかが順番に並んでいると機能しないというものです。チェーンの上位にある別のモジュール（utilities.jsのthirdparty-script-A.js）で必要でした。

これに対する回避策はあります。これは、application.jsをrequire（）でラップし、最初にすべての従来のスクリプトをロードすることです。

require(["order!thirdparty-script-A.js", "order!thirdparty-script-B.js", "application"], function(app){ //app.init }

ただし、60以上のスクリプトアプリケーションの場合、requireリストは長くて面倒になる可能性があります...

なぜdefine（）とorderについて誰かが私に教えてもらえますか？彼らのように振る舞いますか？

本当にありがとう！

はい、サードパーティスクリプト-AとBはキャッシュされます。=）

4

1 に答える 1

0

秘訣は、すべてをモジュールでラップすることです。私は通常、jQueryに依存するサードパーティのプラグインでこの「再パッケージ化」を行います。$そうすれば、プラグインがロードされたときにjQueryがロードされている（そして存在している）ことが確実になります。この方法では、注文プラグインは必要ありません。

「再パッケージ化」することで、プラグインコードをdefine()依存関係とともに呼び出しでラップし、通常どおりにロードするだけです。

アプリケーションで：

define(['utilities','scriptA','scriptB'],function(){
    //application code
});

ユーティリティで：

define(['scriptA'],function(){
    //utilities code
});

scriptBで

define(['scriptA'],function(){
    //scriptB code
});

scriptAで

define(function(){
    //scriptA code
});

したがって、順序は次のとおりです。

Loading |      Application       A
        |   Utilities, Script B  |
        V       Script A         | Execution
         \----->----->----->----/

ScriptAは、Applicationがそれに依存していたため、以前にロードおよび実行された可能性があります。しかし、安全のために、あなたはそれをこのようにすべきです。そうすれば、依存関係が正しくロードされていることを確認できます。

于 2012-05-11T03:54:22.520 に答える