Question

i want to load an array of page-specific external .js files. in the past, i did it through PHP at the top of each page, like so:

<?php
  $jsFiles = array("file01.js", "file02.js", ...);
  include("header.php");
?>

the header.php file loaded the files like so:

foreach ($jsFiles as $file) {
  echo "<script type='text/javascript' src='_js/$file'></script> \n";
}

but now i need to do this all in JS because i have to load these files AFTER domready which is checked and fired in the header.php file…

this is the idea of what i want and i KNOW IT IS NOT CORRECT CODE, so rein in the comments! it is a conceptual construct.

for (file in jsFiles) {
  console.log('loading ' + file);
  Asset.javascript(file);
};

and, yup, i read this and this; close, but not quite.

questions i have are:

1) how to create the arrays on a per-page basis

2) how to load that array properly using the Asset class

thanks.

WR!

Answer 1

how you create the arrays is up to you. you can define an array with an array literal like so:

var filesToLoad = ["foo.js", "bar.js"];
// or even from a flat string...
var files = "foo.js,bar.js",
    filesToLoad = foo.split(",");

you can also setup a global js structure based upon something that identifies what page you are on, eg:

var pageAssets = {};
pageAssets["*"] = ["common.js"];
pageAssets["home"] = ["foo.js","bar.js"];
pageAssets["about"] = ["foo.js","bar.js","about.js"];

// in domready determine what to load...
var id = document.id("body").get("id");

// see down for explanation...
Asset.javascripts(pageAssets[id], {
    onComplete: function() {
        alert("all js loaded");
    }
});

if the order of loading then does not matter, you can use plain Asset.javascript as described:

filesToLoad.each(function(file) {
    new Asset.javascript(file);
});

the downside to all that is that this is async lazyloading. meaning that if you run a line immediately underneath that instantiates something based upon what you think you loaded, it will likely fail unless you’re on a lan with primed cache.

I have extended Asset.js to support this:

Asset.javascripts = function(sources, options) {
    // load an array of js dependencies and fire events as it walks through
    options = Object.merge({
        onComplete: Function.from,
        onProgress: Function.from
    }, options);
    var counter = 0, todo = sources.length;

    var loadNext = function() {
        if (sources[0])
            source = sources[0];

        Asset.javascript(source, {
            onload: function() {
                counter++;
                options.onProgress.call(this, counter, source);
                sources.erase(source);

                if (counter == todo)
                    options.onComplete.call(this, counter);
                else
                    loadNext();
            }
        });
    };

    loadNext();
};

you just pass on the array as the sources argument and can set an onComplete and onProgress events. this also ensures FIFO from the array so if your dependency order matters, this will be fine.

the example i wrote / orig blog post is here: http://fragged.org/lazyloading-multiple-sequential-javascript-dependencies-in-mootools_1389.html

you should also read up about Require.js / AMD to make things more resilient from a dependency standpoint.

have fun.