【学习笔记javascript设计模式与开发实践（命令模式）----9】

阅读量：4157 次

发布时间：2019-05-26

本文共 9770 字，大约阅读时间需要 32 分钟。

第9章命令模式

命令模式中的命令指的是一个执行某些特定事情的指令。

最常见的应用场景：有时候需要向某些对象发送请求，但又不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。

9.2 命令模式的例子-----菜单程序

界面上有数十个按钮，因为项目比较复杂，所以我们决定让某个程序员负责绘制这些按钮，而另外一些程序员则负责点击后的具体行为，这些行为都将被封装在对象里。在大型的项目开发中，这是很正常的分工。对于绘制按钮的程序员来说，他完全不知道某个按钮将来做什么，可能用来刷新菜单界面，也可能是来增加一些子菜单，他只知道点击这个按钮会发生某些事情。那么当完成这个按钮的绘制之后，应该如何给它绑定onclick事件呢？

回忆命令模式的使用场景：

有时候需要向某些对象发送请求，但又不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系

我们很快可以找到这里运用命令模式的理由：点击了按钮之后，必须向某些负责具体行为的对象发送请求。这些对象就是请求的接收者。但目前并不知道接收者是什么对象，也不知道接收者究竟会做什么。此时我们需要借助命令对象的帮助，以便解开按钮和负责具体行为的对象间的耦合。

设计模式的主题总是把不变的事物和变化的事物分离开来，命令模式也不例外。按下按钮之后会发生一些事情是不变的，而具体会发生什么事情是可变的。通过command对象的帮助，将来我们可以轻易地改变这种关系。

画界面的同学：

[html]
 <body>  
 <button id=’buttons1’>点击按钮1</button>  
 <button id=’buttons2’>点击按钮2</button>  
 <button id=’buttons3’>点击按钮3</button>  
 <script>  
    var btn1 = document.getElementById(‘buttons1’);  
    var btn2 = document.getElementById(‘buttons2’);  
    var btn3 = document.getElementById(‘buttons3’);  
 </scrtip>  
    
 </body>  

接下来定义setCommand函数，该函数负责往按钮上面安装命令。可以肯定的是，点击按钮会执行某个command命令，执行命令的动作被约定为调用command对象的execute()方法。虽然还不知道这些命令究竟代表什么操作，但负责绘制按钮的程序员不关心这些事情，他们只需要预留好安装命令的接口。

command对象自然知道如何和正确的对象沟通：

[javascript]
 var setCommand = function(button,command){  
   button.onclick = function(){  
       command.execute();  
    }  
 }  

编写具体功能的程序员交上他们的成果，他们完成了刷新菜单界面，增加子菜单和删除子菜单这几个功能，分别放在MenuBar和SubMenu这两个对象中：

[javascript]
 var MenuBar = {  
   refresh:function(){  
     console.log(‘刷新菜单目录’);  
   }  
 };  
    
 var SubMenu = {  
  add:function(){  
      console.log(‘增加子菜单’);  
   }  
    
  del:function(){  
      console.log(‘删除子菜单’);  
   }  
 }  

在让button变得可用起来，我们需要把这些行为都封装在命令类中：

[javascript]
 var RefreshMenuBarCommand= function(receiver){  
   this.receiver = receiver;  
 }  
    
 RefreshMenuBarCommand.prototype.execute =function(){  
    this.receiver.refresh();  
 }  
    
 var AddSubMenuCommand = function(receiver){  
   this.receiver = receiver;  
 }  
    
 AddSubMenuCommand.prototype.execute = function(){  
    this.receiver.add();  
 };  
    
 var DelSubMenuCommand = function(receiver){  
   this.receiver = receiver;  
 }  
 DelSubMenuCommand.prototype.execute =function(){  
   this.receiver.del();  
 }  

最后就是把命令接收者传入到command对象中，并且把command对象安装到button上面：

[javascript]
    
 var refreshMenucmd = new RefreshMenuBarCommand(MenuBar);  
 var addSubMenucmd = new AddSubMenuCommand(SubMenu);  
 var delSubMenucmd = new DelSubMenuCommand(SubMenu);  
    
 setCommand(btn1, refreshMenucmd);  
 setCommand(btn2, addSubMenucmd);  
 setCommand(btn3, delSubMenucmd);  

9.3 javascript中的命令模式

也许我们会感到奇怪，所谓的命令模式，看起来就是给对象的某个方法取了个execute的名字。引入command对象和receiver这两个无中生有的角色无非是把简单的事情复杂化了，即使不用什么模式，以下代码也可以实现相同的功能

