I’ve been working on a little JavaScript library, which I’m calling jsBASE. It provides two independent pieces of functionality. First, it loads a queue of scripts asynchronously to prevent blocking. And second, it acts as a runner – executing functionality based on a manifest. jsBASE is independent of any other libraries (though it has taken some code – with attribution, of course – from the jQuery library). In all the examples here, it is used along side jQuery. It has not been thoroughly tested in the wild, but it works in IE6+, Firefox 3+, Safari 4+, and Chrome. I’ve made it available on GitHub.
Anyone who is concerned with performance in their web applications knows that they should put their scripts at the bottom because scripts block parallel downloads for most users. Another way to mitigate the page rendering slow-downs caused by scripts blocking is to load them asynchronously in the background while the page and its assets such as images, style sheets, and so forth are downloaded as normal.
If you’re familiar with Google Analytics’ new asynchronous tracking snippet, the concept should be clear: you create a script element using JavaScript and when it’s loaded append it to the <head>. This is exactly how jsBASE works.
jsBASE provides two methods for loading scripts asynchronously. First, it provides a public array within its namespace: jsBASE.queue. This is initialized as an empty array in the library itself, but it’s public so the developer simply overwrites it with his own array. So, after including the jsBASE.js script (preferably minified), the developer can simply define the queue array and list all their scripts like they normally would with script tags:
jsBASE.queue = [
'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js',
'js/jquery.plugin.js'
];
In addition to this, a developer can use the public jsBASE.enqueue() method to add files to the queue or – if the queue has already been loaded – simply load the script immediately.
jsBASE.enqueue('js/demo.js');
Bear in mind, none of the functionality of jsBASE occurs until you call the jsBASE.go() method.
The other feature of jsBASE is a code runner. What this entails, is the developer is able to declare as many “snippet” functions as she likes. These might be the sorts of things you’d declare on DOM ready or as initialization functions in your modules. jsBASE provides a public object for storing these snippets: jsBASE.snippets. So, to add functions to the snippets object:
jsBASE.snippets.demo = function() {
$('h1').demoPlugin();
};
jsBASE.snippets.test = function() {
$('p').css('line-height', '2em');
};
As you can see, I’ve created two functions in the jsBASE.snippets object. There is no limit to the number of functions you can store in the jsBASE.snippets object and they do nothing on their own – until the manifest is created.
The manifest is an array attached to the jsBASE object that lists the snippets you want to execute at run-time for a particular page. How you construct the manifest is entirely up to you. You could have a manifest for each section of the site, you could have a manifest for each page, and so on. The jsBASE library imposes no structure in this regard. If you want to run some functions via the manifest, you just have to tell it which functions to run. So, if I wanted to run the two snippets I just defined:
jsBASE.manifest = ['demo', 'test'];
With that, once the DOM is ready and the queue of scripts is loaded, jsBASE will loop through its snippets and run each one that it finds in the manifest.
It could be even simpler, though. jsBASE includes a global “snippet” that is not included in the jsBASE.snippets object at all. Simply define a function like so:
jsBASE.global = function() {
$('body').css({
'font-family': 'Arial, sans-serif',
'color' : '#666666'
});
};
And it will be run once the DOM is ready and the queue of scripts is loaded – but before any snippets are run. For small sites with little JavaScript going on, it probably makes sense to just use the jsBASE.global function to initialize functionality without worrying about the manifest (an empty or missing manifest will simply be ignored).
Finally, once you’ve set up your queue, functions, and so forth, it’s time to run them. All that’s required is calling the jsBASE.go() method. This triggers the following actions:
jsBASE.global and snippets based on the manifest once the queue has been traversed and the DOM is ready.It’s pretty simple, but it provides a nice foundation for a variety of JavaScript applications.
As I said, this little library is a work in progress. I will maintain this journal entry as it changes, but for now, feel free to check out the code on GitHub.