Back to menu

$.includify

Preamble

Dynamic source inclusion is pretty important for just about every language in the world, except, apparently JavaScript. jQuery gives you $.getScript but it has no protection on duplicate includes, and due to JavaScript's AJAX asynchronicity, defining dependencies is a bit painful and looks something like this:

// assume s3 depends on s2 depends on s1
$.getScript('s1.js', function() {
  $.getScript('s2.js', function() {
    $.getScript('s3.js');
  });
});

The alternative, to call them sequentially:

$.getScript('s1.js');
$.getScript('s2.js');
$.getScript('s3.js');

is a race condition: it cannot be relied on that s1.js will always load before s3.js.

So, includify create a wrapper around $.getScript which ensures asynchronicity-safety and remembers what it's already included so as not to duplicate anything.

Basic Usage

Usage is easy, you just feed it a list which is executed in the order given. An optional callback can be given, too, which is executed only after all files have been successfully included.

$.includify('s1.js', 's2.js', 's3.js', function() {
  // all done! 
});

Download

Download the: full source or minified source

Demo

So obviously, this being an include script, I can't really show you a flashy visual demo. Instead here's a password box which is dynamically bound at runtime to a password strength notifier, which is included by this script. Also there's some other output from two example javascript includes below. Look in the head source!