[javascript]
 var  bindClick = function(button,func){  
      button.onclick = func;  
 }  
    
 var MenuBar = {  
 refresh:function(){  
     console.log(‘刷新菜单目录’);  
  }  
 };  
   
 var SubMenu = {  
  add:function(){  
      console.log(‘增加子菜单’);  
   }  
    
        del:function(){  
       console.log(‘删除子菜单’);  
     }  
 }  
 bindClick(btn1,MenuBar.refresh);  
 bindClick(btn2,SubMenu.add);  
 bindClick(btn2,SubMenu.del);  

以上说法是正确的，在上上节中我们是模拟传统的面向对象语言的命令模式实现。命令模式将过程式的请求封装在command对象的execute方法里，能过封装方法调用，我们可以把运算块包装成开。command对象可以被四处传递，所以在调用命令的时候，客户Client不需要关心事情是如何进行的。

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

作为将函数作为一等对象的语言，跟策略模式一样的。早已融入到了javascript语言之中。运算块不一定要封装在command.execute方法中，也可以封闭在普通函数中。函数做为一等对象，要本身就可以被四处传递。即使我们依然需要请求“接收者”，那也未必使用面向对象的方式，闭包可以完成同样的功能。

在面向对象设计中，命令模式的接收者被当成command对象的属性保存起来，同时约定执行命令的操作调用command.execute方法。在使用闭包的命令模式实现中，接收者被封闭在闭包产生的环境中，执行命令的操作可以更加简单，仅仅执行回调函数即可。无论接收者被保存为对象的属性，还是被封闭在闭包产生的环境中，在将来执行命令的时候，接收者都能被顺利访问。用闭包实现如下：

[javascript]
 var setCommand = function(button,func){  
    button.onclick = function(){  
        func();  
    }  
 }  
 var MenuBar = {  
   refresh:function(){  
     console.log(‘刷新菜单界面’);  
    }  
 };  
    
 var RefreshMenuBarCommand = function(receiver){  
    return function(){  
       receiver.refresh();  
    }  
 }  
    
 var refreshMenuBarCommand =RefreshMenuBarCommand(menubar);  
 setCommand(btn1, refreshMenuBarCommand);  
    

当然如果想更明确地表达当前正在使用的命令模式，或者除了执行命令之外、将来有可能还要提供撤销命令等操作。我们最好还是把执行函数改为调用execute方法：

[javascript]
 var RefreshMenuBarCommand =function(receiver){  
   return {  
       execute:function(){  
          receiver.refresh();  
       }  
   }  
 }  
 var setCommand = function(button,command){  
    button.onclick =function(){  
        command.execute();  
    }  
 };  
    
 var refreshMenuBarCommand =RefreshMenuBarCommand(MenuBar);  
 setCommand(btn1, refreshMenuBarCommand);  

9.4 撤销命令

命令模式的作用不仅是封闭运算块，而且可以很方便地给命令对象增加撤销操作。就像订餐时客人可以通过电话来取消订单一样。如下看个撤销命令的例子：

我们在之前的讲策略模式时讲过一个Animate类来编写一个动画，这个动画的可以让页面上的小球移动到水平方向的某个位置。现在在页面上有一个input文本框和一个button按钮，文本框中可以输入一些数字，表示小球移动后的水平位置，小球在用户点击按钮后立刻开始移动：

[html]
 <body>  
 <div id="ball" style="position: absolute;background:#000;width: 50px;height: 50px"></div>  
 输入小球移动后的位置:<input id="pos" type="text" />  
 <button id="moveBtn">开始移动</button>  
    
 <script type="text/javascript">  
     var ball =document.getElementById('ball');  
     var pos =document.getElementById('pos');  
     var moveBtn =document.getElementById('moveBtn');  
     moveBtn.onclick =function(){  
         var animate = newAnimate(ball);  
        animate.start('left',pos.value,1000,'strongEaseOut');  
     }  
 </script>  
 </body>  

如果文本框输入200，然后点击moveBtn按钮，可以看到小球顺利地移动到水平方向200px的位置。现在我们需要一个方法让小球还原到开始移动之前的位置。当然也可以在文本框中输入-200，并且点击moveBtn按钮，这也是个办法，不过显得很笨拙。页面上最好有一个撤销按钮，点击撤销按钮之后，小球便能回到上次的位置。

在给页面中增加撤销按钮之前，先把目前的代码改为用命令模式实现。

