Namespacing Your JavaScript

JavaScript is an object oriented programming language, but it's a functional programming language which is different than some of the more familiar classical programming languages like C#, VB.NET, C++, and Java.

JavaScript in its current state does not support enums, accessors (private, public, protected, ...), classes, or namespaces. However, all of these can be achieved through JavaScript objects, closures, functions and lambdas.

Focusing on JavaScript namespacing. All the JavaScript loaded into your page is global by default. Namespacing is an important defensive programming technique, since it minimizes the risk of scripts interfering with each other.

This approach has been adopted from Modules and Namespaces (Chapter 10) from JavaScript: The Definitive Guide and is pretty similar to what Yahoo! uses too.

// Create the namespace object.  Error checking omitted here for brevity.

var myNameSpace;
if (!myNameSpace) myNameSpace = {};
myNameSpace.myPseudoClass = {}; 
//JavaScript doesn't support classes, 
// so let's avoid confusing people and call this a Pseudo Class



// Don't stick anything into the namespace directly.

// Instead we define and invoke an anonymous function to create a closure

// that serves as our private namespace. This function will export its

// public symbols from the closure into the myNameSpace object

// Note that we use an unnamed function so we don't create any other

// global symbols.

(function() {  // Begin anonymous function definition

    

  // Nested functions create symbols within the closure
    
  function displayMyMessage() { alert(myMessage); }

      // Local variable are symbols within the closure.
    
  // This one will remain private within the closure
    
  var myMessage = 'Hello World';
 
      // This function can refer to the variable with a simple name
    
  // instead of having to qualify it with a namespace
    
  function getMyMessage() { return myMessage; }

      // Now that we've defined the properties we want in our private
    
  // closure, we can export the public ones to the public namespace
    
  // and leave the private ones hidden here.
    
  var ns = myNameSpace.myPseudoClass;
      ns.displayMyMessage = displayMyMessage;
      ns.getMyMessage = getMyMessage;

})(); // End anonymous function definition and invoke it 

 We can then call displayMyMessage from outside our Namespace like this:

<button onclick="myNameSpace.myPseudoClass.displayMyMessage()">Test Me</button>   

You must Login to comment.