Question

以下是我的结构示例：

this.is.a.really.long.namespace = {

    inputs : {},
    buttons : {},
    panels : {},

    fn : {

        abc : function() {},
        def : function() {}

    } 

};

现在，您可以看到我将输入，按钮，面板和函数存储在各自的对象文字中。问题出在fn.abc，fn.def或page.fn内的任何其他功能中。我希望能够从inputs内的功能中访问我的buttons，panels和fn。

显然，我知道我可以输入this.is.a.really.long.namespace.inputs，但正如你所看到的那样，这很长，而且我不想为我需要在其中引用一个对象的每个实例输入它页面。

我是否无法直接在inputs内引用buttons，panels和fn？

我以为我能做到：

fn : {

    that : this.is.a.really.long.namespace,

    abc : function() {},
    def : function() {}

}

允许我在that.inputs内使用fn.abc，但该方法是否存在问题？我需要注意哪种开销？或者有更好的方法来实现这一目标吗？

Answer 1

这没有错。事实上，由于以下原因，您可能会减少开销：

较少的对象层次结构的运行时解析
较少的字符=较短的剧本

更加丰富的构造是常用的“模块模式”。

Javascript内部效率相当低（例如，它没有真正的索引数组），所以你可以做的任何事情都可以减少运行时查找。创建指向long heirarchy的指针将比每次使用完整的heirarchy快得多。这可能只会在长循环中产生很大影响，但由于它也更容易阅读，所以它只是一个更快的奖励 - 没有任何缺点。

（编辑）

用直接对象做这个，你可以做这样的事情，使用jQuery 简化添加属性：

this.is.a.long.namespace = {};
$.extend(this.is.a.long.namespace, 
   { that: this.is.a.long.namespace,
   ... // other properties 
   });

一般来说，如果您正在构建功能对象，那么模块模式会更好，因为它更灵活，并允许您使用范围来创建私有变量/对象。

this.is.a.long.namespace = (function() 
{
    var that = {},
       somePrivateVariable;
    function privateFunction() {
      ...
    } 
    that.inputs = {};
    ...
    // assign everything to "that"
    return that;
}());

Answer 2

如果以这样的方式构建对象，即每个级别都包含指向其上方级别的parent参数，那么您可以通过该方式访问数据。看看this similar question。

Answer 3

我会考虑这样的事情：

var namespace = this.is.a.really.long.namespace
this.is.a.really.long.namespace = {

    root : namespace,
    inputs : {},
    buttons : {},
    panels : {},

    fn : {

        abc : function() {},
        def : function() {}

    } 
};

从那里开始，你应该没有问题在对象中的任何地方引用命名空间。

Answer 4

好的......这就是我最终做的事情：

this.is.a.really.long.namespace = {

    inputs  : { firstName : undefined },
    buttons : { submit : undefined },

    fn : {

        root : undefined,

        abc : function() { console.log(this.root.inputs.firstName); },
        def : function() { console.log(this.root.buttons.submit); }

    },

    init : function() {

        var self     = this,
            fn       = self.fn,
            inputs   = self.inputs,
            buttons  = self.button;

            fn.root  = this;  // this is the key

            inputs.firstName  = $("#first-name");
            buttons.submit    = $("#submit-button");

        fn.abc();
        fn.def();

    }

};

坚持一个简单的对象文字范围/引用问题

4 个答案: