Since we are constantly writing more and more complex web apps we need to use some design patterns to reuse the code which will make it easier to maintain.
Design patterns are important because it will help you to create easily maintainable and highly decoupled code which is very important if you are creating large JavaScript applications. It also helps make communication between software designers more efficient as they can picture the high-level design in their head when they come to know about the design pattern thus making it relatively easier to start working on it.
The design patterns in JavaScript are :
1. Module Design Pattern
2. Singleton Design Pattern
3. Prototype Design Pattern
4. Observer Design Pattern
5. Constructor Design Pattern
6. Revealing Module Design Pattern
7. Mediater Design Pattern
8. Command Design Pattern
9. Decorator Design Pattern
10. Flyweight Design Pattern
11. Facade Design Pattern
12. Factory Design Pattern
13. Mixin Design Pattern
We will not be discussing each and every design patterns, in this post we will only discuss 4 most important design patterns and they are Module, Protoype, Observer and Singleton.
Module Design Pattern
It is a design pattern which is used to implement the concept of software modules. It helps in reducing the global scoped variables by just focusing on public and private access to methods and variables. It is by far the most common among all the design patterns out there.
The concept of module design pattern is to wrap all the code in a function literal (function which calls itself) and then assigned to a single variable when it returns. JavaScript modules helps in keeping the pieces of code independent of other components, which provides loose coupling to support well-structured code.
Example
var myFunc = (function() {
var data = 'mydata';
return {
changeData: function () {
console.log(data);
data = "changedData";
console.log(data);
}
}
})();
myFunc.changeData();
In the above example other parts of the code are unable to access our data variable bacause its existence is limited to within the module's closure. Thus to access the data we need to call the function with the name of the module.
Singleton Design Pattern
It is a design pattern which allows only single instantiation of an object thus reducing the memory usage. This comes in handy when you want to create a class whose functionality doesn't change for its multiple instances for example database connection pool.
The advantage of using Singleton is that it reduce memory footprint, it has single point of access and initialization can be delayed thus preventing instantiation until required.
Example
var MyClass = (function() {
var instance;
function createInstance() {
var myInstance = new Object();
return myInstance;
}
return {
getInstance: function() {
if(!instance) {
instance = createInstance();
}
return instance;
}
};
})();
//Both Object1 and Object2 are equal as they are pointing to same instance
var object1 = MyClass.getInstance();
var object2 = MyClass.getInstance();
Prototype Design Patterns
It is a design pattern which specifies the kind of objects to create using a prototypical instance. It creates new objects by returning objects that are initialized with values rather than creating non-initialized objects. The objects created are clones of the original objects that are passed around.
The benefit of using prototype pattern is that we will be working with the prototypal strengths of JavaScript rather than attempting to get features of other languages. Implementing inheritance is very easy using this design pattern which is actually a performance boost.
Example
function Earth() {
}
Earth.prototype.live = function {
//live in Earth
}
Person.prototype = Object.create(Earth.prototype);
var per1 = new Person ('Coding', 'Male')
per1.live();
In the above example we have seen how live (which is not a member of Person but it is a property of its prototype Earth) can be called using person's object. This happens because every object and every prototype has a prototype (i.e succession of objects linked together to form a prototype chain).
Read Also : Understanding JavaScript Prototypes
Observer Design Pattern
It is a design pattern which defines one-to-many dependency between objects thus when one object changes state, all dependents of it are updated automatically. In this object maintains a list of objects depending on it and it broadcasts a notification to the observers whenever it changes.
The advantage of using it is that it pinpoints the dependencies thus you need not have to worry about all the changes which needs to be done whenever any change occurs. It is also helpful in decoupling objects which give us reusable components.
Example :
var MyNotifier = function() {
return {
initObserver: function() {
this.myObservers = [];
},
addObserver: function(myObserver) {
this.myObservers.push(myObserver);
},
notifyObserver : function(myObserver) {
var index = this.observers.indexOf(myObserver)
this.observers[index].notify(index);
}
}
}
var MyObserver = function() {
return {
notify: function(index) {
console.log("Observer Nottified of index " + index);
}
}
}
var myNotifier = new MyNotifier();
var myObserver1 = new MyObserver();
var myObserver2 = new MyObserver();
var myObserver3 = new MyObserver();
var myObserver4 = new MyObserver();
myNotifier.initObserver();
myNotifier.addObserver(myObserver1);
myNotifier.addObserver(myObserver2);
myNotifier.addObserver(myObserver3);
myNotifier.addObserver(myObserver4);
myNotifier.notifyObserver(myObserver3); // Observer notified of index 2
In the above example we have our MyNotifier and MyObserver class so whenever we do any change we can call the notify function of our MyObserver to notify the objects which are subscribed for notification. You can also notify all the observers depending on your application.
Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.
Why these are important?
ReplyDelete