In today’s web programming world, there are various cross browser JavaScript library available for the client side developers, like jQuery, dojo, ExtJs which allows developers to build highly interactive web and mobile applications with benefits of cross browser compatibility, simplifying client side scripting by providing abstraction in low level interactions and animation, built-it widgets, effects and rich custom controls. These libraries also emphasis on writing clean JavaScript code that increase readability and maintenance of UI which is close to impossible by using native JavaScript code.
However, while developing application systems, we code that interact with other parts of the system and uses native JavaScript objects and many of us ended with a poorly written code which is not clean, readable and optimized as well. There are various techniques to write highly optimized and manageable code but all of them difficult to some up in a single box. Every developer use JavaScript code while building rich UI interfaces and they have to deal with creating objects in JavaScript. I am describing here few of the object creation patterns which provide better way creating objects and best practices of developing application with JavaScript.
- Literal Notation Pattern (Object literal Pattern)
- Namespace Pattern
- Module Pattern
- Sandbox Pattern
Literal Notation Pattern
Literal notation pattern allow us to create object, arrays and regular expression literals. In javascript, objects are nothing but hash table of key value pairs and mutable in nature. The value can be any other primitives or other objects and are called properties of an object. We can create an empty object in a very simple manner.
var cat = {};
cat.name = “catty”; // adding property to cat object
the value in object can also be functions and are called Methods. Like this
cat.getName = function(){
return cat.name;
};
We can also create cat object without creating empty object first. The object literal Pattern enable us to add property and methods to the object at time of creation.
var cat = {
name: “catty”,
getName: function(){
return this.name;
}
}
Note: However there is no such empty object thing in JavaScript, this is just for simplecity and even {} object has property and methods inherited from Object.prototype
The above mentioned code is equivalent to code
var cat = new Object();
cat.name = “catty”;
cat.getName = function(){
return cat.name;
}
There is no reason to use new Object() constructor when you can use object literal.
Using object literal to create array
var languages = [“C#”, “Java”, “Ruby”]; // literal pattern
equivalent to
var languages = new Array(“C#”, “Java”, “Ruby”);
We can create other javascript objects using literals like Regular Expression (RegExp) and other primitive type like String(), Numbers(), Boolean() and Error(). Find the short table below for quick reference (extracted from Javascript Patterns Book).
Before moving to our next set of patterns, I would like to introduce you some patterns to create functions in javascript which is used extensively in object creation patterns like namespace, module etc. I will write the same on my next blog.
Till then,
Happy Learning !!
