RequireJs - Define vs Require

Question

對於模塊，我不返回我一直使用require而不是define的對象。例如說，我有以下的jQuery插件（jquery.my-plugin.js）：

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

現在如果我說在另一個模塊如下：

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

我發現這並未」不工作，因爲myPlugin尚未註冊。但是，如果我在我的jquery.my插件模塊中將需求改爲定義，那麼它工作正常。

我很感激，如果有人可以清除爲什麼我必須這樣做。在繼續使用之前，我想充分理解一些內容。謝謝

Answer 1

本質上，當你使用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簡單地加載的依賴。

Answer 2

下面是代碼，應該是內部jquery.my-plugin.js其中定義稱爲可在別處使用作爲依賴「jquery.my-插件」的模塊。

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 
});