JavaScript设计模式中的命令模式

Posted 2023-02-28 三水草肃

命令模式

执行某些特定事情的指令

命令模式的由来其实是回调函数的一个面向对象的替代品

1. 使用方法
   命令模式的接收者被当成 command 对象的属性保存起来，同时约定执行命令的操作调用 command.execute 方法。

2. 使用场景：

   1. 需要向某些对象发送请求，但是并不知道请求的接受者是谁，也不知道被请求的操作是什么。

   const button1 = document.getElementById("btn");
   const RefreshMenuCommand = function (receiver) 
     return 
       execute: function () 
         receiver.refresh();
       ,
     ;
   ;
   
   const MenuBar = 
     refresh: function () 
       console.log("刷新菜单目录");
     ,
   ;
   
   const setCommand = function (button, command) 
     button.onclick = function () 
       command.execute();
     ;
   ;
   const refreshMenuCommand = RefreshMenuCommand(MenuBar);
   setCommand(button1, refreshMenuCommand);
   

/**
 * 宏命令是一组命令的集合，通过执行宏命令的方式，可以一次执行一批命令。例如智能家居，开门之后自动打开空调、开灯、
 */

const closeDoorCommand = 
  execute: function () 
    console.log("关门");
  ,
;

const openComputedCommand = 
  execute: function () 
    console.log("开电脑");
  ,
;

const openQQCommand = 
  execute: function () 
    console.log("登录QQ");
  ,
;

/**
 * 接下来定义宏命令 MacroCommand，它的结构也很简单，macrocommand.add方法表示把子命令添加进宏任务对象。当调用宏命令对象execute方法时，会迭代这一组子命令对象，并且依次执行execute方法
 */

const MacroCommand = function () 
  return 
    commandList: [],
    add: function (command) 
      this.commandList.push(command);
    ,
    execute: function () 
      for (let command of this.commandList) 
        command.execute();
      
    ,
  ;
;

const macroCommand = MacroCommand();
macroCommand.add(closeDoorCommand);
macroCommand.add(openComputedCommand);
macroCommand.add(openQQCommand);

macroCommand.execute();