The new script loader object – part III

In the previous posts, we’ve met the new script component loader. As we’ve seen in the latest post, the new script loader object can helps us:

  • improve the performance of our applications by allowing parallel downloads of several script files (which need to be slightly changed to work properly with it). This is possible due to the introduction of the concept of execution dependency;
  • ensure proper initialization of those script files since it takes execution dependencies and dependencies into account before running a callback wrapper method which is responsible for initializing the library.

These features are cool and will help anyone doing web development. But the object goes a little bit further: it can also automatically download the required files for you… but only if you ask it, of course :,,)

As you’ve probably noticed, you’re supposed to define the debugUrl and releaseUrl properties on all script info objects used for defining a specific script. These two properties indicate the path to the release and debug script files (notice that you don’t really need to have two files, though that is highly recommended because you’ll typically need to read the code in debug mode and you’ll want it minified for release mode).

Since the script loader object has access to this info, it can easily download the files as needed when you ask him to do that. Let’s go back to our previous example and update its HTML so that we let the script loader object fetch the scripts as needed:

<head>
    <title></title>
    <script src="Scripts/MicrosoftAjax/start.debug.js" type="text/javascript"></script>
    <script type="text/javascript">
        Sys.loader.defineScripts( null, [
                                    {
                                      releaseUrl: ''a.js'',
                                      debugUrl: ''a.js'',
                                      name: ''A''
                                    },
                                    {
                                      releaseUrl: ''B.JS'',
                                      debugUrl: ''B.JS'',
                                      name: ''B'',
                                      executionDependencies:[''A'']
                                    }] );
    </script>
</head>
<body>
    <input type="button" value="invoke B" id="bt" />
</body>
<script type="text/javascript">
    Sys.onReady(function() {
        function loadAndCallB() {
            Sys.require(
                [Sys.scripts.B], //feature needed
                function() { B(); } //callback method
                );
        }
        var bt = document.getElementById("bt");
        if (bt.attachEvent) {
            bt.attachEvent("onclick", loadAndCallB);
        }
        else {
            bt.addEventListener("click", loadAndCallB, false);
        }
    });
</script>

As you can see, we removed the script nodes that forced the loading of the JavaScript files. We’re doing the clicking hook up from the Sys.onReady event. This is new and lets you interact with the DOM when it’s ready for it. Notice that in this case we don’t event load the core MS AJAX lib and rely on using some “old tricks” for setting up bt’s click handler. The most interesting thing happens within the loadAndCallB method:

Sys.require(
    [Sys.scripts.B], //feature needed
    function() { B(); } //callback method
    );

We’re using the require method to force the download of the script registered with the name B.  If you try it yourself, you’ll see that you have intellisense (notice the script on the header which defines scripts A and B!). The script object is really smart and will do all the work for you: it will get both scripts (since they’re using execution dependencies, it doesn’t really matter which one arrives first) and then it will call the method you’ve passed to the Sys.require method (btw, the callback method is needed because script download and parsing is done asynchronously).

The require method lets you pass an additional parameter for passing a specific context to the callback method.

If you want, you can specify several features in the array you passed to Sys.require method. And notice that you can also mix script references with other features. For instance, the following call would force the download of all files necessary for running script B and for using the DataView component:

Sys.require(
    [Sys.scripts.B, Sys.components.dataView], //feature needed
    function() { B(); } //callback method
);

And don’t thing we’re finished! This is just one of the ways you can force the Sys.loader to load the necessary JS files. In the next post, we’ll see an alternative way of forcing the download of scripts. Stay tuned for more.

Advertisements

~ by Luis Abreu on October 16, 2009.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: