JavaScript设计模式与开发实践 命令模式
命令模式是最简单和优雅的模式之一，命令模式中的命令（command）指的是一个执行某些特定事情的指令。
命令模式最常见的应用场景是：有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。
拿订餐来说，客人需要向厨师发送请求，但是完全不知道这些厨师的名字和联系方式，也不知道厨师炒菜的方式和步骤。 命令模式把客人订餐的请求封装成command 对象，也就是订餐中的订单对象。这个对象可以在程序中被四处传递，就像订单可以从服务员手中传到厨师的手中。这样一来，客人不需要知道厨师的名字，从而解开了请求调用者和请求接收者之间的耦合关系。
另外，相对于过程化的请求调用，command 对象拥有更长的生命周期。对象的生命周期是跟初始请求无关的，因为这个请求已经被封装在了command 对象的方法中，成为了这个对象的行为。我们可以在程序运行的任意时刻去调用这个方法，就像厨师可以在客人预定1 个小时之后才帮他炒菜，相当于程序在1 个小时之后才开始执行command 对象的方法。
除了这两点之外，命令模式还支持撤销、排队等操作。
一、JavaScript 中的命令模式
假设我们正在编写一个用户界面程序，该用户界面上至少有数十个Button 按钮。因为项目比较复杂，所以我们决定让某个程序员负责绘制这些按钮，而另外一些程序员则负责编写点击按钮后的具体行为，这些行为都将被封装在对象里。对于绘制按钮的程序员来说，他完全不知道某个按钮未来将用来做什么，可能用来刷新菜单界面，也可能用来增加一些子菜单，他只知道点击这个按钮会发生某些事情。那么当完成这个按钮的绘制之后，应该如何给它绑定onclick 事件呢？
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="button1">点击按钮1</button> <button id="button2">点击按钮2</button> <button id="button3">点击按钮3</button> <script> </script> </body> </html>
//传统方法 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 );
在使用闭包的命令模式实现中，接收者被封闭在闭包产生的环境中，执行命令的操作可以更加简单，仅仅执行回调函数即可。无论接收者被保存为对象的属性，还是被封闭在闭包产生的环境中，在将来执行命令的时候，接收者都能被顺利访问。
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 方法：
//setCommand 函数负责往按钮上面安装命令。可以肯定的是，点击按钮会执行某个command 命令，执行命令的动作被约定为调用command 对象的execute()方法。虽然还不知道这些命令究竟代表什么操作， //但负责绘制按钮的程序员不关心这些事情，他只需要预留好安装命令的接口，command 对象自然知道如何和正确的对象沟通 var setCommand = function( button, command ){ button.onclick = function(){ command.execute(); } }; //给按钮增加功能 var MenuBar = { refresh: function(){ console.log( '刷新菜单界面' ); } }; //在让button 变得有用起来之前，我们要先把这些行为都封装在命令类中 var RefreshMenuBarCommand = function( receiver ){ return { execute: function(){ receiver.refresh(); } } }; //把命令接收者传入到command 对象中，并且把command 对象安装到button 上面 var refreshMenuBarCommand = RefreshMenuBarCommand( MenuBar ); setCommand( button1, refreshMenuBarCommand );
二、撤销命令
命令模式的作用不仅是封装运算块，而且可以很方便地给命令对象增加撤销操作。
这个动画的表现是让页面上的小球移动到水平方向的某个位置。现在页面中有一个input 文本框和一个button 按钮，文本框中可以输入一些数字，表示小球移动后的水平位置，小球在用户点击按钮后立刻开始移动，点击撤销按钮之后，小球便能回到上一次的位置。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="ball" style="position:absolute;background:#000;width:50px;height:50px"></div> 输入小球移动后的位置：<input id="pos"/> <button id="moveBtn">开始移动</button> <button id="cancelBtn">cancel</cancel> <!--增加取消按钮--> <script></script> </body> </html>
var tween = {} var Animate = function( dom ){}; Animate.prototype.start = function( propertyName, endPos, duration, easing ){}; Animate.prototype.step = function(){}; Animate.prototype.update = function( pos ){
var MoveCommand = function( receiver, pos ){ this.receiver = receiver; this.pos = pos; this.oldPos = null; }; 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' );//回到小球移动前记录的位置 }; var moveCommand; moveBtn.onclick = function(){ var animate = new Animate( ball ); moveCommand = new MoveCommand( animate, pos.value ); moveCommand.execute(); }; cancelBtn.onclick = function(){ moveCommand.undo(); // 撤销命令 };
四、撤消和重做
在某些情况下无法顺利地利用undo 操作让对象回到execute 之前的状态。比如在一个Canvas 画图的程序中，画布上有一些点，我们在这些点之间画了N 条曲线把这些点相互连接起来，当然这是用命令模式来实现的。但是我们却很难为这里的命令对象定义一个擦除某条曲线的undo 操作，因为在Canvas 画图中，擦除一条线相对不容易实现。
这时候最好的办法是先清除画布，然后把刚才执行过的命令全部重新执行一遍，这一点同样可以利用一个历史列表堆栈办到。记录命令日志，然后重复执行它们，这是逆转不可逆命令的一个好办法。
<html> <head> <meta charset="utf-8"> <title></title> </head> <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 makeCommand = function( receiver, state ){ // 创建命令 return function(){ receiver[ state ](); } }; 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 ] ); command(); // 执行命令 commandStack.push( command ); // 将刚刚执行过的命令保存进堆栈 }; document.getElementById( 'replay' ).onclick = function(){ // 点击播放录像 var command; while( command = commandStack.shift() ){ // 从堆栈里依次取出命令并执行 command(); } }; </script> </html>
五、命令队列
队列在动画中的运用场景也非常多，比如之前的小球运动程序有可能遇到另外一个问题：有些用户反馈，这个程序只适合于APM 小于20 的人群，大部分用户都有快速连续点击按钮的习惯，当用户第二次点击button 的时候，此时小球的前一个动画可能尚未结束，于是前一个动画会骤然停止，小球转而开始第二个动画的运动过程。但这并不是用户的期望，用户希望这两个动画会排队进行。
把请求封装成命令对象的优点在这里再次体现了出来，对象的生命周期几乎是永久的，除非我们主动去回收它。也就是说，命令对象的生命周期跟初始请求发生的时间无关，command 对象的execute 方法可以在程序运行的任何时刻执行，即使点击按钮的请求早已发生，但我们的命令对象仍然是有生命的。
所以我们可以把div 的这些运动过程都封装成命令对象，再把它们压进一个队列堆栈，当动画执行完，也就是当前command 对象的职责完成之后，会主动通知队列，此时取出正在队列中等待的第一个命令对象，并且执行它。
我们比较关注的问题是，一个动画结束后该如何通知队列。通常可以使用回调函数来通知队列，除了回调函数之外，还可以选择发布订阅模式。即在一个动画结束后发布一个消息，订阅者接收到这个消息之后，便开始执行队列里的下一个动画。读者可以尝试按照这个思路来自行实现一个队列动画。
六、宏命令
宏命令是一组命令的集合，通过执行宏命令的方式，可以一次执行一批命令。
想象一下，家里有一个万能遥控器，每天回家的时候，只要按一个特别的按钮，它就会帮我们关上房间门，顺便打开电脑并登录QQ。
var closeDoorCommand = { execute: function(){ console.log( '关门' ); } }; var openPcCommand = { execute: function(){ console.log( '开电脑' ); } }; var openQQCommand = { execute: function(){ console.log( '登录QQ' ); } }; //宏命令 //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();
七、智能命令与傻瓜命令
var closeDoorCommand = { execute: function(){ console.log( '关门' ); } };
一般来说，命令模式都会在command 对象中保存一个接收者来负责真正执行客户的请求，这种情况下命令对象是“傻瓜式”的，它只负责把客户的请求转交给接收者来执行，这种模式的好处是请求发起者和请求接收者之间尽可能地得到了解耦。
但是我们也可以定义一些更“聪明”的命令对象，“聪明”的命令对象可以直接实现请求，这样一来就不再需要接收者的存在，这种“聪明”的命令对象也叫作智能命令。没有接收者的智能命令，退化到和策略模式非常相近，从代码结构上已经无法分辨它们，能分辨的只有它们意图的不同。策略模式指向的问题域更小，所有策略对象的目标总是一致的，它们只是达到这个目标的不同手段，它们的内部实现是针对“算法”而言的。而智能命令模式指向的问题域更广，command对象解决的目标更具发散性。命令模式还可以完成撤销、排队等功能。
