web-dev-qa-db-ja.com

RequireJs-定義と要求

モジュールの場合、defineではなくrequireを使用していたオブジェクトを返しません。たとえば、次のjQueryプラグイン(jquery.my-plugin.js)があるとします。

require(['jquery'], function($) {
    $.fn.myPlugin = function(options) {
        ...
    };
});

別のモジュールで次のように言うと:

require(['jquery', 'jquery.my-plugin'], function($) {
    $('#element').myPlugin();
});

MyPluginが登録されていないため、これが機能しないことがわかりました。ただし、jquery.my-pluginモジュール内でrequireをdefineに変更すると、正常に機能します。

誰かが私がこれをしなければならない理由を明確にできれば、私はそれを感謝します。先に進んで使用する前に、何かを完全に理解するのが好きです。ありがとう

54
nfplee

基本的に、requireを使用すると、「これが欲しいが、その依存関係もすべて欲しい」と言っていることになります。したがって、以下の例ではAが必要ですが、requireはすべての依存関係を検索し、続行する前にそれらがロードされていることを確認します。

require(['a'], function(a) {
    // b, c, d, e will be loaded
});

// File A
define(['b','c','d','e'], function() {
    return this;
});

一般的な経験則として、アプリケーションで再利用されるモジュールを定義するときにdefineを使用し、requireを使用して単純に依存関係をロードします。

94
Paul Osborne

以下はjquery.my-plugin.js which definesにあるはずのコードです.

define(['jquery'], function($) { //jquery is a dependency to the jquery.my-plugin module
    $.fn.myPlugin = function(options) { //adds a function to the *global* jQuery object, $ (global since jQuery does not follow AMD)
        ...
    };
});

以下は、プラグイン関数をグローバルjQueryオブジェクトにアタッチして使用するコードのセクションです...

require(['jquery.my-plugin'], function() { // jquery.my-plugin is loaded which attaches the plugin to the global JQuery object as shown above, then this function fires

    //the only reason $ is visible here is because it's global. If it was a module, you would need to include it as a dependency in the above require statement
    $('#element').myPlugin(); //the $ refers to the global object that has the plugin attached
});
2
Niko Bellic