What's the syntax for a JavaScript sub namespaces/class inside current namespace/class?

Question

I've been working a lot with JavaScript lately and have created some large function collections. I've found the need to have sub functionality that I want to separate from the main library yet still be included in the main library but haven't found an elegant enough way to do this yet.

Here are a couple of examples that I use at the moment

So I usually setup my main library like this

// Main library
var animals = function(settings){
    // Main library stuff
}

To add sub classes / sub functionality that's encapsulated separately but still part of the main library...

This is the first method using object literal notation

animals.prototype.dogs = {
    addDog: function(){
        // Can only access the dogs object
        var test = this;
    },
    removeDog: function(){}
}

// Usage of the whole thing
var animalsInstance = new animals({a: 1, b: 3});
animalsInstance.dogs.addDog();

While I really like the syntax of this i can never really use it as there is no way to reference the animals instance inside any of the functions inside the dogs object. So I came up with this notation as a replacement

animals.prototype.dogs = function(){
    var parent = this;
    return {
        addDog: function(){
            // The animals instance
            var test = parent;
            // The dogs instance
            var test2 = this;
        },
        removeDog: function(){}
    }
}

// Usage
var animalsInstance = new animals({a: 1, b: 3});
animalsInstance.dogs().addDog();

Although now I can get access to the animals instance from inside all the sub functionality of the dogs functions I don't really like the slightly hacky way I've done it. Has anyone got any cleaner methods?

http://stackoverflow.com/questions/1595611/how-to-properly-create-a-custom-object-in-javascript#1598077 — zerkms, Sep 04 '12 at 20:24
Thanks, I think the question I wrote was miss leading, your link explains how to create a sub class that inherits the base methods. I think what I'm after is a way to separate out different groups of related methods under there own sort of namespace. i.e All the dogs related functions under animals.dogs.[insert any method name here]. As when you get into 40/50 + functions it starts to get cumbersome. My real world example was for a TreeGrid I was developing, every function was relevant in keeping it under the main TreeGrid class, but I needed to seperate out sub sections of functionality. — Ally, Sep 04 '12 at 20:50
If you don't want to have all the methods - don't use inheritance, use delegation. — zerkms, Sep 04 '12 at 21:12

score 4 · Accepted Answer · answered Sep 07 '12 at 19:44

4

Perhaps your looking for something like this...

This will allow you to have the following syntax tinyFramework.Utilities.Storage.setItem() tinyFramework.Elements.Modals.createModal()

var tinyFramework = {

    Utilities: {
        Storage: {
            setItem: function(){
            //do stuff
            },

            getItem: function(){
            //do stuff
            }
        },
        Helpers: {

        }
    },

    Elements: {

        Modals: {

            createModal: function(){
            },
            closeModal: function(){
            }
        }
    }
}

answered Sep 07 '12 at 19:44

afreeland

3,889
3
31
42

This would work as there is only ever one instance of the tinyFramework so I can reference it from anywhere and inside any tinyFramework function. In my example I was using instances of animals which is a function to allow multiple instances. Perhaps I should stick all my functionality in tinyFramework and reference that in my animal instances. Thanks for the rethink I think this is the best way of creating a library of functionality. – Ally Sep 09 '12 at 13:47
Glad I could help, this type of object can be very useful and easy to implement. Best of luck to you! – afreeland Sep 10 '12 at 14:09

What's the syntax for a JavaScript sub namespaces/class inside current namespace/class?

1 Answers1