Have you ever worked on a project that had a ton of Javascript in it? Not only that, but let me add that the project also made no good use of a Javascript framework. A lot of times when working in a project rich in Javascript, I find functions just defined all over the place without any rhyme or reason. Sometimes it is hard to judge if you are re-defining a function or not. This can get quite hairy, especially without the use of a tool that supports Javascript intellisense such as Visual Studio 2008. If you have been through these pains much as I have, then here is your saving grace.
Let me first start out by saying this... There are no namespaces in Javascript... Did you catch that? I'll say it for you again. There are no namespaces in Javascript! Ok good, with that out of the way I can now say that there are pseudo namespaces in Javascript. The reality of it all is that there really are no namespaces in Javascript. There are only objects that may contain variables and functions, but also may contain sub objects. This is key to understanding how namespaces actually work in Javascript. So unlike a .NET namepace that can only contain objects, in Javascript your namespace is an object so it can contain pretty much anything.
So lets make some pseudo namespaces, shall we? Let's start by creating a file that will contain our base object structure.
From the code implementation above, we will have a root object of Rollem. Rollem contains two objects, one called UI and another called Utilities. Within the UI object, there is an object called SomeUIClassName where the magic happens. In the SomeUIClassName object there are two variables defined (it is important to note that these variables are public) and we also have a method called SomeUIClassMethod. Notice how the SomeUIClassName object is fully defined, while the SomeUtilityClassName still lacks definition. This was done on purpose to show some flexibilities of Javascript.
We will create a second file that contains the definition to the SomeUtilityClassName like so:
Notice the reference tag at the top of the code. This will give us intellisense in Visual Studio 2008.
So we have an object defined in one file, while the objects definition is in a completely separate file. Pretty cool, no? You can define more methods and variables within your objects wherever the need arises. I will say this however, try to stick to a pattern or you will end up in the same mess you started out to resolve. Now all we have left to do is make a call down through the object chain to our methods like so:
Though Javascript is a loosely typed language it still has many strong points in today's web development. With all the ajax craze out there it is nice to find a way to tidy up the code so that things can be put in places they belong so they are easy to re-find. Having this tidbit of knowledge has helped immensely in the battle to not re-define functions of Javascript within pages. Don't get me wrong, intellisense also helps!
Happy Javascripting!
Download the code:
JavascriptNamespaces.zip (7.01 kb)
