JScript Namespacing

I’ve been asked recently about namespacing in JScript, if I use it, and how I use it. This is a loaded question, with no simple answer. I probably never paid too much attention to all the details around this topic, and I am guilty of mixing styles and sometimes not even using namespacing. I guess it all depends on how fast I need something done, and how much time I have to plan this process. But here’s a quick overview.

First off, not using namespacing. We all know the risks, as we can easily have another dev coming in and creating a function with the same name. If you reference all libraries in your form, then how is the system going to know which one to use? Here comes namespacing.

A function without namespacing can look like:

function foo()

{

   alert(“Here we go!”);

}

By default, JScript is not a language built with the complexities of the .NET framework (as an example). So, in order to introduce namespacing, we have to a little manual work. Don’t worry, you can keep it simple.

Static Namespacing

Now, probably the simplest way to namespace is using static namespacing. With this approach, you better have a clear plan from the beginning, and stick with it to the end. Renaming a namespace can be a painful process.

The simplest way to define a namespace is using a syntax similar to the following:

var myNamespace = {};

Next step, you define your variables and functions:

myNamespace.CONSTANT = “AAA”;

myNamespace.myVariable = 0;

myNamespace.myFunction = function()

{

   alert(“The value of my constant is: “ + myNamespace.CONSTANT);

}

so now you see how renaming the namespace can become a tedious job (I don’t ever trust the find and replace).

This is the format used in the Dynamics CRM 2011 SDK examples. It is effective, simple to read, and can also be nested as such:

myNamespace = {};

myNamespace.mySubNamespace = {};

You check for the namespace at the beginning and create it if it’s missing:

if(typeof(myNamespace) == “undefined”)

{ myNamespace = {}; }

Object Literal Notation

Another approach is using object literal notation. Now, this makes renaming the namespace later less of a tedious job. The syntax would look like so:

var myNamespace = {

   CONSTANT: “AAA”,

   myVariable: 0,

   myFunction: function() {

      alert(“The value of my constant is: “ + myNamespace.CONSTANT);

   }

}

This can take a little bit of getting used to, but once you get the hang of it it’s just as simple.

Next you can go into patterns, but that is the subject of another article.

Dynamic Namespacing Approaches

In this approach, you create your namespace as before, but you use the context:

var myNamespace = {};

(function(context)

{

   var CONSTANT = “AAA”;

   var myVariable = 0;

   context.myFunction = function()

   {

      alert(“Alert message!”);

   }

})(myNamespace);

This is the approach used in some popular frameworks out there. The advantage is that you can set the context to the global object easily.

Nesting Namespaces

Now, if you think .NET, you will be thinking, I need to nest namespaces. Something similar to Microsoft.Xrm.Sdk.Messages; but in JScript, how do I go about it?

You can simply declare your nested namespaces as follows:

var myNamespace = {};

myNamespace.subNamespace = {

   myFunction: function(){

      alert(“Your message here!”);

   }

}

You would call this as such:

myNamespace.subNamespace.myFunction();

At this point I would look at patterns, and there are some good patterns out there to investigate (AMD, CommonJS, MV*, etc.)

Enjoy!