web-dev-qa-db-ja.com

RequireJSのrequire（）とdefine（）の違いは？

RequireJSでは、require（）とdefine（）の使用の基本的な違いは何ですか？

require(['a'], function(a) {
    // some code
});

// A.js
define(['b','c','d','e'], function() {
    //some code
});

ユースケースは非常に役立ちます。

javascriptrequirejsamd
29
testndtv

初期の使用で悩まされた1つの重要な違いは、defineが呼び出されない可能性があることを理解することでした。

ファイルごとにdefineが1つしかない限り、そのファイル名の下で利用可能なモジュールとして登録されます。ただし、defineモジュールは、require関数がそれぞれのモジュールを要求したときにのみロードされます。

定義：XXXが必要な場合は、これらの他のものを最初にロードしてから、この関数の結果を返します。

必須：これらの他のものをロードしてから、この関数を実行します。 （「if」なし）

例：このJSファイルをページに含めるとしましょう：

// this is in company/welcomepage.js
define(['company/ui_library'],
    function(uiLib) {
        console.log('Welcome to {company}!');
    }
);

それが唯一のJavascriptファイルである場合、ページを開くことができ、ユーザーを歓迎するようにスクリプトが指示しているにもかかわらず、コンソールログには何もありません。ただし、ページまたは別のスクリプトのどこかに次の行を挿入すると、状況は変わります。

require(['company/welcomepage'], function() {
    // optionally insert some other page-initialization logic here
});

これで、ページの読み込み時にコンソールにウェルカムメッセージが表示されます。

実際、2番目のものがあれば、手動で<script>タグとしてwelcomepage.jsを含める必要はありません。要求を確認するとすぐにその場所からロードし、必要であると認識します。

49
Katana314

requireとrequirejsは同じです。

require === requirejs // true

requireは、定義済みのモジュールをロードする方法です。たとえば、loggerモジュールをロードするには、次のようにします。

require(["logger"], function(logger){
  logger.bla("S");
});

ここでは、requireという名前の定義済みモジュールを指定し、loggerメソッドを呼び出して使用するblaを呼び出しています。

defineはモジュールを定義する方法です。たとえば、loggerモジュールを定義するには、次のようにします。

// logger.js
define(function(){
  return {
    bla: function(x){
      alert(x);
    }
  }
});

ここでdefineを呼び出し、loggerモジュールを定義しました。このモジュールでは、公開したいbla関数を返しました。

Defineはexportと非常によく似ている場合があります。なぜなら、defineはrequireが他のモジュールを使用できるように、他のモジュールも依存して使用できるからです。同じloggerモジュールを示します。今回はモジュールを使用します

// logger.js
define(["popup"], function(popup){
  return {
    bla: function(x){
      popup.show(x);
    }
  }
});

ここで、ロガーモジュールI definedもpopupと呼ばれる依存関係を持っているため、requireのように見えます。

18
user566245

モジュール定義には常にdefineを使用すると思います。これを行うにはいくつかのフレーバーがあり、（投稿した例のように）定義する最初の引数として配列内の依存関係を持つモジュールを定義できます。

または、次のような Simplified CommonJS wrapper を使用できます。

define(function (require) {
    var otherModule = require('otherModule');
    return function () {
        return otherModule.operation();
    };
});

JSONPサービス依存関係 形式と混同された可能性があります。この形式では、require（）を使用してサービスをロードし、サービスが応答するとJSONPコールバックとして最終的にモジュールを定義するdefine（）を指定します。

そのため、最後にdefine（）を使用してモジュールを定義し、require（）を使用してそれらをロードします。

1
Joni Bekenstein