Understanding when and how to use Require.JS
JavascriptRequirejsJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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 offunctionA
is expecting a return value from that function, there will likely be errors. It is best iffunctionA
accepts a callback that is called whenfunctionA
is done with its work.- The above code will call
require()
for every call tofunctionA
; however, after the first call, there is no penalty taken to loadfunctionC.js
, it is only loaded once. The first timerequire()
gets called, it will loadfunctionC.js
, but the rest of the time, RequireJS knows it is already loaded, so it will call thefunction(functionC){}
function without requestingfunctionC.js
again.
Solution 2 - Javascript
You can find details about RequireJS and JavaScript modularity here: JavaScript modularity with RequireJS (from spaghetti code to ravioli code)