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?

Peter O. · Accepted Answer · 2011-10-23 15:53:08Z

47

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.

edited Oct 23, 2011 at 15:53

Peter O.

33.1k14 gold badges86 silver badges97 bronze badges

answered Feb 7, 2011 at 18:12

jrburke

6,7661 gold badge34 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

maxedison Over a year ago

Thanks for your response--it helps a lot. define() vs. require() was something I needed clarification on, and your other two bullet points really help a lot. I think the first of the bullet points is something I still need to understand better--how to correctly handle the asynchronous nature of RequireJS.

Malkov · Accepted Answer · 2012-11-15 08:30:05Z

22

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

answered Nov 15, 2012 at 8:30

Malkov

6801 gold badge6 silver badges8 bronze badges

2 Comments

Gwyn Howell Over a year ago

top link - having read numerous tutorials, that is by far the best. clear and concise. +1

JJJ Over a year ago

The link may theoretically answer the question, but it would be preferable to include the essential parts of the answer here, and provide the link for reference.

Collectives™ on Stack Overflow

Understanding when and how to use Require.JS

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related