Javascript Namespace - Multiple Levels

Question

I am currently doing the following to give my javascript code a namespace:

(function(foo, $, undefined) { // function: showNoteDialog foo.showNoteDialog = function() { // ... } }(window.foo = window.foo || {}, jQuery)); 

I would prefer instead:

 foo.showNoteDialog() 

You must have a namespace with several levels:

 foo.notes.showDialog() foo.other.showDialog() 

Is it possible? How can I do it?

Answer 1

There are no namespaces in JS, but you can assign objects to other objects, for example

 x = {}; xy = {}; xyz = function() {}; 

Answer 2

This is how I usually do it:

 var TopLevel = TopLevel || {}; //Exentd or Create top level namespace TopLevel.FirstChild = TopLevel.FirstChild || {}; //Extend or Create a nested name inside TopLevel 

Using this method allows for security between files. If TopLevel already exists, you assign it to the TopLevel variable; if not, you will create an empty object that can be extended.

Assuming that you want to create an application that exists in the application namespace and is expanded in several files, you need files that look like this:

File 1 (library):

 var Application = Application || {}; Application.CoreFunctionality = Application.CoreFunctionality || {}; Application.CoreFunctionality.Function1 = function(){ //this is a function }//Function1 

File 2 (library):

 var Application = Application || {}; Application.OtherFunctionality = Application.OtherFunctionality || {}; Application.OtherFunctionality.Function1 = function(){ //this is a function that will not conflict with the first } 

File 3 (working):

 //call the functions (note you could also check for their existence first here) Application.CoreFunctionality.Function1(); Application.OtherFunctionality.Function1(); 

Answer 3

Take a look at namespace.js . It allows you to declare nested namespaces using public and private methods. This is good because it allows you to call any method inside a namespace block without a prefix - regardless of scope.

 (function() { namespace("example.foo", bar); function foobar() { return "foobar"; }; function bar() { return foobar(); }; }()); example.foo.bar(); // -> "foobar" 

Answer 4

I am using bob.js framework :

 bob.ns.setNs('myApp.myMethods', { method1: function() { console.log('This is method 1'); }, method2: function() { console.log('This is method 2'); } }); //call method1. myApp.myMethods.method1(); //call method2. myApp.myMethods.method2(); 

Answer 5

Automating declaring multi-level namespaces in javascript is very simple, as you can see:

 var namespace = function(str, root) { var chunks = str.split('.'); if(!root) root = window; var current = root; for(var i = 0; i < chunks.length; i++) { if (!current.hasOwnProperty(chunks[i])) current[chunks[i]] = {}; current = current[chunks[i]]; } return current; }; // ----- USAGE ------ namespace('ivar.util.array'); ivar.util.array.foo = 'bar'; alert(ivar.util.array.foo); namespace('string', ivar.util); ivar.util.string.foo = 'baz'; alert(ivar.util.string.foo); 

Try: http://jsfiddle.net/stamat/Kb5xY/ Blog post: http://stamat.wordpress.com/2013/04/12/javascript-elegant-namespace-declaration/