Javascript dependency solution with arbitrary ordered includes

Question

Hello,

The problem is this, I include a script, it uses another one, but what if that dependency also needs another script to be ready ? Which means loading it is not enough, but I also need to be sure its callback for initialization has been called before executing. The order of script tags in DOM can not be correct if the dependencies are allowed to require more dependencies and manifest them when them after being loaded.

The problems gets more complex when scripts and dependencies require more than one dependency, or a file satisfies more than one component.

Using.js seems to have a good approach for this, but first, the dependency relations should be known before they are being loaded, second the author states that some tests are not working anymore on Firefox. I suspect it is the blocking the execution thing, which seems a bit magical.

I have written a loader to handle this, completely asynchronous, which actually seems to be work. But I can not shake the gut feeling of doing something has been solved before, or can not be that complex.

Answer 1

The order of script tags in DOM can not be correct if the dependencies are allowed to require more dependencies and manifest them after being loaded.

Well, what are these scripts that try to load their own dependencies, exactly? This is not a standard feature of JavaScript, so there is not one answer; how you cope with it is specific to the script that tries to include dependencies.

For synchronously loaded scripts (included via document.write or adding script elements to the DOM at load-time) you can at least be sure that you're good to go onload. For asynchronous loading (deferred scripts, AJAX inclusion, or ready-callbacks fired by timeout) there has to be a callback mechanism. If you are mixing various scripts that have different dependency and ready-callback systems, that's going to be a pain.

I have written a loader to handle this, completely asynchronous, which actually seems to be work. But I can not shake the gut feeling of doing something has been solved before, or can not be that complex.

No, not really. Dependency handling and dynamic script insertion are always going to be a little bit complicated. The only ‘solved’, standard approach is completely static scripts, writing them in dependency order manually.

Answer 2

There are several approaches to solve your problem almost all approaches are in this Javascript Dependency Management presentation.

The one that better solves your problem is using jingo library.

Basically with jingo¹ you can do something like this to declare a module with dependencies:

  jingo.declare({
    require: [
      'hallmart.Greeter'
    ],
    name: 'hallmart.Store',
    as: function() {
      hallmart.Store = function() {
        var greeter = new hallmart.Greeter();
        this.admit = function(customer) {
          greeter.welcome(customer.name);
        };
      };
   }
 });

See code.google.com/p/jingo/wiki/GettingStarted for references.

¹ code.google.com/p/jingo/