假设有一个快餐店,而我是快餐店的点餐服务员,那么我一天的工作应该是这样的:当某位客人点餐或者打来订餐电话后,我会把他的需求都写在清单上,然后交给厨房,客人不用关心的是哪些厨师帮他炒菜。我们餐厅还可以满足客人需要的定时服务,比如客人正在回家的路上,要求1个小时后才开始炒他的菜,只要订单还在,厨师就不会忘记。客人也可以很方便地打电话来撤销订单。另外如果有太多地客人点餐,厨房可以按照订单的顺序排队炒菜。

这些记录着订餐信息的清单,便是命令模式中的命令对象。

一、命令模式的用途

命令模式是最简单和优雅的模式之一,命令模式中的命令(command)指的是一个执行某些特定事情的指令。

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

拿订餐来说,客人需要向厨师发送请求,但是完全不知道这些厨师的名字和联系方式,也不知道厨师炒菜的方式和步骤。命令模式把客人订餐的请求封装成command对象,也就是订餐中的订餐对象。这个对象可以在程序中被四处传递,就像订餐可以从服务员中手中传到厨师手中。这样一来,客人不需要知道厨师的名字,从而解开了请求调用者和请求接收者之间的耦合关系。

另外,相对于过程化的请求调用,command对象拥有更长的生命周期。对象的生命周期是跟初始化请求无关的,因为这个请求已经被封装在了command对象的方法中,成为了这个对象的行为,我们可以在程序运行的任意时刻去调用这个方法,就像厨师可以在客人预定1个小时之后才能帮他炒菜,相当于程序在1个小时之后才开始执行command对象的方法。

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

假设我们正在编写一个用户界面程序,该用户界面上至少有数十个Button按钮。因为项目比较复杂,所以我们决定让某个程序员负责绘制这些按钮,而另外一些程序员则负责编写点击按钮后的具体行为,这些行为都将被封装在对象里。

命令模式的场景:

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

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

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

首先在页面中完成这些按钮的“绘制”:

<body>
<button id="button">点击按钮1</button>
<button id="button">点击按钮2</button>
<button id="button">点击按钮3</button>
</body>
<script>
var button1 = document.getElementById('button1'),
var button2 = document.getElementById('button2'),
var button3 = document.getElementById('button3'),
</script>

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

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

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

var MenuBar = {
refresh: function(){
console.log('刷新菜单目录');
}
};

var SubMenu = {
add: function(){
console.log('增加子菜单');
},
del: function(){
console.log('删除子菜单');
}
}

让button变得有勇气来之前,要先把这些行为都封装在命令类中:

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(){
console.log('删除子菜单');
}

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

var refreshMenuBarCommand = new refreshMenuBarCommand(MenuBar);
var addSubMenuCommand = new addSubMenuCommand(SubMenu);
var delSubMenuCommand = new delSubMenuCommand(SubMenu);

setCommand(button1, refreshMenuBarCommand);
setCommand(button2, addSubMenuCommand);
setCommand(button3, delSubMenuCommand);

三、JavaScript中的命令模式

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

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

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

四、撤销命令

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

撤销操作的实现一般是给命令对象增加一个名为unexecude或者undo的方法,在该方法里执行execute的反向操作。

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

五、撤销和重做

很多时候,我们需要撤销一系列的命令。比如在一个围棋程序中,现在已经下了10步棋,我们需要一次性悔棋到第5步。在这之前,我们可以把所有执行过的下棋命令都存储在一个历史列表中,然后倒序循环来依次执行这些命令的undo操作,直到循环执行到第5个命令为止。

然而,在某些情况下无法顺利地利用undo操作让对象回到execute之前的状态。比如在一个Canvas画图的程序中,画布上有一些点,我们在这些点之间画了N条曲线把这些点相互连接起来,当然这是用命令模式来实现的。但是我们却很难为这里的命令对象定义一个擦除某条曲线的undo操作,因为在Canvas画图中,擦除一条线相对不容易实现。

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

六、命令队列

在订餐的故事中,如果订单的数量过多而厨师的人手不够,则可以让这些订单进行排队处理。第一个订单完成之后,再开始执行跟第二个订单有关的操作。
队列在动画中的运用场景也非常多,比如小球运动程序有可能遇到另外一个问题:有些用户反馈,这个程序只适合于APM小于20的人群,大部分用户都有快速连续点击按钮的习惯,当用户第二次点击button的时候,此时小球的前一个动画可能尚未结束,于是前一个动画会骤然停止,小球转而开始第二个动画的运动过程。但这并不是用户的期望,用户希望这两个动画会排队进行。
把请求封装成命令对象的优点在这里再次体现了出来,对象的生命周期几乎是永久的,除非我们主动去回收它。也就是说,命令对象的生命周期跟初始请求发生的时间无关,comand对象的execute 方法可以在程序运行的任何时刻执行,即使点击按钮的请求早已发生,但我们的命令对象仍然是有生命的。
所以我们可以把div 的这些运动过程都封装成命令对象,再把它们压进一个队列堆栈,当动画执行完,也就是当前command对象的职责完成之后,会主动通知队列,此时取出正在队列中等待的第一个命令对象,并且执行它。
我们比较关注的问题是,一个动画结束后该如何通知队列。通常可以使用回调函数来通知队列,除了回调函数之外,还可以选择发布-订阅模式。即在一个动画结束后发布一个消息,订阅者接收到这个消息之后,便开始执行队列里的下一个动画。

七、宏命令

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

下面我们逐步创建一个宏命令。首先,我们依然要创建好各种Command:

var closeDoorCommand = {
execute: function(){
console.log('关门');
}
};

var openPcCommand = {
execute: function(){
console.log('开电脑');
}
};

var openQQCommand = {
execute: function(){
console.log('登录QQ');
}
};

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

var MacroCommand = function(){
return {
commandsList: [],
add: function(command){
this.commandsList.push(command);
},
execute: function(){
for(var i = 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操作。

宏命令是命令模式与组合模式的联用产物。

八、智能命令与傻瓜命令

再看一下我们上一节创建的命令:

var closeDoorCommand = {
execute: function(){
console.log('关门');
}
};

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

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

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