js组合命令模式

总结一种js的设计模式：组合命令模式

一.拿实际应用场景来举例：比如双十一的时候，业务部门需要我们丰富一下购物车结算功能：

1. 判断商品是否过期
2. 计算优惠
3. 发送账单消息给用户

那么这三个命令一般是在用户点击“结算”按钮触发的，那么把他们封装在一起

var MakeGroup = function() {
  return {
    commandList: [],
    add: function( command ) {
      this.commandList.push( command );
    },
    execute: function() {
      for (let i = 0; i < this.commandList.length; i++) {
        this.commandList[ i ].execute();
      }
    }
  }
}

var isOverDue = {
  execute: function() {
    console.log( '判断商品是否过期' );
  }
}

var calculateDiscount = {
  execute: function() {
    console.log( '计算优惠' );
  }
}

var sendOrder = {
  execute: function() {
    console.log( '发送账单消息给用户' );
  }
}

var payGroup = MakeGroup();

payGroup.add( isOverDue );
payGroup.add( calculateDiscount );
payGroup.add( sendOrder );

payGroup.execute();
// 判断商品是否过期
// 计算优惠
// 发送账单消息给用户

二.还有一种的命令模式的应用场景有很多：PS、word、各种markdown编辑器，总而言之，所有的音频、视频、图片、文字处理的应用都有撤销的功能，下面来模拟一下执行命令与撤销命令的功能

下面这段代码放到浏览器控制台即可查看效果，模拟的是：按下键盘上的键执行命令，按键盘的“esc”键即可撤销命令

var keyCommand = {
  commandList: [],
  execute: function(key) {
    console.log( '按下了 ' + key + ' 键' );
    this.commandList.push( key );
  },
  revoke: function() {
    if (this.commandList.length > 0) {
      console.log( '撤销了 ' + this.commandList.pop() + ' 键按下操作' )
    }
    else {
      console.log( '没有操作可以撤销了!' );
    }
  }
}

document.body.onkeydown = function(e) {
  if (e.key === 'Escape') {
    keyCommand.revoke();
  }
  else {
    keyCommand.execute( e.key );
  }
}

按下了 q 键
按下了 w 键
按下了 e 键
按下了 r 键
按下了 t 键
撤销了 t 键按下操作
撤销了 r 键按下操作
撤销了 e 键按下操作
撤销了 w 键按下操作
撤销了 q 键按下操作
没有操作可以撤销了!