Tag Archives: javascript dependancies

Adventures in Javascript dependancy loading

One of my most personally successful philosophy’s in dealing with Web browsers is never blindly trust them.

My initial solution to loading in dependencies depended on a switchboard style approach, if browser support onready or similar events then bind an anonymous function to make the appropriate notice.  Else spin up a interval based checker anonymous function that looked every few seconds for the script for about a minute.    This solution kind of worked, but not reliably because it depended on browser detection vs. capabilities detection.

Instead of reworking things to attempt to ferret out what capabilities a foreign browser supports, I went with a brute force approach that will eventually be a foundation for a much more advanced system.

So the prototype works like such.

wm.loader.load(“someModule”) which becomes the path “/mods/someModule.js” and that is applied to a new script tag as it’s src attribute.  This is then appended to the head tag.  All pretty standard stuff actually.  What’s different is the notification process.

someModule.js contains a simple line “wm.loader.notify(“someModule”) ” which hits an internal dictionary and if this is the first notification, fire’s of a notice to the server.

Simple and guaranteed to work reliably.   Plus it gives me room to grow for later.

Like adding a call like “wm.loader.multi(“lib1″,”lib2″,”lib3”, 10,  function(){   doSomethingWhen Dependancies met });

arguments[0-2] can be detected and pushed to a callstack array, any integer can be assumed to be a time out period, and the last argument as an anonymous function can be assumed to be a onSuccess callback.   A dependency failure mechanism could be incorporated into the actual loader lib as either an observable emitter or just a cry for help back to the service.

More involved:

wm.loader.multi( ){
 
          var dependancies = [],  timeOut = -1,  callBack = None;
 
          loop through arguments:
                    if( current instanceof string ){
                           append to dependancies
                    } 
                    else if( current instanceof integer){
                             append to timeOut
                    } 
                    else if( current instanceof function ){
                                assign to callBack
                     }
 
              var dependancyCheck = function(loadedLib){
                                          pop loadLib from dependancies;
                                         if dependancies.length <= 0 then
                                                     cancel timeOut 
                                                     call  callback;
                                 }
             dependancies.map( wm.loader.load, dependancyCheck );
}

I would be lying if I said I knew this construct would work perfectly once I implement it, but I think the general idea is something to work with.