命令模式

abean
284 阅读6分钟

1. 命令模式的用途

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

2. 命令模式的例子

  • 首先在页面中完成这些按钮的绘制
	<body>
    <button id="button1">点击按钮 1</button>
    <button id="button2">点击按钮 2</button>
    <button id="button3">点击按钮 3</button>
  </body>
  <script>
    var button1 = document.getElementById( 'button1' ),
    var button2 = document.getElementById( 'button2' ),
    var button3 = document.getElementById( 'button3' );
  </script>
  • 接下来定义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 AddSunMenuCommand = function (receiver) {
  this.receiver = receiver
}

AddSunMenuCommand.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)

以上只是一个很简单的命令模式示例，但从中可以看到我们是如何把请求发送者和请求接收者解耦开的。

3. 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 对象可以被四处传递，所以在调用命令的时候，客户（Client）不需要关心事情是如何进行的。

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

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 RefreshMenuBarCommand = function (receiver) {
  return {
    execute: function () {
      receiver.refresh()
    },
  }
}
var setCommand = function (button, command) {
  button.onclick = function () {
    command.execute()
  }
}
var refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar)
setCommand(button1, refreshMenuBarCommand)

4. 撤销命令

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

<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> <!--增加取消按钮-->
</body> 
<script> 
  //命令模式代码实现
		var ball = document.getElementById( 'ball' ); 
    var pos = document.getElementById( 'pos' ); 
    var moveBtn = document.getElementById( 'moveBtn' ); 
    var cancelBtn = document.getElementById( 'cancelBtn' ); 
    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 ); //书中5.4.3中实现的方法
       moveCommand = new MoveCommand( animate, pos.value ); 
       moveCommand.execute(); 
     }; 
     cancelBtn.onclick = function(){ 
     		moveCommand.undo(); // 撤销命令
   	};
</script>

现在通过命令模式轻松地实现了撤销功能。如果用普通的方法调用来实现，也许需要每次都手工记录小球的运动轨迹，才能让它还原到之前的位置。而命令模式中小球的原始位置在小球开始移动前已经作为 command 对象的属性被保存起来，所以只需要再提供一个 undo 方法，并且在 undo方法中让小球回到刚刚记录的原始位置就可以了。

5. 宏命令

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

    1. 下面我们看看如何逐步创建一个宏命令。首先，我们依然要创建好各种 Command：
var closeDoorCommand = { 
 execute: function(){ 
 console.log( '关门' ); 
 } 
}; 
var openPcCommand = { 
 execute: function(){ 
 console.log( '开电脑' ); 
 } 
};
var openQQCommand = { 
 execute: function(){ 
 console.log( '登录 QQ' ); 
 } 
};
    1. 定义宏命令 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()
avatar
文章
阅读
粉丝