10 JavaScript Design Patterns: Essential Patterns for Modern Development
10 JavaScript Design Patterns: Essential Patterns for Modern Development
Singleton Pattern: Ensures a class has only one instance and provides a global access point to it.
const Singleton = (function() {
let instance;
function createInstance() {
// Constructor logic here
return {/* Singleton instance */}
}
return {
getInstance: function() {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
Module Pattern: Encapsulates private and public methods, achieving loose coupling and better maintainability.
const Module = (function() {
// Private variables and methods
let privateVariable = "private";
// Public interface
return {
publicMethod: function() {
return privateVariable;
}
};
})();
Factory Pattern: Creates objects without specifying the exact class of object that will be created.
function CarFactory() {
this.createCar = function(type) {
let car;
if (type === 'sedan') {
car = new Sedan();
} else if (type === 'suv') {
car = new SUV();
}
return car;
};
}
Observer Pattern: Defines a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.
function ObserverList() {
this.observerList = [];
}
ObserverList.prototype.add = function(obj) {
this.observerList.push(obj);
};
Decorator Pattern: Adds behavior to objects dynamically without affecting the behavior of other objects from the same class.
function Coffee() {
this.cost = function() {
return 10;
};
}
function Milk(coffee) {
this.cost = function() {
return coffee.cost() + 2;
};
}
Facade Pattern: Provides a simplified interface to a larger body of code, making it easier to use.
function VideoPlayer() {
this.play = function(video) {
// Play video logic
};
this.pause = function() {
// Pause video logic
};
}
Iterator Pattern: Provides a way to access the elements of an aggregate object sequentially without exposing its underlying representation.
function Iterator(arr) {
let index = 0;
return {
next: function() {
return index < arr.length ?
{ value: arr[index++], done: false } :
{ done: true };
}
};
}
Proxy Pattern: Provides a surrogate or placeholder for another object to control access to it.
function RealImage(url) {
this.display = function() {
// Display image logic
};
}
function ProxyImage(url) {
let realImage;
this.display = function() {
if (!realImage) {
realImage = new RealImage(url);
}
return realImage.display();
};
}
Command Pattern: Encapsulates a request as an object, thereby letting you parameterize clients with different requests, queue or log requests, and support undoable operations.
function Command(command) {
this.execute = function() {
// Execute command logic
};
}
MVC Pattern: Separates concerns among the Model, View, and Controller components for better organization and maintainability of code.
function Model(data) {
this.data = data;
this.getData = function() {
return this.data;
};
}
function View() {
this.render = function(data) {
// Render view logic
};
}
function Controller(model, view) {
this.model = model;
this.view = view;
this.init = function() {
const data = this.model.getData();
this.view.render(data);
};
}
JavaScript Array Functions Every Developer Should Know
10 Modern JavaScript ES6 Features You Should Know
10 JavaScript Design Patterns: Essential Patterns for Modern Development