[javascript]
 var  ball =document.getElementById(‘ball’);  
 var  pos =document.getElementById(‘pos’);  
 var  moveBtn = document.getElementById(‘moveBtn’);  
 var  MoveCommand =function(receiver,pos){  
      this.receiver = receiver;  
      this.pos = pos;  
 }  
    
    
 var MoveComand.prototype.execute = function(){  
      this.receiver.start(‘left’,this.pos,1000,’strongEaseOut’);  
 }  
 var  moveCommand;  
 moveBtn.onclick = function(){  
     var  animate = new Animate(ball);  
     moveCommand = new  MoveCommand(animate,pos.value);  
     moveCommand.execute();  
 }  

接下来增加撤销按钮：

<button id=’cancelBtn’>cancel</button><!—增加取消按钮-->

撤销操作的实现一般是给命令对象增加一个名为unexecude或者undo方法，在该方法里执行execute的反向操作。在command.execute方法让小球开始真正运动之前，我们需要先记录小球的当前位置，在unexecute或者undo操作中，再让小球回到刚刚记录下的位置。代码如下：

[html]
 <script>  
 var  ball = document.getElementById(‘ball’);  
 var  pos = document.getElementById(‘pos’);  
 var  moveBtn = document.getElementById(‘moveBtn’);  
 var  MoveCommand = function(receiver,pos){  
      this.receiver = receiver;  
      this.pos = pos;  
      this.oldPos = null;  
 }  
    
    
 var  MoveComand.prototype.execute = function(){  
      this.receiver.start(‘left’,this.pos,1000,’strongEaseOut’);  
      this.oldPos =this.receiver.dom.getBoundingClientRect()[this.receiver.propertyName];  
 }  
    
    
 MoveCommand.prototype.undo= function(){  
     this.receiver.start(‘left’,this.oldPos,1000,’strongEaseOut’);  
 }  
    
 var  moveCommand;  
 moveBtn.onclick = function(){  
     var  animate = new Animate(ball);  
     moveCommand = new  MoveCommand(animate,pos.value);  
     moveCommand.execute();  
 }  
 cancelBtn.onclick= function(){  
     moveCommand.undo();  
 }  
 </script>  

撤销是命令模式里一个非常有用的功能，试想一下开发一个围棋程序的时候，我们把每一步棋子的变化都封闭成命令，则可以轻而易举地实现悔棋功能。同样，撤销命令还可以用于实现文本编辑器的ctrl+z功能

9.5 撤销和重做

上一节我们讨论了如何撤销一个命令。很多时候，我们需要撤销一系列命令。比如在一个围棋程序中，现在已经下了10步棋，我们需要一次性悔棋到第5步。在这之前，我们可以把所有执行过的下棋命令存储在一个历史列表中，然后倒序循环来依次执行这些命令的undo操作，直到循环执行到第5个命令为止。然而，在某些情况下无法顺利地用undo操作让对象回到execute之前的状态。比如在一个Canvas画图程序中，画布上有一些点，我们在这些点之间画了n条曲线把这些点相互连接起来，当然这是用命令模式来实现的。但是我们却很难为这些命令对象定义一个擦除某条曲线的undo操作，因为在Canvas中，擦除一条线相对不容易实现。

这是时候最好的办法是先清除画布，然后把刚才执行过的命令全部重新执行一遍这一点同样可以利用一个历史列表堆栈办到。

作者编写的《版街头霸王》游戏中，命令模式可以用来实现放录像功能。原理跟Canvas画图的例子一样，我们把用户在键盘的输入都封装成命令，执行过的命令将被存放到堆栈中。播放录像的时候只需要从头开始依次执行这些命令便可：

[html]
 <html>  
   <body>  
     <button  id= ‘replay’>播放录像</button>  
   </body>  
   <script>  
       var  Ryu = {  
              attack:function(){  
                 console.log(‘攻击’);  
               },  
               defense:function(){  
                 console.log(‘防御’);  
               },  
               jump:function(){  
                 console.log(‘跳跃’);  
               },  
              crouch:function(){  
                 console.log(‘蹲下’);  
               }  
            };  
       var  commands = {  
                “119”:”jump”,//w  
                “115”:”crouch”,//s  
                “97”:”defense”,//a  
                “100”:”attack”//d  
    
             };  
      var  commandStack = []; //保存命令的堆栈  
      document.onkeypress = function(ev){  
          var  keyCode = ev.keyCode;  
          command =makeCommand(Ryu,commands[keyCode]);  
         if(command){  
            command(); //执行命令  
           commandStack.push(command);  
         }  
      }  
      document.getElementById(‘replay’).onclick= function(){  
          var command;  
          while(command=commandStack.shift()){  
              command();  
          }  
      }  
   </script>  
 </html>  

