The self executing module pattern. For example we have something like this (edited for brevity):

var Journal = (function() {

    // Private variables and methods go here
    return {
        init: function() {
            // Setup some stuff
        },
        myFancyPublicMethod: function() {
            // Does something too awesome to describe
        }
    };
})();

This is the basic module pattern—an anonymous function assigned to a variable, returning an object that contains our public facing properties and methods (the parens at the end execute the function as soon as it is loaded, returning an object that contains the public properties and methods). Then all we have to do in our view is call:

Journal.init();

Calling private methods from the public interface is straightforward. The private method is inherited from the parent scope so all we need to do is call it like any other function. However, doing the reverse (calling a public method from a private method) presents some problems. Say we have the following private method:

// Here is a private method
var privateMethod = function() {
    // Do stuff then make a call to the public method
    myFancyPublicMethod();
};

This won’t work. First of all it doesn’t know where to find myFancyPublicMethod. One solution is to use the variable we assigned the function to, like this:Journal.myFancyPublicMethod();. But that seems messy and the internals of this plugin shouldn’t care about variables outside of its scope. Ideally we would be able to take advantage of the this keyword. So next we tried this in the init method:

// Modified init() function
init: function() {
    var self = this;
}

Then called myFancyPublicMethod like this:

// Here is a private method
var privateMethod = function() {
    // Do stuff then make a call to the public method
    self.myFancyPublicMethod();
};

That didn’t work either. And this is where things started to get weird. When inspecting self within the private method at this point, the global object (or window) was returned. So I thought that by initializing self in the returned object the scope was actually window (unexpectedly). That self shouldn’t even be available to the private method because it is being defined after the privateMethod definition. So what is going on? After a quick debugging session I realized that self was already being defined as what appeared to be a global variable. After a little more digging, we found that self is actually a method on window…and it happens to return the window object.

In order to make the returned object available to the private methods we needed to initialize self at the start of the anonymous function (in the private scope) and then set its value within the init() closure, thus making it available for use in the private and public scopes.

The final code looks something like this:

var Journal = (function() {
    // Initialize 'self' here for proper scope
    var self;

    // Here is a private method
    var privateMethod = function() {
        // Do stuff then make a call to the public method
        self.myFancyPublicMethod();
    };

    // The public facing methods and properties
    return {
        init: function() {
            self = this;
        },
        myFancyPublicMethod: function() {
            // Does something too awesome to describe
        }
    };
})();

Now the original window.self remains intact, and only the plugin is aware of its own self.

The JavaScript Module Pattern

Leave a Reply

Your email address will not be published. Required fields are marked *