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;">
<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 />
<span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br /><br />
<span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br />
<span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br />
<span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br />
<span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br />
<span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br />
<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;">
<span style="color:Green;background-color:transparent;font-family:Courier New;font-size:11px;"><br /><br />
<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;">
<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;">
<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;">
<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;">
<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;">
<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;">
<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;">
<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;">
We can then call displayMyMessage from outside our Namespace like this:
<button onclick="myNameSpace.myPseudoClass.displayMyMessage()">Test Me</button>
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.
The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.