Command Pattern
With the Command Pattern, we can decouple objects that execute a certain task from the object that calls the method.
Let's say we have an online food delivery platform. Users can place, track, and cancel orders.
When to Use
- Use this when you need to decouple the object invoking an operation from the object performing it
- This is helpful when commands need a certain lifespan or should be queued and executed at specific times
Instructions
- Create a Command class with an method that encapsulates the action
- Replace direct method calls with command objects passed to a single method on the manager
- Use this pattern sparingly as it can add unnecessary boilerplate in simpler JavaScript applications
Details
js
class OrderManager() {
constructor() {
this.orders = []
}
placeOrder(order, id) {
this.orders.push(id)
return `You have successfully ordered ${order} (${id})`;
}
trackOrder(id) {
return `Your order ${id} will arrive in 20 minutes.`
}
cancelOrder(id) {
this.orders = this.orders.filter(order => order.id !== id)
return `You have canceled your order ${id}`
}
}
On the
class, we have access to the
,
and
methods. It would be totally valid JavaScript to just use these methods directly!
js
const manager = new OrderManager();
manager.placeOrder("Pad Thai", "1234");
manager.trackOrder("1234");
manager.cancelOrder("1234");
However, there are downsides to invoking the methods directly on the
instance. It could happen that we decide to rename certain methods later on, or the functionality of the methods change.
Say that instead of calling it
, we now rename it to
! This would mean that we would have to make sure that we don't call the
method anywhere in our codebase, which could be very tricky in larger applications. Instead, we want to decouple the methods from the
object, and create separate command functions for each command!
Let's refactor the
class: instead of having the
,
and
methods, it will have one single method:
. This method will execute any command it's given.
Each command should have access to the
of the manager, which we'll pass as its first argument.
js
class OrderManager {
constructor() {
this.orders = [];
}
execute(command, ...args) {
return command.execute(this.orders, ...args);
}
}
We need to create three
s for the order manager:
js
class Command {
constructor(execute) {
this.execute = execute;
}
}
function PlaceOrderCommand(order, id) {
return new Command((orders) => {
orders.push(id);
return `You have successfully ordered ${order} (${id})`;
});
}
function CancelOrderCommand(id) {
return new Command((orders) => {
orders = orders.filter((order) => order.id !== id);
return `You have canceled your order ${id}`;
});
}
function TrackOrderCommand(id) {
return new Command(() => `Your order ${id} will arrive in 20 minutes.`);
}
Perfect! Instead of having the methods directly coupled to the
instance, they're now separate, decoupled functions that we can invoke through the
method that's available on the
.
Pros
The command pattern allows us to decouple methods from the object that executes the operation. It gives you more control if you're dealing with commands that have a certain lifespan, or commands that should be queued and executed at specific times.
Cons
The use cases for the command pattern are quite limited, and often adds unnecessary boilerplate to an application.
Source
References
- Command Design Pattern - SourceMaking
- Command Pattern - Refactoring Guru
- Command Pattern - Carlos Caballero