concept

Encapsulate the request as an object to decouple the coupling between the command receiver and the initiator. The command is passed to the receiver in the execution object before execution.Copy the code

purpose

  • Mutual decoupling (that is, decoupling the coupling between the initiator and the receiver)

The characteristics of

  • Initiator: just issue the call command. It is not clear how and who will execute it
  • Receiver: There are corresponding interfaces to handle different commands. What is the command and who issued it
  • Command object: the initiator and receiver are separated, and a bridge is needed between them. This is the command object. The command object accepts the call from the sender and then invokes the corresponding interface of the receiver. (A command in command mode is an instruction to do something specific.)

As shown in figure

It means that the originator doesn't need to know who the recipient is, how it's executed, how it's done, the originator just issues the command and the receiver doesn't need to know who the originator is, why it's issued, he just receives the object of the command, rightCopy the code

Life examples

  • Patients with a
The front end has developed the page, need to carry out the data interface, and then the back end directly to an interface document to the front end, so the front end does not need to find the back end, also do not need to know which back-end development of these interfaces, they can press the development document for development (hey hey... The premise is that the back-end interface document is clearly defined), here the interface document is actually equivalent to the command object, the back-end and the front-end are separated, it receives the back-end interface, and then sent to the front-end interface callCopy the code
  • Example 2

If you don’t understand, here’s an excerpt from <<JavaScript Design Patterns and Development practices >>

Suppose there is a fast food restaurant, and I am the ordering waiter in the restaurant. My day would be like this: When a customer places his order or calls, I will write down the list of his needs and hand it to the kitchen. The customer does not care which chef cooks the food for him. Our restaurant can also meet customers' needs for scheduled services. For example, a customer may be on his way home and ask to cook his dishes after 1 hour. As long as the order is still there, the chef will not forget it. Guests can also easily call to cancel the order. In addition, if there are too many guests ordering, the kitchen can queue up to cook dishes according to the order. These lists of ordering information are command objects in command mode.Copy the code

The instance

For example, when a button is clicked, the publisher sends a command and then notifies the receiver to do the work

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p id="number">0</p>
    <button id="addBtn">+</button>
</body>
<script>
    let number = document.getElementById("number"); / / the recipientlet worker = {
        add() {letoldVal = isNaN(number.innerHTML)? InnerHTML = oldVal+1}} class AddCommand{constructor(recevier){ this.recevier = recevier }execute(){
            this.recevier .add()
        }
    }
    letAddCommand = new addCommand (worker) // Document.getelementById ("addBtn").addEventListener("click",()=>addCommand.execute())
</script>
</html>
Copy the code