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! :)

It sounds like you'd really enjoy RequireJS

Jim Schubert
– Jim Schubert

2011-10-10 17:16:59 +00:00
Commented Oct 10, 2011 at 17:16 — Jim Schubert
– Jim Schubert, Commented Oct 10, 2011 at 17:16

Chris Baker · Accepted Answer · 2011-10-10 17:28:37Z

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 */
});

Daniel Szabo · Accepted Answer · 2011-10-10 17:30:43Z

Sure it's possible -- but this can become painful to manage. In order to implement something like this, you're going to have to maintain an index of functions and their corresponding source file. As your project grows, this can be troublesome for a few reasons -- the 2 that stick out in my mind are:

A) You have the added responsibility of maintaining your index object/lookup mechanism so that your scripts know where to look when the function you're calling cannot be found.

B) This is one more thing that can go wrong when debugging your growing project.

I'm sure that someone else will mention this by the time I'm finished writing this, but your time would probably be better spent figuring out how to combine all of your code into a single .js file. The benefits to doing so are well-documented.

Thiago Mata · Accepted Answer · 2014-08-01 12:07:46Z

I have created something close to that a year ago. In fact, I have found this thread by search if that is something new on the field. You can see what I have created here: https://github.com/thiagomata/CanvasBox/blob/master/src/main/New.js

My project are, almost 100% OOP. So, I used this fact to focus my solution. I create this "Class" with the name "New" what is used to, first load and after instance the objects.

Here a example of someone using it:

 var objSquare = New.Square(); // Square is loaded and after that instance is created
     objSquare.x = objBox.width / 2;
     objSquare.y = objBox.height / 2;

 var objSomeExample = New.Stuff("some parameters can be sent too");

In this version I am not using some json with all js file position. The mapping is hardcore as you can see here:

New.prototype.arrMap = {
    CanvasBox: "" + window.MAIN_PATH + "CanvasBox",
    CanvasBoxBehavior: "" + window.MAIN_PATH + "CanvasBoxBehavior",
    CanvasBoxButton: "" + window.MAIN_PATH + "CanvasBoxButton",
    // (...)
};

But make this more automatic, using gulp or grunt is something what I am thinking to do, and it is not that hard.

This solution was created to be used into the project. So, the code may need some changes to be able to be used into any project. But may be a start.

Hope this helps.

As I said before, this still is a working progress. But I have created a more independent module what use gulp to keep it updated.

All the magic que be found in this links: https://github.com/thiagomata/CanvasBox/blob/master/src/coffee/main/Instance.coffee
https://github.com/thiagomata/CanvasBox/blob/master/src/node/scripts.js https://github.com/thiagomata/CanvasBox/blob/master/gulpfile.js

A special look should be in this lines of the Instance.coffee

###
# Create an instance of the object passing the argument
###
instaceObject = (->
  ClassElement = (args) ->
    window[args["0"]].apply this, args["1"]
  ->
    ClassElement:: = (window[arguments["0"]])::
    objElement = new ClassElement(arguments)
    return objElement
)()

This lines allows me to initialize a instance of some object after load its file. As is used in the create method:

create:()->
  @load()
  return instaceObject(@packageName, arguments)

Collectives™ on Stack Overflow

Auto-load/include for JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related