JS Command mode example of the menu program _javascript skills

Application Scenarios for Command mode:

Sometimes you need to send a request to some object, but do not know who the recipient of the request is, or what the requested operation is, and you want to design the software in a loosely coupled way so that the sender of the request and the requesting recipient can eliminate the coupling between them.

HTML code:

<! DOCTYPE html>
 
 

JS Code:

Using the example in the page: SetCommand (button1, Refreshmenubarcommand); To send a command//SetCommand function to install the command on the button, reserve the interface for the installation command var SetCommand = f
 Unction (button, command) {Button.onclick = function () {Command.Execute ();
 ///write Click button after the specific behavior: Refresh menu interface, Add submenu and delete submenu var MenuBar = {refresh:function () {var cur_date = new Date ();
 document.getElementById ("textarea"). Value+=cur_date.tolocalestring () + "Refresh Menu directory \ r";
 } var submenu = {Add:function () {var cur_date = new Date ();
 document.getElementById ("textarea"). Value+=cur_date.tolocalestring () + "Add menu directory \ r";
 }, Del:function () {var cur_date = new Date ();
 document.getElementById ("textarea"). Value+=cur_date.tolocalestring () + "Delete submenu \ r";

}//encapsulation behavior in the command class var refreshmenubarcommand = function (receiver) {this.receiver = receiver; } RefreshMenuBarCommand.prototype.execute = function () {This.receiver.refresh ();} var addsubmenucommand = function (rec
Eiver) {this.receiver = receiver;} AddSubMenuCommand.prototype.execute = function () {this.receiver.add ();
var delsubmenucommand = function (receiver) {this.receiver =receiver} DelSubMenuCommand.prototype.execute = function

() {This.receiver.del ();}
The command recipient is passed into the command object var refreshmenubarcommand = new Refreshmenubarcommand (MenuBar);
var addsubmenucommand = new Addsubmenucommand (submenu);

var delsubmenucommand = new Delsubmenucommand (submenu);
 Window.onload = function () {//Install Command object to button above var button1 = document.getElementById ("button1");
 var button2 = document.getElementById ("Button2");
 var button3 = document.getElementById ("Button3");
 SetCommand (button1, Refreshmenubarcommand);
 SetCommand (Button2, Addsubmenucommand);
SetCommand (Button3, Delsubmenucommand);
 }

Summarize:

Copy code from the book to practice the process of a lot of mistakes, the most serious than "receiver" this word is wrong to write a lot of days have not seen this exercise, the process of error so that I can re-examine the content of the code, line to understand and debug. Although still not very understanding command mode, but through this part of the content and the study of MySQL, the heart of the faint left about the shadow of the command mode.

Reference:

"JavaScript design pattern and Development Practice" 9th Chapter 9.2

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.