Managing a non-trivial amount of JavaScript

Even though I’m still new to JavaScript, I’m using it most of the time now. My initial attempts with copy & pasting code, watching YouTube videos, reading blogs, etc. were not getting me up to speed fast enough. I also came to realize that I had some fundamental misunderstanding about the language. So, I took a break and read Douglas Crockford’s JavaScritpt: The Good Parts. How refreshing!

Now many of the  issues I was having, especially when comparing Perl code with JavaScript, had real answers. And, getting some real answers for differences in style of JavaScript code had some actual answers as well (due to things like the automatic semi-colon insertion).

My biggest discovery of all is the “Method Pattern.” (pp. 40-21). Eric Miraglia explains it very, very well in his blog post. This shows how to avoid Global Variable problems, make code more modular and all that other good stuff. It is *very* verbose (in my opinion). But, it works, I understand it and I can build a site with code structured like this with confidence.

With this new knowledge and the knowledge I already had about page size and performance issues with Rich Internet Applications (RIAs), I developed a way to load code on demand. I first wrote a “Loader” script. Then, I wrote a template to use that would interact with the Loader.

An example. Let’s say I wanted to open an interactive window. This window might require CSS files, JavaScript files, markup and data. And, some of it might already be loaded, but there is no guarantee. So, instead of dealing with this when you want to make the call, just call the Loader script with the action you want and let it take care of it.
Examples:
To open a dialog box:

pxLoader.open("dialog_box");

To close the dialog box:

pxLoader.close("dialog_box");

To make this work, I would need a standard set of commands (init, open, close, etc.)

So, if you want to check it out, here is the actual code. I ran it through JSLint with Recommended Options and Good Parts turned on. Be aware that I’ve only used it a bit and so have not flushed out all the issues that will make this truly robust.

Note: px is just a placeholder name. “plain_jane” would become “dialog_box” or “category_dialog) or whatever feature you were implementing. Oh, and I log. A lot.

// Copyright (c) 2009 Brian Estes - All Rights Reserved

/*global YAHOO */
YAHOO.namespace("px.plain_jane");
YAHOO.px.plain_jane = function () {
    YAHOO.log("Instantiating", "begin", "pxPlainJane");

    var example, setupListeners;

    example = function (o) {
        YAHOO.log("examle", "begin", "pxPlainJane");

        YAHOO.log("example", "end", "pxPlainJane");
    };

    setupListeners = function () {
        YAHOO.log("setupListeners", "begin", "pxPlainJane");
        YAHOO.util.Event.addListener(
            "plain_jane_one",
            "click",
            function () {
                YAHOO.log("clicked plain_jane_update", "info", "pxPlainJane");
            }
          );

        YAHOO.util.Event.addListener(
            "plain_jane_two",
            "click",
            function () {
                YAHOO.log("clicked plain_jane_one", "info", "pxPlainJane");
                YAHOO.px.Loader.open('some_package');
            }
        );
        YAHOO.log("setupListeners", "end", "pxPlainJane");
    };

    return {        // public methods
        init: function (o) {
            YAHOO.log(".init", "begin", "pxPlainJane");
            example(o);
            setupListners();
            YAHOO.log(".init", "end", "pxPlainJane");
        },
        open: function (o) {
            YAHOO.log(".open", "info", "pxPlainJane");
        },
        refresh: function (o) {
            YAHOO.log(".refresh", "info", "pxPlainJane");
        },
        close: function (o) {
            YAHOO.log(".close", "info", "pxPlainJane");
        },
        destroy: function (o) {
            YAHOO.log(".destroy", "info", "pxPlainJane");
        },
        exists: function (o) {
            YAHOO.log(".exists", "info", "pxPlainJane");
        },
        visible: function (o) {
            YAHOO.log(".visible", "info", "pxPlainJane");
        },
        ready: function (o) {
            YAHOO.log(".ready", "info", "pxPlainJane");
        }
    };
}();

YAHOO.util.Event.onDOMReady(function () {
    //YAHOO.px.plain_jane.init();
});

YAHOO.log("Instantiating", "end", "pxPlainJane");
Advertisements

No comments yet

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: