web-dev-qa-db-ja.com

Require.JSをいつ、どのように使用するかを理解する

私はRequire.JSを使い始めたばかりであり、Require.JSを使用する適切なケースと、そのようなケースでの正しい使用方法については少しわかりません。

Require.JSで現在設定しているものを以下に示します。 functionA()とfunctionB()の2つの関数があります。これらの関数は両方とも、正しく機能するために追加の関数functionC()を必要とします。

FunctionC（）が必要なとき、つまりfunctionA（）またはfunctionB（）が呼び出されるときだけロードしたいです。だから私は次のファイルを持っています：

functionC.js

functionC(){
  //do stuff
}

functionA.js

functionA(){  
  define(['functionC'],function(){
    //functionC() is loaded because it is listed as a dependency, so we can proceed
    //do some functionA() stuff
  });
}

functionB.js

functionB(){  
  define(['functionC'],function(){
    //functionC() is loaded because it is listed as a dependency, so we can proceed
    //do some functionB() stuff
  });
}

それで、これは正しく設定されていますか？そして、同じページでfunctionA（）とfunctionB（）の両方を呼び出すことになった場合、両方ともfunctionC.jsファイルをロードするため、余分な作業が行われますか？もしそうなら、それは問題ですか？もしそうなら、functionC.jsがまだロードされているかどうかを確認し、ロードされていない場合にのみロードするように設定する方法はありますか？最後に、これはRequire.JSの適切な使用ですか？

javascriptrequirejs
68
maxedison

define()は、モジュールの定義にのみ使用する必要があります。上記の例では、コードの一部を動的にロードする必要があるため、require()を使用する方が適切です。

functionA.js

_functionA(){
  require(['functionC'],function(functionC){
    //use funcC in here to call functionC
  });
}
_

いくつかのメモ：

  • require([])は非同期であるため、functionAの呼び出し元がその関数からの戻り値を予期している場合、エラーが発生する可能性があります。 functionAが作業を終えたときに呼び出されるコールバックをfunctionAが受け入れるのが最適です。
  • 上記のコードは、functionAの呼び出しごとにrequire()を呼び出します。ただし、最初の呼び出しの後、_functionC.js_をロードするためのペナルティはありません。1回しかロードされません。初めてrequire()が呼び出されると、_functionC.js_をロードしますが、残りの時間では、RequireJSは既にロードされていることを知っているため、function(functionC){}関数を呼び出さずに_functionC.js_を再度要求します。
47
jrburke

RequireJSとJavaScriptモジュールの詳細については、こちらをご覧ください。 RequireJSを使用したJavaScriptモジュール（スパゲッティコードからラビオリコードまで）

22
Malkov