开发者

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

开发者 https://www.devze.com 2022-12-29 08:22 出处:网络
Here\'s an example of the pattern I\'m using in my javascript objects these days (this example relies on jQuery).

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开发者_StackOverflow中文版.log(arguments); }
    }

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

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


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

Why are don't you use this directly? Write Javascript, the one maintaining your code will thank you.

    // 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;
        }
    }

I know that this is good OOP design, but really, you are adding yet another layer of indirection to plain Javascript. You'll have some things that you'll hide with $(e).hide('fast') and others that you'll hide using e.hide(). That inconsistency might make your code a bit more confusing than necessary.

    // 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;
    }

Preppend a _ or __ before private methods and variables, as Javascript doesn't have private attributes, so you have to rely on convention, or use closures.

    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); }
    }

This piece of code is a bit suboptimal, as the function log() will be called from outside the class. I would definitely wouldn't leave it on production code.

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

精彩评论

暂无评论...
验证码 换一张
取 消