JavaScript设计模式-命令模式

概念

  命令模式是最简单和优雅的模式之一，命令模式中的命令（command）指的是一个执行某些特定事情的指令。最常见的应用场景是：有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。

描述

  拿订餐来说，客人需要向厨师发送请求，但是完全不知道这些厨师的名字和联系方式，也不知道厨师炒菜的方式和步骤。命令模式把客人订餐的请求封装成command对象，也就是订餐中的订单对象。这个对象可以在程序中被四处传递，就像订单可以从服务员手中传到厨师的手中。这样一来，客人不需要知道厨师的名字，从而解开了请求调用者和请求接收者之间的耦合关系。
  另外，相对于过程化的请求调用，command对象拥有更长的生命周期。对象的生命周期是跟初始请求无关的，因为这个请求已经被封装在了command对象的方法中，成为了这个对象的行为。可以在程序运行的任意时刻去调用这个方法，就像厨师可以在客人预定1个小时之后才帮他炒菜，相当于程序在1个小时之后才开始执行command对象的方法。除了这两点之外，命令模式还支持撤销、排队等操作。

应用

菜单程序

  假设正在编写一个用户界面程序，该用户界面上至少有数十个Button按钮。因为项目比较复杂，所以决定让某个程序员负责绘制这些按钮，而另外一些程序员则负责编写点击按钮后的具体行为，这些行为都将被封装在对象里。
  在大型项目开发中，这是很正常的分工。对于绘制按钮的程序员来说，他完全不知道某个按钮未来将用来做什么，可能用来刷新菜单界面，也可能用来增加一些子菜单，他只知道点击这个按钮会发生某些事情。那么当完成这个按钮的绘制之后，应该如何给它绑定onclick事件呢？
  很快可以找到在这里运用命令模式的理由：点击了按钮之后，必须向某些负责具体行为的对象发送请求，这些对象就是请求的接收者。但是目前并不知道接收者是什么对象，也不知道接收者究竟会做什么。此时需要借助命令对象的帮助，以便解开按钮和负责具体行为对象之间的耦合。
  设计模式的主题总是把不变的事物和变化的事物分离开来，命令模式也不例外。按下按钮之后会发生一些事情是不变的，而具体会发生什么事情是可变的。通过command对象的帮助，将来可以轻易地改变这种关联，因此也可以在将来再次改变按钮的行为。
  首先在页面中完成这些按钮的“绘制”：

点击按钮1
点击按钮2
点击按钮3

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

let setCommand = function( button, command ){
    button.onclick = function(){
        command.execute();
    }
}

  最后，负责编写点击按钮之后的具体行为的程序员完成了刷新菜单界面、增加子菜单和删除子菜单这几个功能，这几个功能被分布在MenuBar和SubMenu这两个对象中：

let MenuBar = {
    refresh: function(){
        console.log( '刷新菜单目录' )
    }
}
let SubMenu = {
    add: function(){
        console.log( '增加子菜单' )
    },
    del: function(){
        console.log( '删除子菜单' )
    }
}

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

let RefreshMenuBarCommand = function( receiver ){
    this.receiver = receiver
}
RefreshMenuBarCommand.prototype.execute = function(){
    this.receiver.refresh()
}
let AddSubMenuCommand = function( receiver ){
    this.receiver = receiver
}

AddSubMenuCommand.prototype.execute = function(){
    this.receiver.add()
}
let DelSubMenuCommand = function( receiver ){
    this.receiver = receiver
}
DelSubMenuCommand.prototype.execute = function(){
    this.receiver.del()
}

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

let refreshMenuBarCommand = new RefreshMenuBarCommand( MenuBar )
let addSubMenuCommand = new AddSubMenuCommand( SubMenu )
let delSubMenuCommand = new DelSubMenuCommand( SubMenu )
setCommand( button1, refreshMenuBarCommand )
setCommand( button2, addSubMenuCommand )
setCommand( button3, delSubMenuCommand )

撤销和重做

  命令模式的作用不仅是封装运算块，而且可以很方便地给命令对象增加撤销操作。就像订餐时客人可以通过电话来取消订单一样。
  撤销操作的实现一般是给命令对象增加一个名为unexecute或者undo的方法，在该方法里执行execute的反向操作。在command.execute方法让小球开始真正运动之前，需要先记录小球的当前位置，在unexecute或者undo操作中，再让小球回到刚刚记录下的位置。
  撤销是命令模式里一个非常有用的功能，试想一下开发一个围棋程序的时候，把每一步棋子的变化都封装成命令，则可以轻而易举地实现悔棋功能。同样，撤销命令还可以用于实现文本编辑器的Ctrl+Z功能。
  很多时候，需要撤销一系列的命令。比如在一个围棋程序中，现在已经下了10步棋，需要一次性悔棋到第5步。在这之前，可以把所有执行过的下棋命令都储存在一个历史列表中，然后倒序循环来依次执行这些命令的undo操作，直到循环执行到第5个命令为止。
  然而，在某些情况下无法顺利地利用undo操作让对象回到execute之前的状态。比如在一个Canvas画图的程序中，画布上有一些点，在这些点之间画了N条曲线把这些点相互连接起来，当然这是用命令模式来实现的。但是却很难为这里的命令对象定义一个擦除某条曲线的undo操作，因为在Canvas画图中，擦除一条线相对不容易实现。这时候最好的办法是先清除画布，然后把刚才执行过的命令全部重新执行一遍，这一点同样可以利用一个历史列表堆栈办到。记录命令日志，然后重复执行它们，这是逆转不可逆命令的一个好办法。
  在HTML5版的动作游戏中，命令模式可以用来实现播放录像功能。原理跟Canvas画图的例子一样，把用户在键盘的输入都封装成命令，执行过的命令将被存放到堆栈中。播放录像的时候只需要从头开始依次执行这些命令便可，代码如下：

    
    


播放录像

小结

  命令模式的优点：
  第一，它能较容易地设计一个命令队列；第二，在需要的情况下，可以较容易地将命令记入日志；第三，允许接受请求的一方决定是否要否决请求；第四，可以容易地实现对请求的撤销和重做；第五，由于加进新的命令类不影响其他类，因此增加新的具体命令类很容易；还有最关键的优点，命令模式把请求一个操作的对象与知道怎么执行一个操作的对象分割开。
  那我们碰到类似情况就一定要实现命令模式吗？敏捷开发原则告诉我们，不要为代码添加给予猜测的，实际不需要的功能。如果不清楚一个系统是否需要命令模式，一般就不要着急去实现它，事实上，在需要的时候通过重构实现这个模式并不困难。

参考文献

《JavaScript设计模式与开发实践》