Stuck auf ein einfaches Objekt literal Umfang / Referenzierung Problem

Question

Hier ist ein Beispiel für meine Struktur:

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

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

    fn : {

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

    } 

};

Wie Sie sehen können, speichere ich meine Eingaben, Schaltflächen, Bedienfelder und Funktionen in ihren jeweiligen Objektliteralen. Das Problem liegt in fn.abc , fn.def oder jede andere Funktion innerhalb von page.fn . Ich möchte Zugang zu meinen inputs , buttons y panels aus den Funktionen innerhalb von fn .

Ich weiß natürlich, dass ich tippen kann this.is.a.really.long.namespace.inputs aber wie Sie sehen können, ist das ziemlich lang, und ich möchte es nicht für jeden einzelnen Fall, in dem ich auf ein Objekt innerhalb der Seite verweisen muss, abtippen müssen.

Gibt es nicht eine Möglichkeit, direkt auf inputs , buttons y panels von innen fn ?

Ich dachte, ich könnte es tun:

fn : {

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

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

}

was mir erlauben würde, die that.inputs im Inneren von fn.abc aber gibt es Bedenken gegen diese Methode? Gibt es irgendeinen Overhead, den ich beachten muss? Oder gibt es eine bessere Möglichkeit, dies zu erreichen?

Answer 1

Daran ist nichts auszusetzen. In der Tat werden Sie aus den folgenden Gründen wahrscheinlich Ihre Gemeinkosten senken:

1. Weniger Laufzeitauflösung von Objekthierarchien
2. Weniger Zeichen = kürzeres Skript

Ein ausgefeilteres Konstrukt ist das häufig verwendete "Modulmuster".

Javascript ist intern ziemlich ineffizient (z.B. hat es keine echten indizierten Arrays), so dass alles, was Sie tun können, um Laufzeit Lookups zu reduzieren ist in der Regel gut. Das Erstellen eines Zeigers auf eine lange Hierarchie wird viel schneller sein als die Verwendung der vollständigen Hierarchie jedes Mal. Dies wird wahrscheinlich nur in langen Schleifen eine Rolle spielen, aber da es auch einfacher zu lesen ist, ist es nur ein Bonus, dass es ein bisschen schneller ist - es gibt keinen Nachteil.

(Bearbeiten)

um dies mit geraden Objekten zu tun, könnten Sie so vorgehen und jQuery verwenden, um das Hinzufügen von Eigenschaften zu vereinfachen:

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

Im Allgemeinen ist das Modulmuster besser geeignet, wenn Sie funktionale Objekte erstellen, da es flexibler ist und Ihnen die Möglichkeit gibt, private Variablen/Objekte zu erstellen.

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

Answer 2

Wenn Sie das Objekt so aufbauen, dass jede Ebene eine parent Parameter, der auf die darüber liegende Ebene verweist, können Sie auf diese Weise auf die Daten zugreifen. Werfen Sie einen Blick auf diese ähnliche Frage .

Answer 3

Ich würde so etwas in Erwägung ziehen:

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

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

    fn : {

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

    } 
};

von dort aus sollten Sie keine Probleme haben, irgendwo innerhalb des Objekts auf Ihren Namespace zu verweisen.

Answer 4

Ok ... Hier ist, was ich am Ende getan habe:

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

    }

};