Loading javascript files as and when needed

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.

Answer 2

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.

Scripts loaded via $.getScript can access globals just fine. (Not that global variables are a good idea.)

But another way to pass information to your loaded script would be for each script to implement a post-load callback based on the script name, and for your loader code to call that callback (with the arguments you want to pass to it) once $.getScript does its thing.

Live Example | Source

Of course, that example uses globals too — $ for jQuery, and the new script's theNewScript load complete function is a global. In a production system, to do this, I'd have just one global for my entire app (say, MyApp), define all of my code within a scoping function to avoid creating any other globals at all, and have the new script set its "load complete" function as a property on that. (Normally I don't define any globals at all, because I don't normally demand-load scripts.)

Answer 3

try to call your scripts using pure javascript

        var html_doc = document.getElementsByTagName('head')[0];
        js = document.createElement('script');
        js.setAttribute('type', 'text/javascript');
        js.setAttribute('src', '../scripts/jquery-1.7.2.min.js');
        html_doc.appendChild(js);
        js.onreadystatechange = function () {
            if (js.readyState == 'loaded' || js.readyState == 'complete') {
                doSomething
            }
        }

        //works on ff e no chrome
        js.onload = function () { doSomething }