Question

Here’s a sample of my structure:

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

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

    fn : {

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

    } 

};

Now, as you can see I’m storing my inputs, buttons, panels, and functions in their own respective object literals. The issue lies within fn.abc, fn.def, or any other function inside of page.fn. I want to be able to access my inputs, buttons, and panels from within the functions inside of fn.

Obviously, I know I can type this.is.a.really.long.namespace.inputs, but as you can see, that’s pretty long, and I don’t want to have to type it out for every single instance where I need to reference an object within the page.

Is there not a way I can directly reference inputs, buttons, and panels from within fn?

I was thinking I could do:

fn : {

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

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

}

which would allow me to use that.inputs inside of fn.abc, but is there a concern with that method? Any sort of overhead I need to be aware of? Or is there a better way to accomplish this?

Answer 1

Ok … Here’s what I ended up doing:

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

    }

};