JavaScript Design Pattern
OMKESH B. KENDRE ??
const OMKESH = { "JSExpert" : [ "React" , "Angular", "Vue", "AngularJS" ] } ;
History of Design Pattern
Programming?patterns?have?been around?ever?since?they?were created. But?they?were?not formalized?until?1994?when?an?influential?textbook?called?"Design Patterns: Elements Of Reusable Object-Oriented Software "?was released. This book was?written by?four composers -?Erich Gamma , Richard Helm , Ralph Johnson , and John Vlissides? -?which?became known as the Gang of Four (GoF).
What is a Design Pattern?
As the name implies,?a pattern is a?way?to?solve?a?common?software?problem?-?or?in our case,?writing JavaScript web applications. Another way?to?think?of?patterns?is?as templates for?figuring out?how?to?solve problems - ones?that?can be used in quite a few different?circumstances.
Now, if you are wondering how a pattern?is?discovered, it's?easy. When the same solution?is?repeated over and over?again, someone will?recognize it,?name?it, and then describe?it?in detail. A pattern?is?discovered?in that way.?They?weren't?forged overnight.
23 design patterns in three categories
There are 23 object-oriented design patterns. Since then, the "pattern approach" has become popular in the software engineering industry, and dozens of more patterns have been discovered since.
Three?categories of?design patterns are?distinguished,?as?follows:
Creational Design Patterns
Structural Design Patterns
领英推荐
Behavioral Design Patterns
Javascript's most common design patterns
Prototype Design pattern: A prototype pattern is based on prototypical inheritance, where objects are built to be prototypes for other objects. As a matter of fact, prototypes serve as blueprints for the objects built by constructors.
var var myCar= {
name:"Ford",
brake:function(){
console.log("Stop! I am applying brakes");
},
Panic : function (){
console.log ( "wait. how do you stop thuis thing?")
}
}
var yourCar= object.create(myCar);
console.log (yourCar.name);
Singleton Design Pattern: It is essential when one instance of an object is needed, for example, when a database connection is necessary. A new instance can only be created when the connection is closed or you close the existing instance before opening a new one.?This pattern is also known as the strict pattern, one disadvantage is that it is difficult to test due to its hidden dependencies that cannot easily be isolated.
function DatabaseConnection () {
let databaseInstance = null;
let count = 0;
function init() {
console.log(`Opening database #${count + 1}`);
}
function createIntance() {
if(databaseInstance == null) {
databaseInstance = init();
}
return databaseInstance;
}
function closeIntance() {
console.log('closing database');
databaseInstance = null;
}
return {
open: createIntance,
close: closeIntance
}
}
const database = DatabseConnection();
database.open();
database.open();
database.open();
database.close();
Factory Design Pattern: It is a creational concerned with the creation of objects without the need for a constructor. It provides a generic interface for creating objects, where we can specify the type of factory objects to be created. The factory, therefore, creates and returns the object for us to use after we specify the object. The factory pattern is useful when the object component set up is highly complex and when we need to create multiple instances of an object depending on the environment. Additionally, factory patterns can be used when working with many small objects that share the same properties and when composing objects that need to be decoupled.
DealerA = {};
DealerA.title = function title() {
return "Dealer A";
};
DealerA.pay = function pay(amount) {
console.log(
`set up configuration using username: ${this.username} and password: ${
this.password
}`
);
return `Payment for service ${amount} is successful using ${this.title()}`;
};
DealerB = {};
DealerB.title = function title() {
return "Dealer B";
};
DealerB.pay = function pay(amount) {
console.log(
`set up configuration using username: ${this.username}
and password: ${this.password}`
);
return `Payment for service ${amount} is successful using ${this.title()}`;
};
function DealerFactory(DealerOption, config = {}) {
const dealer = Object.create(dealerOption);
Object.assign(dealer, config);
return dealer;
}
const dealerFactory = DealerFactory(DealerA, {
username: "user",
password: "pass"
});
console.log(dealerFactory.title());
console.log(dealerFactory.pay(12));
const dealerFactory2 = DealerFactory(DealerB, {
username: "user2",
password: "pass2"
});
console.log(dealerFactory2.title());
console.log(dealerFactory2.pay(50));
Happy codding :)