可以看到，当我们在键盘上敲下W/A/S/D这几个键来完成一些动作之后，再按下Replay按钮，此时便会重复播放之前的动作。

9.6 命令队列

在订餐的故事中，如果订单的数量过多而厨师的人手不够，则可以让这些订单进行排队处理。第一个订单完成之后，再开始执行跟第二个订单有关的操作。

队列在动画中的运用场景也非常多，比如之前的小球运动程序有可能遇到另外一个问题：有些用户反馈，当快速连续点击按钮的，此时小球的前一个动画可能尚未结束，于是前一个动画会骤然停止，小球转而开始第二个动画的运动过程。但这不是用户的期望，用户希望这两个动画会排队进行。

请示封装成命令对象的优点在这里再次体现出来，对象的生命周期几乎是永久的，除非我们主动去回收它。也就是说，命令对象的生命周期跟初始请求发生的时间无关，command对象的execute方法可以在程序运行的任何时刻执行，即使点击按钮的请求早已发生，但我们的命令对象仍然是有生命的。

所以我们可以把div的这些运动过程都封装成命令对象，再把它们压进一个队列堆栈，当动画执行完，也就是当前command对象的职责完成之后，会主动通知队列，此时取出正在队列中等待的第一个命令对象，并且执行它。

我们比较关注的问题是，一个动画结束后该如何通知队列。通常可以使用回调函数来通知队列，除了回调函数之外，还可以选择发布—订阅模式。即在一个动画结束后发布一个消息，订阅者接收到这个消息之后，便开始执行队列的一下个动画。

9.7 宏命令

宏命令是一组命令的集合，通过执行宏命令的方式，可能一次执行一批命令。想象一下，家里有一个万能遥控器，每天回家的时候，只要按一个特别的按钮，它就会帮我们关上房间门，顺便打开电脑并登录QQ。

下面我们看看如何逐步创建一个宏命令。

首先，我们依然要创建好各种command：

[javascript]
 var  closeDoorCommand = {  
     execute:function(){  
        console.log(‘关门’);  
     }  
 };  
 var  openPcCommand = {  
      execute:function(){  
         console.log(‘开电脑’);  
      }  
 };  
 var  openQQComand = {  
      execute:function(){  
         console.log(‘登录QQ’);  
      }  
 }  

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

[javascript]
 var  MacroCommand =function(){  
      return {  
         commandsList:[],  
         add:function(){  
          this.command.push(command);  
        },  
        execute:function(){  
           for(vari=0,command;command = this.commandsList[i++];){  
             command.execute();  
           }  
        }  
      }  
 };  
 var  macroCommand =MacroCommand();  
 macroCommand.add(closeDoorCommand);  
 macroCommand.add(openPcCommand);  
 macroCommand.add(openQQCommand);  
 macroCommand.execute();  

当然我们还可以为宏命令添加撤销功能，跟macroCommand.execute类似，当调用macroCommand.undo方法时，宏命令里包含的所有子命令对象要依次执行各自的undo操作。

9.8 智能命令与傻瓜命令

再看一下上节中创建的命令

[javascript]
 var closeDoorCommand = {  
  execute:function(){  
     console.log(‘关门’);  
  }  
 };  

很奇怪，closeDoorCommand中没有包含任何receiver的信息，它本身就包揽了执行请求的行为，这跟我们之前看到的命令对象都包含一个receiver是矛盾的。

一般来说，命令模式都会在command对象中保存一个接收者负责真正执行客户的请求，这种情况下的命令是“傻瓜式”的，它只负责把客户的请求转交给接收都来执行，这种模式的好处是请求发起者和请求接收者之间尽可能地得到解耦。

但是我们也可以定义一些更“聪明”的命令对象，“聪明”的命令对象可以直接实现请求，这样一来就不在需要接收者的存在，这种“聪明”的命令对象也叫作智能命令。没有接收者的智能命令，退货到和策略模式非常相近，从代码结构上已经无法分辨它们，能分辨的只有它们的意图的不同。策略模式指向的问题域更小，所有策略对象的目标总是一致的，它们只是达到这个目标的不同手段，它们的内部实现是针对“”而言的。而智能命令模式指向的问题域更广，command对象解决的目标更具发散性。命令模式还可以完成撤销、排队等功能。

转载地址：http://hgzxi.baihongyu.com/

你可能感兴趣的文章

深入入门正则表达式（java） - 命名捕获

查看>>