Auto-load/include for JavaScript

Question

I have file called common.js and it's included in each page of my site using <script />.

It will grow fast as my sites functionality will grow (I hope; I imagine). :)

Lets example I have a jQuery event:

$('#that').click(function() {

    one_of_many_functions($(this));

}

For the moment, I have that one_of_many_functions() in common.js.

Is it somehow possible that JavaScript automatically loads file one_of_many_functions.js when such function is called, but it doesn't exist? Like auto-loader. :)

The second option I see is to do something like:

$('#that').click(function() {

    include('one_of_many_functions');

    one_of_many_functions($(this));

}

That not so automatically, but still - includes wanted file.

Is any of this possible? Thanks in an advice! :)

Answer 1

It is not possible to directly auto-load external javascripts on demand. It is, however, possible to implement a dynamic inclusion mechanism similar to the second route you mentioned.

There are some challenges though. When you "include" a new external script, you aren't going to be able to immediately use the included functionality, you'll have to wait until the script loads. This means that you'll have to fragment your code somewhat, which means that you'll have to make some decisions about what should just be included in the core vs. what can be included on demand.

You'll need to set up a central object that keeps track of which assets are already loaded. Here's a quick mockup of that:

var assets = {
    assets: {},
    include: function (asset_name, callback) {
        if (typeof callback != 'function')
            callback = function () { return false; };

        if (typeof this.assets[asset_name] != 'undefined' )
            return callback();


        var html_doc = document.getElementsByTagName('head')[0];
        var st = document.createElement('script');
        st.setAttribute('language', 'javascript');
        st.setAttribute('type', 'text/javascript');
        st.setAttribute('src', asset_name);
        st.onload = function () { assets._script_loaded(asset_name, callback); };
        html_doc.appendChild(st);
    },
    _script_loaded: function (asset_name, callback) {
        this.assets[asset_name] = true;
        callback();
    }
};

assets.inlude('myfile.js', function () {
    /* do stuff that depends on myfile.js */
});