Question

I’m looking to encapsulate my javascript inside a namespace like this:

MySpace = {

   SomeGlobal : 1,
   A: function () { ... }, 
   B: function () { ....; MySpace.A(); .... },
   C: function () { MySpace.SomeGlobal = 2;.... }
}

Now imagine that instead of a few lines of code, I have about 12K lines of javascript with hundreds of functions and about 60 globals. I already know how to convert my code into a namespace but I’m wondering if there’s a quicker way of doing it than going down 12K lines of code and adding MySpace. all over the place.

Please let me know if there’s a faster way of doing this.
Thanks for your suggestions.

Answer 1

I like to wrap up the namespace like so. The flexibility is huge, and we can even separate different modules of the MySpace namespace in separate wrappers if we wanted too. You will still have to add some sort of _self. reference infront of everything, but at least this way you can change the entire name of the namespace very quickly if need be.

You can see how with this method you can even call _self.anotherFunc() from the 1st module, and you’ll get to the second one.

(function (MySpace, $, undefined) {

    var _self = MySpace; // create a self-reference
    _self.test = function () { 
        alert('we got here!'); 
        _self.anotherFunc(); // testing to see if we can get the 2nd module
    };

    _self = MySpace; // reassign everything just incase

}(window.MySpace = window.MySpace || {}, jQuery));

$(function () { 

    MySpace.test(); // call module 1
    MySpace.callOtherModule(); // call module 2

});

// Here we will create a seperate Module to the MySpace namespace
(function (MySpace, $, undefined) {
    var _self = MySpace; // create a self-reference

    _self.callOtherModule = function () {
        alert('we called the 2nd module!');    
    };

    _self.anotherFunc = function () { 
        alert('We got to anotherFunc from the first module, even by using _self.anotherFunc()!'); 
    };
    _self = MySpace; // reassign everything just incase

}(window.MySpace = window.MySpace || {}, jQuery));​

jsFiddle DEMO