Well if you ever look into namespacing JavaScript online, I’m sure you were completely lost at first! The fact is namespacing is easy! Extremely easy! Yet people make it sound so complex it’s crazy.
Generally you must first off understand what a namespace is. It’s nothing more than a container for a group of code used to organize it so you don’t have conflicts later on. Granted there is a bit more to it, but for now that’s all you really need to understand.
So now what is a method and what is a property?
In JavaScript a method is simply a function. Such as alert(), blur(), focus() you name it. The list goes on and on. So what is a property then? A property… You probably wouldn’t guess it, but it’s nothing more than a variable! Yes a property is pretty much just a variable. Nothing special about it.
So, we have functions and we have variables in JavaScript, so in fact we must have object oriented programming! The answer is yes! But first we need to learn to make your first namespace.
In JavaScript we use objects to do this. To create an object the easiest way to do it is the set a variable. Yes even your objects are variables!
Since my blog is .Net oriented I will use an example for a custom control namespace.
var CustomControls = {
OverlayMenu : {
Drag : {
style : {}
},
ContextMenu : {}
}
};
In the above code, which may look a bit complex at first, we have the namespace CustomControls. Generally we declared CustomControls a namespace but assigning it as an object variable. To declare an object you simply use two curly brackets. “{}”
So in generally you can declare a very basic namespace doing this:
var NameSpace = {}
Inside the namespace we can add different methods/properties at will by simply doing this:
NameSpace.Name = “HelloWorld”;
Name in this example is a property, since it doesn’t do anything but hold a string value. Thus it is a variable to the namespace NameSpace. To create a method, which is generally a function, yes you wouldn’t of guess it’s:
NameSpace.Alert = function(message) { alert(message); };
What? = function? I’m sure you’ve seen it before. You don’t have to name your functions! In fact we are assigning the variable Alert, of the namespace NameSpace, as a function variable. Yes, even functions can be variables.
So now with that said we need to use this new method of NameSpace:
NameSpace.Alert(“eureka!”);
If you notice, Alert is treated like a function, even the value for message is transferred over.
So what next? We can add a sub-namespace or if you prefer you may call it a class. In the previous example of NameSpace, NameSpace was treated as both a namespace and a class.
To create a true class we’ll simply add another namespace within the namespace which is basically our… yes you wouldn’t of guess! Our class!
var NameSpace = {
Class : {}
};
The best way to describe the colon in this example is just to think of it as assigning it a value or a “=” sign. So now we have our class.
Now just as with the NameSpace we can assign some properties.
NameSpace.Class.Message = “Hello World”;
Now our Message is stored within our class Class as a property. Let’s go ahead and create a method to call upon that message.
NameSpace.Clase.Alert = function(message) { alert(message); };
Ah! So now what?
NameSpace.Class.Alert(NameSpace.Class.Message);
Yep that’s right! It will alert use Hello World! In a sense the property is a global variable that is stored within the class for future reference. Pretty neat huh?
So, I’m noticing things are getting out of hand here… I don’t want to have to type so much! I mean it’s insane!
Understood! This is where object oriented programming in JavaScript because awesome!
So you want to get all the properties/methods of the class Class without typing NameSpace.Class.Whatever?
Just set a variable!
var myClass = NameSpace.Class
Now myClass is connected to the Class within the namespace NameSpace.
So you can now use it as such:
myClass.Message = “Wow it works!”;
myClass.Alert(myClass.Message);
I’ll let the result explain itself!
Ok yes, I’m a bit excited about this, but it’s such an amazing feature and the fact that you can use it in visual study and it’ll be treated like any other class is amazing. It’s so useful and makes JavaScript so much more organized!
Anyway so you can practice is here is a sample of the code:
//namespace and class mapping
var NameSpace = {
Class : {}
};
//Class method and property assignments
NameSpace.Class.Message = “Hello World”;
NameSpace.Clase.Alert = function(message) { alert(message); };
//Calling methods and properties of Class
var myClass = NameSpace.Class
myClass.Message = “Wow it works!”;
myClass.Alert(myClass.Message);
Recommended Reading:
http://www.json.org/ – If you never read JSON you NEED TO READ IT! It explains how javascript works and is probably one of the most important documents on the web relating to JS.
http://msdn.microsoft.com/en-us/library/ms533050(VS.85).aspx – Is actually a pretty good reference for javascript for finding methods etc.
