Relieving the js dependency head ache

If you have tried to build larger applications in JavaScript, you have probably also struggled with maintaining the right order of your <script> tags. It can be quite a pain when the number of files grows to more than a handful.

Well, I’ve had that pain for a while, and I’ve been contemplating building something to leviate the pain.

I didn’t get around to do it, though, and now none other than Dustin Diaz has made $script.js, an asynchronous JavaScript loader and dependency manager.

$script.js is very compact, 95 lines of code (6 of them are comments with license and such), and it is pretty easy to use.

To get started all you need to do is to include the script.js file in the page in the ordinary way. When you need to load further scripts, you do that by calling the $script() function like this:

  $script('my_script.js');

You can furthermore also attach an id to a script or actually attach the id to a bundle of scripts:

  $script(['my_script.js', 'the_plugin.js'], 'plugin');

Doing this enables you to attach event handlers to a ready event that is fired, when the ‘plugin’ bundle is ready:

  $script.ready('plugin', function() {
    // Code that uses the plugin
  });

As a nice side effect by using $script.js is, that page load will be faster because the loading of the script files will be done asynchronously and it doesn’t block loading of the other resources like stylesheets and images.

There is only the small tax of having to wrap code in the $script.ready() function and the event handler. But compared to juggling with remembering the correct order scripts should be loaded that is a small tax to pay.

Comments, suggestions and corrections will be much appreciated!