モジュールの場合、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に変更すると、正常に機能します。
誰かが私がこれをしなければならない理由を明確にできれば、私はそれを感謝します。先に進んで使用する前に、何かを完全に理解するのが好きです。ありがとう
基本的に、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
を使用して単純に依存関係をロードします。
以下は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
});