How to set up JavaScript namespace and classes properly?

user_235334 0
Viewed 33660

It seems there are so many ways to set up a JavaScript application so it is confusing as to which one is correct or best. Are there any difference to the below techniques or a better way of doing this?

MyNamespace.MyClass = {
    someProperty: 5,
    anotherProperty: false,

    init: function () {
        //do initialization
    },

    someFunction: function () {
        //do something
    }
};

$(function () {
    MyNamespace.MyClass.init();
});

Another way:

MyNamespace.MyClass = (function () {
    var someProperty = 5;
    var anotherProperty = false;

    var init = function () {
        //do something
    };

    var someFunction = function () {
        //do something
    };

    return {
        someProperty: someProperty
        anotherProperty: anotherProperty
        init: init
        someFunction: someFunction
    };
}());

MyNamespace.MyClass.init();

The first technique feels more like a class. I am coming from server-side background if this makes a difference. The second technique seems more redundant and a bit awkward, but I see this used a lot too. Can someone please help shed some light and advise the best way to move forward? I want to create a application with lots of classes talking to each other.

javascript-namespaces javascript-framework javascript-objects oop javascript
5 Answers

How to combine namespace and class declaration:

var ns = { // your namespace
    my_value: 1, // a value inside the namespace to avoid polluting
    MyClass: function() { // a class inside the namespace
        this.class_property: 12,
        this.class_method: function() {
            console.log("My property: " + this.class_property);
        }
    },
    myFunction: function() { // a function inside a namespace
        console.log("I can access namepsace value if you don't use 'new': " + this.my_value);
    }
};

Accessing your value:

console.log(ns.my_value);

Now, for the Class and Function: If you use new, the word this inside the function will point to it's constructor. If you don't use new, this will point to the namespace. So,

Using a Class:

var obj = new ns.MyClass();

Using the Function:

ns.myFunction();

If you construct the object without new, this will point to the namespace, so the namespace will be "destroyed" because MyClass.class_property and MyClass.class_method will be added to it.

user_48054620
Related