命令模式
命令模式
假设有一个快餐店，而我是该快餐店的点餐服务员，那么我一天的工作应该是这样的：当某位客人点餐或者打来订餐电话后，我会把他的需求都写在清单上，然后交给厨房，客人不用关心的是哪些厨师帮他炒菜。我们餐厅还可以满足客人需要的定时服务，比如客人可能当前正在回家的路上，要求一个小时后才开始炒他的菜，只要订单还在，厨师就不会忘记。客人也可以很方便地打电话来撤销订单。另外如果有太多的客人点餐，厨房可以按照订单的顺序排队炒菜。
这些记录着订餐信息的清单，便是命令模式中的命令对象。
1. 命令模式的用途
命令模式是最简单和优雅的模式之一，命令模式中的命令指的是一个执行某些特定事情的指令。
命令模式最常见的应用场景是：有时候需要向某些对象发送请求，但是不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求者能够消除彼此之间的耦合关系。
拿订餐来说，客人需要向厨师发送请求，但是完全不知道这些厨师的名字和联系方式，也不知道厨师炒菜的方式和步骤。命令模式把客人订餐的请求封装成command对象，也就是订餐中的订单对象。这个对象可以在程序中被四处传递，就像订单可以从服务员手中传到厨师手中。这样一来，客人不需要知道厨师的名字，从而解开了请求调用者和请求接收者之间的耦合关系。
另外，相对于过程化的请求调用，command对象拥有更长的生命周期。对象的生命周期是跟初始请求无关的，因为这个请求已经被封装在了command对象的方法中，成为了这个对象的行为。我们可以在程序运行的任意时刻去调用这个方法，就像厨师可以在客人预订一个小时之后才帮他炒菜，相当于程序在一个小时后才开始执行command对象的方法。除了这两点之外，命令模式还支持撤销，排队等操作。
2. 命令模式的例子——菜单程序
假设我们正在编写一个用户界面程序，该用户界面上至少有数十个button按钮。因为项目比较复杂，所以我们决定让某个程序员负责绘制这些按钮，而另外一些程序员则负责编写点击按钮后的具体行为，这些行为都被封装在对象里。
在大型项目开发中，这是很正常的分工。对于绘制按钮的程序员来说，他完全不知道某个按钮未来将用来做什么，可能用来刷新 菜单界面，也可能用来增加一些子菜单，他只知道点击这个按钮会发生某些事情。那么当完成这个按钮的绘制之后，应该如何给它绑定onclick事件呢？
回想一下命令模式的应用场景：
有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么，此时希望用一种松耦合的方式来设计软件，使得请求发送者和请求接收者能够消息彼此之间的耦合关系。
我们很快可以找到在这里运用命令模式的理由：点击了按钮之后，必须向某些负责具体行为的对象发送请求，这些对象就是请求的接收者。但是目前并不知道接收者是什么对象，也不知道接收者究竟会做什么。此时我们需要借助命令对象的帮助，以便解开按钮和负责具体行为对象之间的耦合。
设计模式的主题总是把不变的事物和变化的事物分离开来，命令模式也不例外。按下按钮之后会发生一些事情是不变的，而具体会发生什么事情是可变的。通过command对象的帮助，将来我们可以轻易地改变这种关联，因此也可以在将来再次改变按钮的行为。
下面进入代码编写阶段，首先在页面中完成这些按钮的“绘制”：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<button id="button1">按钮1</button>
<button id="button2">按钮2</button>
<button id="button3">按钮3</button>
<script>
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var button3 = document.getElementById('button3');
</script>
</body>
</html>
接下来定义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);
以上只是一个很简单的命令模式实例，但从中可以看到我们是如何把请求发送者和请求接收者解耦开的。
2. JavaScript中的命令模式
也许我们会感到奇怪，所谓的命令模式，看起来就是给对象的某个方法取了execute的名字。引入command对象和receiver这两个无中生有的角色无非是把简单的事情复杂化了，即使不用什么模式，用下面寥寥几行代码就可以实现相同的功能：
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(button1, MenuBar.refresh);
bindClick(button2, SubMenu.add);
bindClick(button3, SubMenu.del);
这种说法是正确的，上一节中的实例代码是模拟传统面向对象语言的命令模式实现。命令模式将过程式的请求调用封装在command对象的execute方法里，通过封装方法调用，我们可以把运算块包装成形。command对象可以被四处传递，所以在调用命令的时候，客户不需要关心事情是如何进行的。
命令模式的由来，其实是回调函数的一个面向对象的替代品。
JavaScript作为将函数作为一等对象的语言，跟策略模式一样，命令模式也早已融入到了JavaScript语言之中。运算块不一定要封装在Command.execute方法中，也可以封装在普通函数中。函数作为一等对象，本身就可以被四处传递。即使我们依然需要请求“接收者”，那也未必使用面向对象的方式，闭包可以完成同样的功能。
在面向对象设计中，命令模式的接受者被当成Command对象的属性保存起来，同时约定执行命令的操作调用command.execute方法。在使用闭包的命令模式实现中，接受者被封闭在闭包产生的环境中，执行命令的操作可以更加简单，仅仅执行回调函数即可。无论接受者被保存为对象的属性，还是被封闭在闭包产生的环境中，在将来执行命令的时候，接受者都能被顺利访问。用闭包实现的命令模式如下代码所示：
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(button1, refreshMenuBarCommand);
当然，如果想更明确地表达当前正在使用命令模式，或者除了执行命令之外，将来有可能还要提供撤销命令等操作。那我们最好还是把执行函数改为调用execute方法：
var setCommand = function (button, command) {
button.onclick = function () {
command.execute();
};
};
var MenuBar = {
refresh: function () {
console.log('刷新菜单界面');
}
};
var RefreshMenuBarCommand = function (receiver) {
return {
execute: function () {
receiver.refresh();
}
};
};
var refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar);
setCommand(button1, refreshMenuBarCommand);
3. 撤销命令
命令模式的作用不仅是封装运算块，而且可以很方便地给命令对象增加撤销操作。就像订餐时客人可以通过电话来取消订单一样。下面来看撤销命令的例子。
点击移动按钮时，记录元素的位置后移动，点击撤销时，从记录处拿出上一位置，再移动。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<button id="button1">移动</button>
<button id="button2">撤销</button>
<div id="div" style="width:50px;height:50px;background:black;position:absolute;left:0px;"></div>
<script>
var button1 = document.getElementById('button1'),
button2 = document.getElementById('button2'),
myDiv = document.getElementById('div'),
arr = []; //保存位置信息
var MoveCommand = function () { };
MoveCommand.prototype.execute = function () {
var pos = parseInt(window.div.getBoundingClientRect().left); //获得div元素当前位置
arr.push(pos);
pos = pos + 50 + 'px';
myDiv.style.left = pos;
}
MoveCommand.prototype.undo = function () {
myDiv.style.left = arr.pop() + 'px';
};
var command = new MoveCommand;
button1.onclick = function () {
command.execute();
};
button2.onclick = function () {
command.undo();
}
</script>
</body>
</html>
4. 宏命令
宏命令是一组命令的集合，通过执行宏命令的方式，可以一次执行一批命令。想象一下，家里有一个万能遥控器，每天回家的时候，只要按一个特别的按钮，它就会帮我们关上房间门，顺便打开电脑登上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 {
commandList: [],
add: function (command) {
this.commandList.push(command);
},
execute: function () {
for (var i = 0, command; command = this.commandList[i++];) {
command.execute();
}
}
};
};
var macroCommand = MacroCommand();
macroCommand.add(closeDoorCommand);
macroCommand.add(openPcCommand);
macroCommand.add(openQQCommand);
macroCommand.execute();
宏命令是命令模式和组合模式的联用产物。
5. 智能命令与傻瓜命令
再看一下我们在上一节创建的命令：
var closeDoorCommand = {
execute: function () {
console.log('关门');
}
};
很奇怪，closeDoorCommand中没有包含任何receiver的信息，它本身就包揽了执行请求的行为，这跟我们之前看到的命令对象都包含了一个receiver是矛盾的。
一般来说，命令模式都会在command对象中保存一个接收者来负责真正执行客户的请求，这种情况下命令对象是“傻瓜式”的，它只负责吧客户的请求转交给接收者来执行，这种模式的好处是请求发起者和请求接收者之前尽可能地得到了解耦。
但是我们也可以定义一些更“聪明”的命令对象，“聪明”的命令对象可以直接实现请求，这样一来就不再需要接收者的存在，这种“聪明”的命令对象也叫做智能命令。没有接收者的智能命令，退化到和策略模式非常相近，从代码结构上已经无法分辨它们，能分辨它们的只有它们意图的不同。策略模式指向的问题域更小，所有策略对象的目标总是一致的，它们只是达到这个目标的不同手段，它们的内部实现是正对“算法”而言的。而只能命令模式指向的问题域更广，command对象解决的目标更具发散性。命令模式还可以完成撤销，排队等功能。
参考书目：《JavaScript设计模式与开发实践》
