Javascript dynamic loading

Good day to all habrasoobschestvu! Recently, I fell to develop a huge web project (or rather finish), which was just a lot of Ajax. The problem was that all javascript files were loaded immediately. Tobish, if I wanted to add more functionality - this is a new js-file that should be loaded to the user (although it may not even require this functionality). A recently read article " Dynamic loading of modules on Javascript " made me understand that js can be loaded dynamically, so I began to look for a solution method.

And what a solution found. Since I had no time to rewrite the project, I could only find a quick way to get the js-files on-demand fast loading. On the Internet, I stumbled upon such a library as JSAN (JavaScript Archive Network, not to be confused with JSON). The developers of this library are trying to make an analogue of CPAN only for JavaScript.

Here is a link to the source .
There everything is beautifully described, but I will explain the most basic. JSAN provides tools for dynamically loading code using XMLHttpRequest to the server. The library is contained in a single js-file, which must be connected to the page. Further - easier. For example:

JSAN.require ('js.creating');
var creating = new js.creating ();

')
The following JSAN.require call will try to load js / creating.js, trying to look in all sources specified in the include jsan JSAN, which by default is ['.', 'Lib']. And that's it!

The only requirement is that all modules are inside their namespace, so for the example above, the beginning of s / creating.js will look something like this:

if (js == undefined) var js = {};
if (js.creating == undefined) js.creating = {};

But I would refer it more to a plus than to a minus, because it forces the developer to isolate their libraries from the outside world, thereby reducing the problem of name conflicts to almost zero. By the way, besides JSAN.require, there is also a JSAN.use method that allows you to export only the necessary functionality from the module, which is what I needed. The first thing I had to do was convert the look of the old functions with

function foo (var1, var2) {...
}

at

foo = function (var1, var2) {...
}

since only in this way were the functions loaded. Then I just added a simple replacement in the templates. For example, there is a itemsCreating function in the js / creating.js file. By clicking on the object on the page, it should be executed. For this instead of

onclick = "javascript: itemsCreating (this);

replaced by

onclick = "javascript: if (typeof itemsCreating! = 'function') JSAN.use ('js.creating'); itemsCreating (this);

Now the project got rid of excess code (and traffic for users), and the necessary js-files were called only when their functionality is required. By the way, if (typeof itemsCreating! = 'Function') makes it so that you will not need to load this js-file again, because the itemsCreating function will already be defined (until you reload the page;). Well, that's all.

Threat My first article on Habré, so criticism is not a little important.