Javascript dynamic loading

    Good day to the whole habrasociety! Recently, I had to develop a huge web project (more precisely, to complete it), 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, then this is a new js-file that should be loaded to the user (although perhaps this functionality may not even be necessary for him). The recently read article " Dynamic Javascript module loading " made it clear to me that js can be loaded dynamically, so I started looking for a solution method.

    And here is what solution I found. Since I had no time to rewrite the project, I had no desire, I could only find a quick way how to quickly load js files on demand. On the Internet, I accidentally stumbled upon a library such as JSAN (JavaScript Archive Network, do not confuse it with JSON). The developers of this library are trying to make a CPAN analogue only for JavaScript.

    Here is the link to the source .
    Everything is beautifully described there, but I will explain the most basic. JSAN provides facilities for dynamically loading code using XMLHttpRequest to the server. The library is contained in one js-file, which you need to connect to the page. Further it is easier. For example:

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


    The following call to JSAN.require will try to load js / creating.js, trying to search all sources specified in the JSAN for include_path, which is ['.', 'Lib'] by default. And that’s all!

    The only requirement is that all modules be 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 attribute this rather to plus rather than minus, because it forces the developer to isolate their libraries from the outside world, thereby reducing the problem of name conflict to almost zero. By the way, in addition to JSAN.require, there is also the JSAN.use method, which allows you to export only the necessary functionality from the module, which I just needed. The first thing I had to do was transform the look of the old functions with

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


    in

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


    since the only way functions were loaded. Then I just added a simple replacement in the templates. For example, there is the itemsCreating function in the js / creating.js file. By clicking on an object on the page, it should be executed. To do 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 unnecessary code (and traffic for users), and the necessary js-files were called only when their functionality was required. By the way, if (typeof itemsCreating! = 'Function') makes it so that you don’t need to load this js file again, because the itemsCreating function will already be defined (until the page is reloaded;). Well, that's all.

    PS My first article on Habré, therefore criticism is not a little important.

    Also popular now: