Home > javascript, Programming > Javascript OOP design pattern

Javascript OOP design pattern

I’ve been using the following programming pattern whenever I need to write some client-side javascript:

( function() {
    if(!window.Foo) window.Foo={};
    function some_priv_func() {
        // define a private function (not accessible from
        // outside of the enclosure)
        alert('this is a private function');
    }
    function some_pub_func() {
        // calling some_priv_func()
        some_private_func();
    }
    window.Foo.some_pub_func=some_pub_func;
} )();

In the above example I create a Foo object and expose one function some_pub_func, which can be invoked by calling Foo.some_pub_func(). Enclosure is used to avoid name-space conflicts. It’s worth noting that the some_priv_func can not be accessed from outside of the enclosure.

I recently discovered a better way to program the OOP way in Jtavascript through Hands-on Node.js (page 100) and I would like to share with you this technique. Let’s look at code:

( function() {
    if(!window.Foo2) {
        window.Foo2=function(options) {
            // to avoid getting confused when using
            // 'this' in member functions
            var self=this;
            self.options=options;
            function some_priv_func() {
                // define a private function (not accessible from
                // outside of the enclosure)
                alert('this is a private function');
            }
            self.some_pub_func=function() {
                // calling some_priv_func()
                some_priv_func();
            }
        };
        window.Foo2.create=function(options) {
            return new Foo2(options);
        }
    }
} )();

Foo2.create() is made so one can initialise a Foo2 instance without using the “new” keyword. You can use Foo2 in ways like the following:

var f2=new Foo2( { name: 'the new guy' } ); // as if Foo2.create doesn't exist

or

var f2=Foo2.create( { name: 'the new guy' } );

For demonstration purpose I also expose the member options to the public allowing it be accessed and changed. A better way to handle this is to use the jQuery extend function. (Assuming jQuery is being used)

            ...
            var self=this;
            var defaults={
                name: 'no name'
            };
            // merge settings in options to defaults
            $.extend(defaults, options);
            function some_priv_func() {
            ...

So if one initialises Foo2 without any options ( var f2=Foo2.create() ), defaults will have its default value {name: ‘no name’}. Or it can be overwritten by providing a parameter.
The benefit of this is the exposing of member options (using defaults instead, which is not accessible outside of Foo2) is avoided.

Advertisements
Categories: javascript, Programming
  1. No comments yet.
  1. No trackbacks 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: