encapsulating javascript inside a namespace

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.

I fixed your code example since it would have never run the way you had it typed up. — epascarello
– epascarello, Commented Aug 7, 2012 at 14:54
Yes, thanks for fixing it; just noticed after you had made the edit. Any suggestion on how to make the conversion? — frenchie
– frenchie, Commented Aug 7, 2012 at 14:55
Namespace is not a really good solution. Try wrapping your code with a closure and export public definitions. — Florent
– Florent, Commented Aug 7, 2012 at 14:56
Agree with @Florent. Do you want your code to be able to access every variable you're trying to declare as MySpace.? — Dogbert
– Dogbert, Commented Aug 7, 2012 at 14:58

Mark Pieszak - Trilon.io · Accepted Answer · 2012-08-07 15:11:10Z

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

Oleg V. Volkov · Accepted Answer · 2012-08-07 15:22:16Z

0

Wrap a function body around your existing code to use as scope, hiding everything from global - this will allow you to do internal calls without pasting Namespace. prefix everywhere, neatly hide things you don't want everyone else to see, and will require minimal changes as well.

After that, decide what functions you want to "export" for everyone and assign them to properties of object you want to use as "namespace".

answered Aug 7, 2012 at 15:22

Oleg V. Volkov

22.6k4 gold badges49 silver badges68 bronze badges

Collectives™ on Stack Overflow

encapsulating javascript inside a namespace

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related