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
Analysis of uniapp entry-level nvue climbing pit record
Table of contents Preface Hello World image Set b...
CSS3 Bezier Curve Example: Creating Link Hover Animation Effects
We will use CSS3 animated transitions to create a...
WeChat applet component development: Visual movie seat selection function
Table of contents 1. Introduction 1. Component da...
Common causes and solutions for slow MySQL SQL statements
1. Slow query due to lack of index or invalid ind...
A comprehensive understanding of Vue.js functional components
Table of contents Preface React Functional Compon...
Sql query MySql database table name and description table field (column) information
The following is an introduction to using SQL que...
Summary of several APIs or tips in HTML5 that cannot be missed
In previous blog posts, I have been focusing on so...
Vue components dynamic components detailed explanation
Table of contents Summarize Summarize When the ar...
Detailed steps to install mysql5.7.18 on Mac
1. Tools We need two tools now: MySQL server (mys...
A detailed introduction to the Linux directory structure
When you first start learning Linux, you first ne...
Oracle deployment tutorial in Linux environment
1. Environment and related software Virtual Machi...
The perfect solution to the error of installing Mysql Applying Security in windows server2014
The reason is that it was not uninstalled cleanly...
Basic reference types of JavaScript advanced programming
Table of contents 1. Date 2. RegExp 3. Original p...
Differences between ES6 inheritance and ES5 inheritance in js
Table of contents Inheritance ES5 prototype inher...
Detailed steps to use Redis in Docker
1. Introduction This article will show you how to...