Related Articles
In software engineering, a design pattern is a general repeatable solution to a commonly occurring problem in software design. A design pattern isn’t a finished design that can be transformed directly into code. It is a description or template for how to solve a problem that can be used in many different situations.
There are several types of design patterns, including creational, structural, and behavioral patterns. Creational patterns deal with object creation mechanisms, trying to create objects in a manner suitable to the situation. Structural patterns deal with object composition, creating relationships between objects to form larger structures. Behavioral patterns focus on communication between objects, what goes on between objects, and how they operate together.
Some examples of design patterns include singleton, factory, and observer patterns. The singleton pattern ensures that only one instance of a class is created, providing a single point of access to that instance. The factory pattern provides a way to create objects without specifying the exact class to be created. The observer pattern allows objects to observe and be notified of changes to other objects.
Design patterns can be very useful for software developers as they provide proven solutions to common problems and can improve code quality and maintainability.
Singleton Design patterns:
A singleton is a design pattern that ensures that only one instance of a class can exist at a time. This can be useful in situations where you only want one object to manage certain resources or provide a certain service.
For example, imagine that you are building a video game and you want to have a class that keeps track of the player’s score. You only want one instance of this class to exist, so that whenever any part of the game wants to update the score, it can access the same instance of the class.
Here’s how you might implement a singleton class to track the player’s score in JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
class ScoreTracker { constructor() { this.score = 0; // This makes sure that no other instance of the ScoreTracker class can be created if (ScoreTracker.instance) { return ScoreTracker.instance; } ScoreTracker.instance = this; } getScore() { return this.score; } setScore(newScore) { this.score = newScore; } } |
To use this class, you can create an instance of the ScoreTracker class like this:
|
1 |
const scoreTracker = new ScoreTracker(); |
Now, whenever you want to access the current score, you can use the getScore() method:
|
1 |
const currentScore = scoreTracker.getScore(); |
And whenever you want to update the score, you can use the setScore() method:
|
1 |
scoreTracker.setScore(100); |
The singleton design pattern can be useful in many different situations, and it’s an important concept to understand in computer programming
Factory Design patterns:
A factory is a design pattern that allows you to create objects without specifying the exact class of object that will be created. This can be useful in situations where you want to create objects based on certain conditions, or where the objects you want to create have a lot of common behavior but also have some differences.
For example, imagine that you are building a game and you want to have different types of enemies that the player can fight. You could create a separate class for each type of enemy, but that would be a lot of work and it would make your code difficult to maintain. Instead, you could use a factory to create the enemies for you.
Here’s how you might implement a factory class to create enemies in JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
class EnemyFactory { constructor() { this.enemies = []; } createEnemy(type) { let enemy; if (type === 'goblin') { enemy = new Goblin(); } else if (type === 'orc') { enemy = new Orc(); } else if (type === 'troll') { enemy = new Troll(); } this.enemies.push(enemy); return enemy; } } |
To use this class, you can create an instance of the EnemyFactory class like this:
|
1 |
const enemyFactory = new EnemyFactory(); |
Now, whenever you want to create a new enemy, you can use the createEnemy() method and specify the type of enemy you want to create:
|
1 2 3 |
const goblin = enemyFactory.createEnemy('goblin'); const orc = enemyFactory.createEnemy('orc'); const troll = enemyFactory.createEnemy('troll'); |
Builder Design patterns:
A builder is a design pattern that allows you to create complex objects step by step, using a specific order. This can be useful in situations where the objects you want to create have many different parts or require a lot of setup before they can be used.
For example, imagine that you are building a game and you want to have different types of characters that the player can control. Each character has a name, a set of abilities, and some equipment, and you want to make it easy to create characters without having to specify all of these details every time.
Here’s how you might implement a builder class to create characters in JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
class CharacterBuilder { constructor() { this.name = ''; this.abilities = []; this.equipment = []; } setName(name) { this.name = name; return this; } addAbility(ability) { this.abilities.push(ability); return this; } addEquipment(equipment) { this.equipment.push(equipment); return this; } build() { return new Character(this); } } |
Now, you can use the setName(), addAbility(), and addEquipment() methods to specify the details of the character you want to create. Each of these methods returns the builder object, so you can chain the method calls together like this:
|
1 2 3 4 5 6 |
const character = characterBuilder .setName('Bob') .addAbility('strength') .addAbility('agility') .addEquipment('sword') .addEquipment('shield') .build(); |
Observer pattern is a way to design your software so that one object can be notified when another object changes. This is useful when you have multiple objects that need to be kept in sync with each other.
Here’s a simple example: imagine you have a weather app that shows the current temperature. The temperature is stored in an object called “WeatherData”. When the temperature changes, the app needs to update the display to show the new temperature.
Using the Observer pattern, the WeatherData object can notify the app when the temperature changes. The app can then update the display to show the new temperature.
Here’s what the code might look like:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// The WeatherData object has a method to set the temperature class WeatherData { constructor() { this.temperature = null; } setTemperature(temp) { this.temperature = temp; // Notify the observers when the temperature changes this.notifyObservers(); } } // The app is an observer that listens for changes in the WeatherData object class App { update(data) { // When the WeatherData object is updated, update the display const temp = data.temperature; console.log(`The temperature is now: ${temp}`); } } |
In JavaScript, the class keyword is used to define a new class. The constructor function is called when a new object is created from the class. The update method is called when the object is notified of a change in the WeatherData object.
Using the Observer pattern in this way allows the WeatherData and App objects to work together without knowing too much about each other. This makes it easier to modify and maintain the code.
