Javascript Namespace Declaration

Question

What neat ways do you use for declaring JavaScript namespaces. I've come across this one:

if (Foo == null || typeof(Foo) != "object") { var Foo = new Object();}

Is there a more elegant or succinct way of doing this?

Just a bit of fun...

Answer 1

I like this:

var yourNamespace = {

    foo: function() {
    },

    bar: function() {
    }
};

...

yourNamespace.foo();

Answer 2

or try this approach:

http://weblogs.asp.net/mschwarz/archive/2005/08/26/423699.aspx

Answer 3

I use this approach:-

var myNamespace = {}
myNamespace._construct = function()
{
    var staticVariable = "This is available to all functions created here"

    function MyClass()
    {
       //Depending on the class may build all the class here
       this.publicMethod = function()
       {
          //Do stuff
       }
    }
    //Alternatively may use prototype
    MyClass.prototype.altPublicMethod = function()
    {
        //Do stuff
    }

    function privateStuff()
    {
    }

    function publicStuff()
    {
       //code that may call other public and private functions
    }

    //List of things to place publically
    this.publicStuff = publicStuff
    this.MyClass = MyClass
}
myNamespace._construct()

//The following may or may not be in another file
myNamespace.subName = {}
myNamespace.subName._construct = function()
{
   //build namespace
}
myNamespace.subName._construct()

External code can then:-

var myClass = new myNamespace.MyClass();
var myOtherClass = new myNamepace.subName.SomeOtherClass();
myNamespace.subName.publicOtherStuff(someParameter);

Answer 4

Another way to do it, which I consider it to be a little bit less restrictive than the object literal form, is this:

var ns = new function() {

    var internalFunction = function() {

    };

    this.publicFunction = function() {

    };
};

The above is pretty much like the module pattern and whether you like it or not, it allows you to expose all your functions as public, while avoiding the rigid structure of an object literal.

Answer 5

http://github.com/smith/namespacedotjs

You gotta check that out!! :D

Answer 6

After porting several of my libraries to different projects, and having to constantly be changing the top level (statically named) namespace, I've switched to using this small (open source) helper function for defining namespaces.

global_namespace.Define('startpad.base', function(ns) {
    var Other = ns.Import('startpad.other');
    ....
});

Description of the benefits are at my blog post. You can grab the source code here.

One of the benefits I really like is isolation between modules with respect to load order. You can refer to an external module BEFORE it is loaded. And the object reference you get will be filled in when the code is available.

Answer 7

Is there a more elegant or succinct way of doing this?

yes it is:

var your_namespace = your_namespace || {};

then you can have

var your_namespace = your_namespace || {};
your_namespace.Foo = {toAlert:'test'};
your_namespace.Bar = function(arg) 
{
    alert(arg);
};
with(your_namespace)
{
   Bar(Foo.toAlert);
}

Answer 8

I created namespace which is inspired by Erlang's modules. It is a very functional approach, but that is is how I write my js these days.

It gives a closure a global namespace and exposes a defined set functions within that closure.

(function(){

  namespace("images", previous, next);
  // ^^ this creates or finds a root object, images, and binds the two functions to it.
  // It works even though those functions are not yet defined.

  function previous(){ ... }

  function next(){ ... }

  function find(){ ... } // a private function

})();

Answer 9

This is a follow-up to user106826's link to Namespace.js. It seems the project moved to github. The new link is now:

http://github.com/smith/namespacedotjs

I have been using this simple js helper for my tiny project and so far it seems to be light yet versatile enough to handle namespacing and loading modules/classes. It would be great if it would allow me to import a package into a namespace of my choice, not just the global namespace... sigh, but that's besides the point.

It allows you to declare the namespace then define objects/modules in that namespace:

Namespace('my.awesome.package'); 
my.awesome.package.WildClass = {};

Another option is to declare the namespace and it's contents at once:

Namespace('my.awesome.package', {
    SuperDuperClass: {
        saveTheDay: function() {
            alert('You are welcome.');
        }
    }
});

For more usage examples, look at the example.js file in the source: http://github.com/smith/namespacedotjs/blob/master/example/sandbox.js