摘自《JavaScript设计模式与开发实践》
命令模式是最简单和优雅的模式之一，命令模式中的命令（command）指的是一个执行某些特定事情的指令。命令模式最常见的应用场景是：有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。
命令模式的例子——菜单程序
假设我们正在编写一个用户界面程序，该用户界面上至少有数十个 Button 按钮。因为项目比较复杂，所以我们决定让某个程序员负责绘制这些按钮，而另外一些程序员则负责编写点击按钮后的具体行为，这些行为都将被封装在对象里。
有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么，此时希望用一种松耦合的方式来设计软件，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。
我们很快可以找到在这里运用命令模式的理由：点击了按钮之后，必须向某些负责具体行为的对象发送请求，这些对象就是请求的接收者。但是目前并不知道接收者是什么对象，也不知道接收者究竟会做什么。此时我们需要借助命令对象的帮助，以便解开按钮和负责具体行为对象之间的耦合。
下面进入代码编写阶段，首先在页面中完成这些按钮的“绘制”：
<body>
<button id="button1">点击按钮 1</button>
<button id="button2">点击按钮 2</button>
<button id="button3">点击按钮 3</button>
</body>
<script>
const button1 = document.getElementById('button1')
const button2 = document.getElementById('button2')
const button3 = document.getElementById('button3')
</script>
接下来定义 setCommand 函数， setCommand 函数负责往按钮上面安装命令。可以肯定的是，点击按钮会执行某个 command 命令，执行命令的动作被约定为调用 command 对象的 execute() 方法。虽然还不知道这些命令究竟代表什么操作，但负责绘制按钮的程序员不关心这些事情，他只需要预留好安装命令的接口， command 对象自然知道如何和正确的对象沟通：
const setCommand = function(button, command) {
button.onclick = function() {
command.execute()
}
}
最后，负责编写点击按钮之后的具体行为的程序员总算交上了他们的成果，他们完成了刷新菜单界面、增加子菜单和删除子菜单这几个功能，这几个功能被分布在 MenuBar 和 SubMenu 这两个对象中：
const MenuBar = {
refresh: function () {
console.log('刷新菜单目录')
}
}
const SubMenu = {
add: function () {
console.log('增加子菜单')
},
del: function () {
console.log('删除子菜单')
}
}
在让 button 变得有用起来之前，我们要先把这些行为都封装在命令类中：
const RefreshMenuBarCommand = function (receiver) {
this.receiver = receiver
}
RefreshMenuBarCommand.prototype.execute = function () {
this.receiver.refresh()
}
const AddSubMenuCommand = function (receiver) {
this.receiver = receiver
}
AddSubMenuCommand.prototype.execute = function () {
this.receiver.add()
}
const DelSubMenuCommand = function (receiver) {
this.receiver = receiver
}
DelSubMenuCommand.prototype.execute = function () {
console.log('删除子菜单')
}
最后就是把命令接收者传入到 command 对象中，并且把command 对象安装到 button 上面：
const refreshMenuBarCommand = new RefreshMenuBarCommand(MenuBar)
const addSubMenuCommand = new AddSubMenuCommand(SubMenu)
const delSubMenuCommand = new DelSubMenuCommand(SubMenu)
setCommand(button1, refreshMenuBarCommand)
setCommand(button2, addSubMenuCommand)
setCommand(button3, delSubMenuCommand)
以上只是一个很简单的命令模式示例，但从中可以看到我们是如何把请求发送者和请求接收者解耦开的。
JavaScript 中的命令模式
也许我们会感到很奇怪，所谓的命令模式，看起来就是给对象的某个方法取了 execute 的名字。引入 command 对象和 receiver 这两个无中生有的角色无非是把简单的事情复杂化了，即使不用什么模式，用下面代码就可以实现相同的功能：
const bindClick = function (button, func) {
button.onclick = func
}
const MenuBar = {
refresh: function () {
console.log('刷新菜单界面')
}
}
const SubMenu = {
add: function () {
console.log('增加子菜单')
},
del: function () {
console.log('删除子菜单')
}
}
bindClick(button1, MenuBar.refresh)
bindClick(button2, SubMenu.add)
bindClick(button3, SubMenu.del)
在使用闭包的命令模式实现中，接收者被封闭在闭包产生的环境中，执行命令的操作可以更加简单，仅仅执行回调函数即可。无论接收者被保存为对象的属性，还是被封闭在闭包产生的环境中，在将来执行命令的时候，接收者都能被顺利访问。用闭包实现的命令模式如下代码所示：
const setCommand = function (button, func) {
button.onclick = function () {
func()
}
}
const MenuBar = {
refresh: function () {
console.log('刷新菜单界面')
}
}
const RefreshMenuBarCommand = function (receiver) {
return function () {
receiver.refresh()
}
}
const refreshMenuBarCommand = RefreshMenuBarCommand( MenuBar )
setCommand( button1, refreshMenuBarCommand )
撤销命令
命令模式的作用不仅是封装运算块，而且可以很方便地给命令对象增加撤销操作。就像订餐时客人可以通过电话来取消订单一样。下面来看撤销命令的例子。
现在页面中有一个 input 文本框和一个 button 按钮，文本框中可以输入一些数字，表示小球移动后的水平位置，小球在用户点击按钮后立刻开始移动，代码如下：
<body>
<div id="ball" style="position:absolute;background:#000;width:50px;height:50px"></div>
<label>输入小球移动后的位置：<input type="text" id="pos"></label>
<button id="moveBtn">开始移动</button>
</body>
<script>
const ball = document.getElementById('ball')
const pos = document.getElementById('pos')
const moveBtn = document.getElementById('moveBtn')
moveBtn.onclick = function () {
const animate = new Animate(ball)
animate.start('left', pos.value, 1000, 'strongEaseOut')
}
</script>
撤销操作的实现一般是给命令对象增加一个名为 unexecude 或者 undo 的方法，在该方法里执行 execute 的反向操作。在 command.execute 方法让小球开始真正运动之前，我们需要先记录小球的当前位置，在 unexecude 或者 undo 操作中，再让小球回到刚刚记录下的位置，代码如下：
<body>
<div id="ball" style="position:absolute;background:#000;width:50px;height:50px"></div>
<label>输入小球移动后的位置：<input type="text" id="pos"></label>
<button id="moveBtn">开始移动</button>
<button id="cancelBtn">cancel</button> <!--增加取消按钮-->
</body>
<script>
const ball = document.getElementById('ball')
const pos = document.getElementById('pos')
const moveBtn = document.getElementById('moveBtn')
const cancelBtn = document.getElementById('cancelBtn')
const MoveCommand = function (receiver, pos) {
this.receiver = receiver
this.pos = pos
this.oldPos = null
}
// 撤销操作的实现一般是给命令对象增加一个名为 unexecude 或者 undo 的方法，在该方法里执行 execute 的反向操作。
// 在 command.execute 方法让小球开始真正运动之前，我们需要先记录小球的当前位置；
// 在 unexecude 或者 undo 操作中，再让小球回到刚刚记录下的位置。
MoveCommand.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')
// 回到小球移动前记录的位置
}
let moveCommand
moveBtn.onclick = function () {
const animate = new Animate(ball)
moveCommand = new MoveCommand(animate, pos.value)
moveCommand.execute()
}
cancelBtn.onclick = function () {
moveCommand.undo() // 撤销命令
}
</script>
现在通过命令模式轻松地实现了撤销功能。如果用普通的方法调用来实现，也许需要每次都手工记录小球的运动轨迹，才能让它还原到之前的位置。而命令模式中小球的原始位置在小球开始移动前已经作为 command 对象的属性被保存起来，所以只需要再提供一个 undo 方法，并且在 undo方法中让小球回到刚刚记录的原始位置就可以了。
宏命令
宏命令是一组命令的集合，通过执行宏命令的方式，可以一次执行一批命令。想象一下，家里有一个万能遥控器，每天回家的时候，只要按一个特别的按钮，它就会帮我们关上房间门，顺便打开电脑并登录 QQ。
const closeDoorCommand = {
execute: function () {
console.log('关门')
}
}
const openPcCommand = {
execute: function () {
console.log('开电脑')
}
}
const openQQCommand = {
execute: function () {
console.log('登录 QQ')
}
}
// 接下来定义宏命令 MacroCommand ，它的结构也很简单。
// macroCommand.add 方法表示把子命令添加进宏命令对象；
// 当调用宏命令对象的 execute 方法时，会迭代这一组子命令对象，并且依次执行它们的 execute 方法：
const MacroCommand = function () {
return {
commandsList: [],
add: function (command) {
this.commandsList.push(command)
},
execute: function () {
for (let i = 0, command command = this.commandsList[i++]
)
{
command.execute()
}
}
}
}
const macroCommand = MacroCommand()
macroCommand.add(closeDoorCommand)
macroCommand.add(openPcCommand)
macroCommand.add(openQQCommand)
macroCommand.execute()
网友评论