Understanding when and how to use Require.JS

Question

I've just begun to work with Require.JS and I'm a bit unclear on the appropriate cases in which it should be used, as well as the correct way to use it in those cases.

Here's how I currently have things set up with Require.JS. I have two functions, functionA() and functionB(). Both of these functions require an additional function, functionC() to work properly.

I only want to load functionC() when necessary, i.e. when functionA() or functionB() is going to be called. So I have the following files:

functionC.js

functionC(){   //do stuff } 

functionA.js

functionA(){     define(['functionC'],function(){     //functionC() is loaded because it is listed as a dependency, so we can proceed     //do some functionA() stuff   }); } 

functionB.js

functionB(){     define(['functionC'],function(){     //functionC() is loaded because it is listed as a dependency, so we can proceed     //do some functionB() stuff   }); } 

So, is this set up correctly? And if I end up calling both functionA() and functionB() on the same page, is extra work being done since they both load the functionC.js file? If so, is that a problem? And if so, is there a way to set it up so that they first check to see if functionC.js has been loaded yet, and only load it if it hasn't been? Finally, is this an appropriate use of Require.JS?

Answer 1

define() should only be used to define a module. For the above example, where a piece of code should be dynamically loaded, using require() is more appropriate:

functionA.js

functionA(){   require(['functionC'],function(functionC){     //use funcC in here to call functionC   }); } 

Some notes:

• require([]) is asynchronous, so if the caller of functionA is expecting a return value from that function, there will likely be errors. It is best if functionA accepts a callback that is called when functionA is done with its work.
• The above code will call require() for every call to functionA; however, after the first call, there is no penalty taken to load functionC.js, it is only loaded once. The first time require() gets called, it will load functionC.js, but the rest of the time, RequireJS knows it is already loaded, so it will call the function(functionC){} function without requesting functionC.js again.

Answer 2

You can find details about RequireJS and JavaScript modularity here: JavaScript modularity with RequireJS (from spaghetti code to ravioli code)