What's wrong (or right) with this JS Object Pattern?

Posted by unsane1 on Stack Overflow See other posts from Stack Overflow or by unsane1
Published on 2010-05-01T18:12:50Z Indexed on 2010/05/01 18:17 UTC
Read the original article Hit count: 129

Filed under:
|

Here's an example of the pattern I'm using in my javascript objects these days (this example relies on jQuery). http://pastie.org/private/ryn0m1gnjsxdos9onsyxg

It works for me reasonably well, but I'm guessing there's something wrong, or at least sub-optimal about it, I'm just curious to get people's opinions.

Here's a smaller, inline example of it:

sample = function(attach) {
    // set internal reference to self
    var self = this;

    // public variable(s)
    self.iAmPublic = true;

    // private variable(s)
    var debug = false;
    var host = attach;
    var pane = {
        element: false,
        display: false
    }

    // public function(s)
    self.show = function() {
        if (!pane.display) {
            position();
            $(pane.element).show('fast');
            pane.display = true;
        }
    }

    self.hide = function() {
        if (pane.display) {
            $(pane.element).hide('fast');
            pane.display = false;
        }
    }

    // private function(s)
    function init () {
        // do whatever stuff is needed on instantiation of this object
        // like perhaps positioning a hidden div
        pane.element = document.createElement('div');
        return self;
    }

    function position() {
        var h = {
            'h': $(host).outerHeight(),
            'w': $(host).outerWidth(),
            'pos': $(host).offset()
        };
        var p = {
            'w': $(pane.element).outerWidth()
        };
        $(pane.element).css({
            top: h.pos.top + (h.h-1),
            left: h.pos.left + ((h.w - p.w) / 2)
        });
    }

    function log () {
        if (debug) { console.log(arguments); }
    }

    // on-instantiation let's set ourselves up
    return init();
}

I'm really curious to get people's thoughts on this.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about design-patterns