Question

这是我现在在我的javascript对象中使用的模式的一个示例（此示例依赖于jQuery）。 http://pastie.org/private/ryn0m1gnjsxdos9onsyxg

它对我来说相当不错，但我猜错了，或者至少是次优的，我只是很想得到别人的意见。

这是一个较小的内联示例：

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

我真的很想让人们对此有所了解。

Answer 1

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

为什么不直接使用this？编写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;
        }
    }

我知道这是一个很好的OOP设计，但实际上，你正在添加另一个间接层到普通的Javascript。您将使用$(e).hide('fast')以及使用e.hide()隐藏的其他内容隐藏一些内容。这种不一致可能会使您的代码比必要时更加混乱。

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

在私有方法和变量之前预先_或__，因为Javascript没有私有属性，因此您必须依赖约定或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); }
    }

这段代码有点不理想，因为函数log（）将从类外部调用。我肯定不会把它留在生产代码上。

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

这个JS对象模式有什么问题（或者说是对的）？

1 个答案: