Застрял в простой объектной литеральной области / проблеме ссылки

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

В этом нет ничего плохого. На самом деле вы можете уменьшить накладные расходы по следующим причинам:

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

Хорошо ... Вот что я в итоге сделал:

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 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

Если вы строите объект таким образом, что каждый уровень содержит параметр parent, указывающий на уровень над ним, то вы можете получить доступ к данным таким образом.Взгляните на этот похожий вопрос .