YUI 3 Preview Release 2 - Get Utility

Yahoo's User Interface Get Utility is one of my favorites. I use this constantly to load secondary scripts on the page, or when some event requires additional scripts. For example, while putting together a RIA with dialogs, you may not need the "container" library to load when the page loads, you may want to delay this till the user actually performs and action the requires the container to show.

// Code in main page
 

(function(){
    var $Y = YUI();
    ele.on('click', function(){
        $getScripts = $Y.Get.script('/js/myDialog.js', {
            onSuccess: function(){
             // I ran myDialog.js .. assume here that it render()s the dialog
             dialog.show();
             // Do other things
        }});
    }

})();

This is much unchanged from YUI 2.6, and if your upgrading from 2.6 you would find this an easy "fix" to port to YUI 3. Most likely you will also have your own alias variable and namespace you can integrate this into.

In the above code we are using $Y.Get.script to get a single script and load it. Usually with these files I will use the (function(){ ... })(); convention. This makes it a little more clear what the code will do. If I have created namespaces, I will give each file it's own namespace and use it throughout the file.

This does a couple things. If used on page load, the scripts will be retrieved in a non-blocking manner. In other words, your images and CSS will not be in contention with the loading of these scripts. You will also be able to delay the loading of some scripts until they are actually needed.

Some practical applications you could use this for possibly is loading the validation logic on form submit, loading dialogs, calendars, and any of the heavier widgets that are not visible on first load. 

Up Next :  IO