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:
|
<<: Using vsftp to build an FTP server under Linux (with parameter description)
>>: MySQL million-level data paging query optimization solution
Recommend
Detailed explanation of mysql transaction management operations
This article describes the MySQL transaction mana...
How to compile and install xdebug in Ubuntu environment
This article describes how to compile and install...
Three common methods for HTML pages to automatically jump after 3 seconds
In practice, we often encounter a problem: how to...
A brief analysis of the problem of mysql being inaccessible when deployed with docker-compose
What is Docker-Compose The Compose project origin...
Tips for organizing strings in Linux
In Linux operations, we often replace and count s...
Forty-nine JavaScript tips and tricks
Table of contents 1. Operation of js integer 2. R...
Do you know how to use mock in vue project?
Table of contents first step: The second step is ...
Problems and solutions when installing MySQL8.0.13 on Win10 system
Operating system: Window10 MySQL version: 8.0.13-...
Front-end JavaScript housekeeper package.json
Table of contents 1. Required attributes 1. name ...
MySQL 8.0.20 installation and configuration tutorial under Win10
MySQL 8.0.20 installation and configuration super...
The difference between html block-level tags and inline tags
1. Block-level element: refers to the ability to e...
10 tips for designing useful, easy-to-use web applications
Here are 10 tips on how to design better-usable w...
Detailed explanation of the principles and implementation methods of Mysql account management
This article uses examples to illustrate the prin...
Tutorial on customizing rpm packages and building yum repositories for Centos
1 Keep the rpm package downloaded when yum instal...
Steps for installing MySQL 8.0.16 on Windows and solutions to errors
1. Introduction: I think the changes after mysql8...