tags:

views:

269

answers:

3

I've been using the YUI Components and want to begin using the Loader Utility to specify my dependencies on my page. From your experience, is the YUI Loader Utility a reliable way to load Javascript dependencies in web pages?

+1  A: 

Generally yes. Nothing should go wrong, and assuredly if it did, yahoo would be on the problem in no time!

William Keller
+5  A: 

Yes, YUI Loader is reliable on all A-grade browsers. For a list of which browsers Yahoo! considers A-grade, check out the Graded Browser Support Chart.

Ryan Grove
A: 

I use the loader a lot. It's a great way to manage dependencies and build you library around.

I've run into 3 problems with it:

  1. Debugging - it's difficult to debug. Is the bug in the module's loader definition or is it in the module (script file)?
  2. You have to add your own 'subscibeOnce' function to add any 'on module(s) loaded' handlers. This unsubscribes your handlers after the module has been loaded/inserted into the page. Otherwise, if you insert more modules later in the page's lifespan - they called each time.
  3. There's a limit to what dependencies it can figure out. Ordering within the requires:[] (in the module definition) seems to matter. I've seen it fail trying to work through this list.

What i use is something like:

var TheBase = function(oConfig){
var thisBase = this;
var EVENTS = {
    ON_SCRIPTS_LOADED : "onScriptsLoaded"
    , ON_SCRIPTS_PROGRESS : "onScriptsProgress"
}
for(var eventName in EVENTS){
    thisBase.createEvent(EVENTS[eventName]);    
}
var _loader = new YAHOO.util.YUILoader({
    base: oConfig.yuiBasePath
    ,onSuccess:function(o){
        thisBase.fireEvent(EVENTS.ON_SCRIPTS_LOADED);
    }
    ,onProgress:function(o){
        thisBase.fireEvent(EVENTS.ON_SCRIPTS_PROGRESS,o.name);
    }
})
//optional
    thisBase.loader = _loader;

}

TheBase.prototype = {
subscribeOnce : function(eventName, fnc, context, args){
    var that = this;
    var handler = function hander(){
        fnc.apply(context, arguments);
        that.unsubscribe(eventName, handler);
    }
    this.subscribe(eventName, handler, args, false);
}

}

//augment with event provider

YAHOO.lang.augment(TheBase, YAHOO.util.EventProvider);
mkraken