How to split JavaScript code into multiple files and use them without including them via script tag in HTML?

Question

I am making use of constructors (classes) extensively and would like each constructor to be in a separate file (something like Java). Suppose I have constructors say Class1, Class2, ... Class10 and I only want to use Class1 and Class5 I need to use script tags to include Class1.js and Class2.js into the HTML page. Later if I also need to use Class3 and Class6 I again need to go to the HTML page and add script tags for them. Maintenance with this approach is too poor.

Is there something in JavaScript similar to include directive of C? If not, is there a way to emulate this behavior?

Answer 1

You can use jQuery.getScript:

http://api.jquery.com/jQuery.getScript

Or any of the many javascript loaders like YUI, JSLoader, etc. See comparison here:

https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ

Answer 2

You can use something like this:

jsimport = function(url) {
    var _head = document.getElementsByTagName("head")[0];         
    var _script = document.createElement('script');
    _script.type = 'text/javascript';
    _script.src = url;
    _head.appendChild(_script);
}

then use it in your code like:

jsimport("example.class.js");

Be careful to use this when the head is already in the DOM, else it won't work.