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.

<span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">// Create the namespace object.  Error checking omitted here for brevity.</span>
<span style="color:Blue;background-color:transparent;font-family:Courier New;font-size:11px;"><br />var</span> myNameSpace;<br /><span style="color:Blue;background-color:transparent;font-family:Courier New;font-size:11px;">if</span> (!myNameSpace) myNameSpace <span style="color:Red;background-color:transparent;font-family:Courier New;font-size:11px;">=</span> {};<br />myNameSpace.myPseudoClass <span style="color:Red;background-color:transparent;font-family:Courier New;font-size:11px;">=</span> {}; <span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br />//JavaScript doesn't support classes, <br />// so let's avoid confusing people and call this a Pseudo Class</span>

<span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br /><br />// Don't stick anything into the namespace directly.</span>
<span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br />// Instead we define and invoke an anonymous function to create a closure</span>
<span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br />// that serves as our private namespace. This function will export its</span>
<span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br />// public symbols from the closure into the myNameSpace object</span>
<span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br />// Note that we use an unnamed function so we don't create any other</span>
<span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br />// global symbols.</span>
<br />(<span style="color:Blue;background-color:transparent;font-family:Courier New;font-size:11px;">function</span>() {  <span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">// Begin anonymous function definition</span>

    <span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br /><br />  // Nested functions create symbols within the closure</span>
    <span style="color:Blue;background-color:transparent;font-family:Courier New;font-size:11px;"><br /></span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">  </span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Blue;background-color:transparent;font-family:Courier New;font-size:11px;">function</span> displayMyMessage() { alert(myMessage); }<br /><br />    <span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"></span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">  </span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">// Local variable are symbols within the closure.</span>
    <span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br /></span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">  </span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">// This one will remain private within the closure</span>
    <span style="color:Blue;background-color:transparent;font-family:Courier New;font-size:11px;"><br /></span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">  </span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Blue;background-color:transparent;font-family:Courier New;font-size:11px;">var</span> myMessage <span style="color:Red;background-color:transparent;font-family:Courier New;font-size:11px;">=</span> 'Hello World';<br /> <br />    <span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"></span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">  </span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">// This function can refer to the variable with a simple name</span>
    <span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br /></span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">  </span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">// instead of having to qualify it with a namespace</span>
    <span style="color:Blue;background-color:transparent;font-family:Courier New;font-size:11px;"><br /></span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">  </span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Blue;background-color:transparent;font-family:Courier New;font-size:11px;">function</span> getMyMessage() { <span style="color:Blue;background-color:transparent;font-family:Courier New;font-size:11px;">return</span> myMessage; }<br /><br />    <span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"></span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">  </span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">// Now that we've defined the properties we want in our private</span>
    <span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br /></span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">  </span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">// closure, we can export the public ones to the public namespace</span>
    <span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br /></span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">  </span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">// and leave the private ones hidden here.</span>
    <span style="color:Blue;background-color:transparent;font-family:Courier New;font-size:11px;"><br /></span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">  </span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Blue;background-color:transparent;font-family:Courier New;font-size:11px;">var</span> ns <span style="color:Red;background-color:transparent;font-family:Courier New;font-size:11px;">=</span> myNameSpace.myPseudoClass;<br /></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">  </span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;">    ns.displayMyMessage <span style="color:Red;background-color:transparent;font-family:Courier New;font-size:11px;">=</span> displayMyMessage;<br /></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;"><span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">  </span></span><span style="color:Black;background-color:transparent;font-family:Courier New;font-size:11px;">    ns.getMyMessage <span style="color:Red;background-color:transparent;font-family:Courier New;font-size:11px;">=</span> getMyMessage;<br /><br />})(); <span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;">// End anonymous function definition and invoke it</span></span> <br />

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

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