Command mode application scenario:
Sometimes it is necessary to send a request to certain objects, but you do not know who the requested recipient is, nor what the requested operation is. At this time, it is hoped to design the software in a loosely coupled way so that the request sender and the request recipient can eliminate the coupling relationship between each other.
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js：Command Mode</title>
<script type="text/javascript" src=""></script>
</head>
<style type="text/css">
button{
margin: 5px;
border: 0;
width: 70px;
height: 35px;
background: #6B78BF;
color: white;
font-size: 14px;
font-family: "Microsoft Yahei";
cursor: pointer;
}
#textarea{
margin: 5px;
width: 400px;
height: 200px;
resize: none;
color: #666;
font-size: 14px;
border: 2px solid #6B78BF;
}
</style>
<body>
<button >refresh</button>
<button >New</button>
<button >delete</button>
<br/>
<textarea >
This is the preset content
</textarea>
</body>
</html>
js code:
// Use example in the page: setCommand( button1, refreshMenuBarCommand); to send command
// The setCommand function is responsible for installing commands on the button and reserves the interface for installing commands.var setCommand = function( button , command ){
= function(){
();
}
}
// Specific behavior after writing button clicks: refresh the menu interface, add submenu and delete submenuvar MenuBar = {
refresh: function(){
var cur_date = new Date();
("textarea").value+=cur_date.toLocaleString()+"Refresh menu directory\r";
}
}
var SubMenu = {
add: function(){
var cur_date = new Date();
("textarea").value+=cur_date.toLocaleString()+"Add menu directory\r";
},
del: function(){
var cur_date = new Date();
("textarea").value+=cur_date.toLocaleString()+"Delete submenu\r";
}
}
//Embroidery behavior in command classvar RefreshMenuBarCommand = function( receiver ){
= receiver;
}
= function(){
();
}
var AddSubMenuCommand = function( receiver ){
= receiver;
}
= function(){
();
}
var DelSubMenuCommand = function( receiver ){
=receiver
}
= function(){
();
}
//The command recipient passes it to the command objectvar refreshMenuBarCommand = new RefreshMenuBarCommand( MenuBar );
var addSubMenuCommand = new AddSubMenuCommand( SubMenu );
var delSubMenuCommand = new DelSubMenuCommand( SubMenu );
= function(){
//Installing the command object on the button var button1 = ("button1");
var button2 = ("button2");
var button3 = ("button3");
setCommand( button1, refreshMenuBarCommand );
setCommand( button2, addSubMenuCommand );
setCommand( button3, delSubMenuCommand );
}
Summarize:
There are many mistakes in the process of copying code from the book. The most serious thing is that the word "receiver" is written incorrectly, resulting in not reading this exercise for many days. The error process allows me to re-examine the content of the code and understand and debug line by line. Although I still don’t understand the command mode very well, through this part of the content and mySQL learning, I have left a faint shadow about the command mode in my mind.
refer to:
"JavaScript Design Patterns and Development Practice" Chapter 9 Section 9.2
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.