JavaScript Design Pattern Command Pattern

The command pattern is a behavioral design pattern in JavaScript design patterns;

Definition: Send a request to some object, but don't know what the specific operation is, so we want to design the program in a loosely coupled way so that the request sender and the receiver can eliminate the coupling relationship between each other; and our loose coupling method is the command pattern;

Plain language explanation: If you are the team leader of your company's R&D department, and your leader assigns you a task, you take a quick look and find that very simple requirements are relatively easy to implement; and as a team leader, you will definitely have a lot of things to do every day, so you are prepared to throw the requirements directly to the team members to develop and implement; the leader does not care whether it is you who does it or who you ask to do it, the leader only wants the final results! Here the leader is the issuer of the order, and you are the receiver of the order;

Code implementation:

<!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>
        <button id="button1">Publish command to front end</button>
        <button id="button2">Publish command to the backend</button>
</body>
<script>

    var button1 = document.getElementById("button1");
    var button2 = document.getElementById("button2");
    //Define command var command = function(Executor,func){
        Executor.onclick = func;
    }
    // Define leader var Leader = {};
    
    Leader.teamleader = {
        web:function(){
            console.log("The front end will be completed soon");
        },
        java:function(){    
            console.log("Background will be completed soon")
        }
    }

    command(button1,Leader.teamleader.web);
    command(button2,Leader.teamleader.java);
</script>
</html>

Running results:

Here, the command object is defined as a method to perform different tasks according to the parameters. When you click different buttons, different commands are executed;

Macros:

A macro command is a collection of commands. By executing macro commands, a batch of commands can be executed at one time.

Computer startup items: Many software now have default startup items added to the computer startup, which means that certain specific software will be started by default after our computer is turned on; this is a scenario of macro commands;

var QQCommand = {
    execute:function(){
        console.log("self-starting QQ successfully");
    }
}

var weChatCommand = {
    execute:function(){
        console.log("WeChat started successfully");
    }
}

var MacroCommand = function(){
    return {
        list:[],
        add:function(command){
            this.list.push(command);
        },
        execute:function(){
            for(var i = 0,command;command = this.list[i++];){
                command.execute();
            }
        }
    }
}

var macroCommand = MacroCommand();
macroCommand.add(QQCommand);
macroCommand.add(weChatCommand);
macroCommand.excute();

In the above code, we define a list array in the macro command object, and then add it to the execution queue through the add method. The so-called execution queue is the list array. Then we execute the commands in sequence through a loop, which generates our macro command, and starts multiple tasks with one command.

The command mode actually defines a command object. The request publisher passes in parameters in a parameterized form to perform specific operations, thereby decoupling the request publisher and the receiver.

Final words:

This series of articles covers ten commonly used JavaScript design patterns. I have referred to a lot of information and combined it with my own understanding to explain it to you in the most understandable way. Due to my limited level and energy, please point out any misunderstandings in time. The design pattern series of articles will be put on hold for the time being and will be supplemented later. Next month, I will start to prepare to systematically study ES6 and complete the ES6 series of articles.

The above is the details of the command pattern of JavaScript design pattern. For more information about JavaScript design pattern, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

JavaScript Design Patterns – Command Pattern Principles and Usage Example Analysis
JavaScript design pattern command pattern example analysis
Analysis of the concept and usage of command mode in JS design pattern
JavaScript design pattern classic command pattern
In-depth understanding of JavaScript series (34): Detailed explanation of the command mode of design pattern
JavaScript design pattern command mode

<<: Using vsftp to build an FTP server under Linux (with parameter description)

>>: MySQL million-level data paging query optimization solution

JavaScript Design Pattern Command Pattern

Linux file management command example analysis [permissions, create, delete, copy, move, search, etc.]

A brief discussion on React Component life cycle functions

An article to solve the echarts map carousel highlight

Analysis of slow insert cases caused by large transactions in MySQL

Installation of mysql5.7 and implementation process of long-term free use of Navicate

React event binding details

A simple way to put HTML footer at the bottom of the page

Detailed tutorial for downloading and installing mysql8.0.21

MYSQL updatexml() function error injection analysis

How to configure eureka in docker

Recommend

How to redirect to https through nginx load balancing

64-bit CentOs7 source code installation mysql-5.6.35 process sharing

Discussion on style customization and browser compatibility issues when using input element [type="file"]

Several scenarios for using the Nginx Rewrite module

Introduction and usage summary of React-Native screenshot component react-native-view-shot

Detailed explanation of the use of Linux lseek function

Docker installs Redis and introduces the visual client for operation

How to force vertical screen on mobile pages

HTML table markup tutorial (39): The bright border color attribute of the header BORDERCOLORLIGHT

Analysis and solution of a.getAttribute(href,2) problem in IE6/7

Docker container monitoring principle and cAdvisor installation and usage instructions

How to change the encoding to utf-8 in mysql version 5.7 under windows

Detailed explanation of the use of HTML header tags

The difference between MySQL database stored procedures and transactions

XHTML Tutorial: The Difference Between Transitional and Strict