JavaScript: caricamento asincrono degli script con funzione di callback

Il caricamento asincrono degli script in JavaScript è una funzionalità abbastanza semplice da implementare. L'aspetto da definire con cura è la funzione da eseguire dopo che gli script sono stati inseriti ed il codice caricato. Vediamo insieme questa soluzione.

Possiamo definire il seguente oggetto di utility:

var Loader = function () {};
Loader.prototype = {
    require: function (scripts, callback) {
        this.loadCount      = 0;
        this.totalRequired  = scripts.length;
        this.callback       = callback;

        for (var i = 0; i < scripts.length; i++) {
            this.writeScript(scripts[i]);
        }
    },
    loaded: function (evt) {
        this.loadCount++;

        if (this.loadCount == this.totalRequired && typeof this.callback == 'function') {
        	 this.callback.call();
        }
    },
    writeScript: function (src) {
        var self = this;
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.async = true;
        s.src = src;
        s.addEventListener('load', function (e) { self.loaded(e); }, false);
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(s);
    }
}

Per prima cosa l'oggetto utilizza un array contenente i percorsi dei file da caricare, quindi tiene il conto degli script caricati utilizzando un contatore interno. Quando il contatore raggiunge il numero di elementi presenti nell'array, viene invocata la funzione di callback.

Esempio:

var loader = new Loader();
loader.require([
    "script-1.js",
    "script-2.js"], 
    function() {
        // Callback
        console.log('Script caricati');
});