陷入简单的对象文字范围/引用问题

Question

这是我的结构示例：

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

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

    fn : {

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

    } 

};

现在，如您所见，我将输入、按钮、面板和函数存储在各自的对象文本中。问题出在 fn.abc、fn.def 或 page.fn 内的任何其他函数中。我希望能够从 fn 内部的函数访问我的输入、按钮和面板。

显然，我知道我可以输入 this.is.a.really.long.namespace.inputs，但正如您所看到的，这相当长，而且我不想将其输入对于我需要引用页面内的对象的每个实例。

有没有办法可以从 fn 中直接引用 inputs、buttons 和 panels ？

我在想我可以这样做：

fn : {

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

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

}

这将允许我在 fn.abc 内部使用 that.inputs ，但是该方法有问题吗？我需要注意任何类型的开销吗？或者有更好的方法来实现这一点吗？

Answer 1

这并没有什么问题。事实上，您可能会由于以下原因而减少开销：

1. 对象层次结构的运行时解析更少
2. 字符更少 = 脚本更短

更充实的构造是常用的“模块模式”。

Javascript 内部效率相当低（例如，它没有真正的索引数组），因此您可以采取任何措施来减少运行时查找通常都是好的。创建一个指向长层次结构的指针比每次都使用完整的层次结构要快得多。这可能只在长循环中很重要，但由于它也更容易阅读，所以它只是更快一点的好处 - 没有缺点。

（编辑）

要使用直接对象执行此操作，您可以执行类似的操作，使用 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 参数的方式构建对象，那么您可以通过这种方式访问​​数据。看看这个类似的问题。

Answer 3

好吧...这就是我最终所做的：

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

    }

};

Answer 4

我会考虑这样的事情：

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

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

    fn : {

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

    } 
};

从那里您在对象内的任何位置引用您的名称空间应该没有问题。