Question

I am working on a widget/gadget based website, as in the user can choose which widgets/gadgets s/he wants on the screen.

This means that I will have hundreds/thousands of js files, 1 per widget/gadget. I thought that I could use $.getScript to load the correct js file as and when needed based on user selection.

The problem I have discovered is that $.getScript can only be sent variables via javascript global variables. Global variables and $.getScript don’t play too well together it seems.

Is there another way of doing this? i.e. somehow only load js files as and when needed based on user selection where the loaded js file can receive variables from the js file which calls the sub js file?

Answer 1

The solution for this problem is to use a module loader system like require.js.

It will automatically know which files to load, based on each files named dependencies.

Your modules will clearly outline their depenedncies like this:

require(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

Once they’ve done that the require.js loader will load up the correct JS files automatically for you. It’s bit of a different syntax, but it will solve the problem.