前端设计模式应用--命令模式

48 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第22天

介绍

  • 命令模式(Command Pattern)是一种数据驱动的设计模式,它属于行为型模式。请求以命令的形式包裹在对象中,并传给调用对象。调用对象寻找可以处理该命令的合适的对象,并把该命令传给相应的对象,该对象执行命令。

    在软件系统中,“行为请求者”与“行为实现者”通常呈现一种“紧耦合”。但在某些场合,比如要对行为进行“记录、撤销/重做、事务”等处理,这种无法抵御变化的紧耦合是不合适的。在这种情况下,如何将“行为请求者”与“行为实现者”解耦?将一组行为抽象为对象实现二者之间的松耦合。这就是命令模式(Command Pattern)

使用场景

  • GUI 中每一个按钮都是一条命令

  • 系统需要在不同的时间指定请求、将请求排队和执行请求。

  • 系统需要支持命令的撤销(Undo)操作和恢复(Redo)操作。

  • 系统需要将一组操作组合在一起,即支持宏命令。

实现

职责明确

  • Invoker : 请求的调用者,内部持有具体请求的引用,统一调用指令即'ConcreteCommand' 定义的收口方法execute。

  • ConcreteCommand :封装的请求对象,内部持有Receiver对象,因为所谓 指令是将Receiver 中的方法分成详细条数通过统一收口来调用Receiver 中的方法

  •     Receiver:请求接受者,就是一个对象里面有一堆方法

实现

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

/*
输出:
  发布者发布请求
  命令对象->接收者->对应接口执行
  接收者执行请求
*/

汇总

优点: 

1、降低了系统耦合度。

 2、新的命令可以很容易添加到系统中去。

缺点:

1、使用命令模式可能会导致某些系统有过多的具体命令类。