【JavaScript设计模式】命令模式

命令模式

假设有一个快餐店，而我是该餐厅的点餐服务员，那么我一天的工作应该是这样的：当某位客人点餐或者打来订餐电话后，我会把他的需求都写在清单上，然后交给厨房，客人不用关心是哪些厨师帮他炒菜。我们餐厅还可以满足客人需要的定时服务，比如客人可能当前正在回家的路上，要求1个小时后才开始炒他的菜，只要订单还在，厨师就不会忘记。客人也可以很方便地打电话来撤销订单。另外如果有太多的客人点餐，厨房可以按照订单的顺序排队炒菜。

这些记录着订餐信息的清单，便是命令模式中的命令对象。

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

优点

• 降低了代码的耦合度，易扩展，出现新的命令可以很容易的添加进去

缺点

• 命令模式使用过度会导致代码中存在过多的具体命令。

例子

• 假设在一个项目中开发某个页面，其中某个程序员负责绘制静态页面，包括某些按钮，而另一个程序员负责开发这几个按钮的具体行为。负责静态页面的程序员暂时不知道这些按钮未来会发生什么，在不知道具体行为是什么作什么的情况下，通过命令模式的帮助，解开按钮和负责具体行为对象之间的耦合。

const setCommand = function(button, command) {
  button.onClick = function() {
    command.excute()
  }
}

// --------------------  上面的界面逻辑由A完成, 下面的由B完成

const menu = {
  updateMenu: function() {
    console.log('更新菜单')
  },
}

const UpdateCommand = function(receive) {
  return {
    excute: receive.updateMenu,
  }
}

const updateCommand = UpdateCommand(menu) // 创建命令

const button1 = document.getElementById('button1')
setCommand(button1, updateCommand)

例子2：

// 接收者类
class Receiver {
    execute() {
      console.log('接收者执行请求')
    }
  }
  
// 命令者
class Command {  
    constructor(receiver) {
        this.receiver = receiver
    }
    execute () {    
        console.log('命令');
        this.receiver.execute()
    }
}
// 触发者
class Invoker {   
    constructor(command) {
        this.command = command
    }
    invoke() {   
        console.log('开始')
        this.command.execute()
    }
}
  
// 仓库:接收者
const warehouse = new Receiver();   
// 订单:命令者    
const order = new Command(warehouse);  
// 客户: 触发者
const client = new Invoker(order);      
client.invoke()