Command mode

Command is a behavioral pattern.

Intent: Encapsulate a request as an object that allows you to parameterize customers with different requests, queue or log requests, and support undoable operations.

For example,

If you don’t understand the above description, it doesn’t matter. Design patterns need to be used in daily work. Examples will help you understand better.

Ordering is command mode

Why would a customer ask a waiter to order instead of rushing to the back and watching the chef cook? Because cooking is slow, there will definitely be queuing phenomenon, and some dishes may be more efficient to cook together, so it is easier to control the overall efficiency by separating ordering and cooking.

In fact, this social phenomenon corresponds to the command mode in the field of programming: ordering is one request after another, and the menu recorded by the orderer is the object generated by the request. The orderer does not need to care about how to cook and who will do it. He only needs to transmit the menu to the kitchen, and the kitchen arranges the menu uniformly.

Operation menus for large software systems

One of the characteristics of large software operating systems is that the software is very complex and there are many menu buttons. However, the menu button itself has no business logic, so the business behavior triggered by the menu button click is not suitable for the menu button to complete. At this time, the command mode can be used to generate one or a series of instructions, which are really executed by the implementation part of the software system.

Browser request queuing

Browser requests are not only queued, but also cancelled and retried, thus a typical command mode scenario. If window.fetch cannot be serialized into a queue, the request cannot be queued, cancelled, or retried.

Intention to explain

Intent: Encapsulate a request as an object that allows you to parameterize customers with different requests, queue or log requests, and support undoable operations.

A request is an action from the client, such as a menu button click. The point is that the click is not implemented directly, but encapsulates the request as an object, which can be understood as implemented directly:

function onClick() {
  / /... Balabala implements the logic
}
Copy the code

Serialize the request instead by generating an object:

function onClick() {
  concreteCommand.push({
    / /... Describe the request
  })
  // Execute all command queues
  concreteCommand.executeAll()
}
Copy the code

This may seem a bit tedious, but it has the benefit of “allowing you to parameterize clients with different requests”, meaning that any request can be parameterized and stored, which we can call at any time. This is equivalent to knowing the execution timing, can be called at any time to achieve queuing or logging, if the reverse operation information is recorded, can achieve undo redo.

chart

Command is an interface for commands. Generally, there is a execute method.

ConcreteCommand is an implementation of the command interface that injects Receiver, which implements the execute method that calls Receiver. Execute.

Invoker is the Command that executes the request. In fact, it is pushing the Command, but it is not actually executing. If the queue ends or the undo redo is clicked, the Invoker is triggered and the corresponding Command is invoked.

The code example

The following example is written in typescript.

First look at the final execution state, the final execution needs to add the command first, then execute the command:

const command1 = new Command('balabala1')
const command2 = new Command('balabala2')

const invoker = new Invoker()
invoker.push(command1)
invoker.push(command2)
invoker.execute()
Copy the code

The Invoker is internally maintained by a queue, which executes each command-.execute () for loop:

class Invoker {
  push(command) {
    // Push the command into the queue
    this.commands.push(command)
  }

  execute() {
    this.commands.forEach(command= > command.execute())
    // Don't forget to empty this.commands}}Copy the code

disadvantages

The command mode needs to pay attention to the serialization size, which is generally divided into:

1. Only the operations are logged.
2. Example Record a full snapshot.
3. Full snapshot shared memory.

Recording operation is a more refined management mode, and can be extended to the collaborative editing function. In collaborative editing scenarios, the snapshot mode cannot be used because conflicts cannot be handled for snapshots.

Also, identify scenarios where command mode is not necessary. For most front-end scenarios without undo redo, command mode is not required.

conclusion

The command pattern, which essentially abstracts operations into serializable commands so that they can be executed at the appropriate time, brings many additional benefits.

Command mode can achieve high cohesion and low coupling, improve code maintainability, and realize functional requirements such as undo redo and collaborative editing.

Close reading design Pattern-Command · Issue #295 · dT-fe /weekly

If you’d like to participate in the discussion, pleaseClick here to, with a new theme every week, released on weekends or Mondays. Front end Intensive Reading – Helps you filter the right content.

Pay attention to the front end of intensive reading wechat public account

Copyright Notice: Freely reproduced – Non-commercial – Non-derivative – Remain signed (Creative Commons 3.0 License)