RequireJs - Define vs Require

Question

For modules I don't return an object I have been using require instead of define. For example say I have the following jQuery plugin (jquery.my-plugin.js):

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

Now if I say the following in another module:

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

I've found this doesn't work because myPlugin has not been registered. However if I change the require to a define within my jquery.my-plugin module then it works fine.

I'd appreciate it if someone could clear up why I have to do this. I like to understand something fully before I go ahead and use it. Thanks

Answer 1

Essentially, when you use require you are saying "i want this, but i want all its dependencies too". So in the example below, we're requiring A, but require will search for all dependencies and ensure they are loaded before continuing.

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

General rule of thumb is you use define when you want to define a module that will be reused by your application and you use require to simply load a dependency.

Answer 2

Below is the code that should be inside jquery.my-plugin.js which defines a module called 'jquery.my-plugin' that can be used as a dependency elsewhere.

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

Below is a section of code where you want to attach your plugin function to the global jQuery object and then use it ...

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