【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()

猜你喜欢

转载自blog.csdn.net/weixin_52834435/article/details/127341497