JavaScript design patterns you should know
- Module
- Prototype
- Observer
- Singleton
Modules should be Immediately-Invoked-Function to allow for private scopes.This is what it looks like:
(function() {
// declare private variables and/or functions
return {
// declare public variables and/or functions
}
})();
Here we instantiate the private variables and/or functions before returning our object that we want to return. Code outside of our closure is unable to access these private variables since it is not in the same scope. Let's take a more concrete implementation:
However, when outside the module, contents are unable to be referenced.
var anonymousFunction = (function() {
var privateVariable = 'ABCD' // private var
var changePrivateFunction = function() { // private function
//some code here
}
return {
callChangeHTML: function() {
changePrivateFunction();
console.log(privateVariable);
}
};
})();
anonymousFunction.callChangeHTML(); // Outputs: 'contents'
console.log(anonymousFunction.privateVariable); // undefined
The purpose is to maintain encapsulation and reveal certain variables and methods returned in an object literal.
var Exposer = (function() {
var privateVariable = 10;
var privateMethod = function() {
console.log('Inside a private method!');
privateVariable++;
}
var methodToExpose = function() {
console.log('This is a method I want to expose!');
}
var otherMethodIWantToExpose = function() {
privateMethod();
}
return {
first: methodToExpose,
second: otherMethodIWantToExpose
};
})();
Exposer.first(); // Output: This is a method I want to expose!
Exposer.second(); // Output: Inside a private method!
Exposer.methodToExpose; // undefined