Question

My basic setup is a whole heap of Javascript under an anonymous self-invoking function:

(function () {
    ...
})();

My problem is that I can’t seem to get access to the objects within this ASI function via the DOM tab. I tried both the following:

var MYAPP = function () {
    ...
};

var MYAPP = (function () {
    ...
})();

The first didn’t fire at all. The second just said MYAPP is undefined in the DOM tab.

Is there a way around this?

Answer 1

In your first version, you are simply creating a function with the name MYAPP, but you are not executing it.

In the second version, your function is executed and its result is assigned to MYAPP. But your function does not seem to return anything, so MYAPP stays undefined.

See A Javascript Module Pattern on YUIBlog for an explanation of this pattern. Their example goes like this:

YAHOO.myProject.myModule = function () {

    return  {
        myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty.",
        myPublicMethod: function () {
            YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
        }
    };

}(); // the parens here cause the anonymous function to execute and return

So your function basically returns an object containing all the public members. You can then access these with Firebug, too.