设计模式-命令模式

概念

  • 执行命令时,发布者和执行者分开
  • 中间加入命令对象,作为中转站

演示

js 复制代码
class Receiver {
    exec() {
        console.log('执行')
    }
}

class Command {
    constructor(receiver) {
        this.receiver = receiver;
    }
    cmd() {
        console.log('触发命令')
        this.receiver.exec()
    }
}

class Invoker {
    constructor(command) {
        this.command = command
    }
    invoke() {
        console.log('开始')
        this.command.cmd()
    }
}

// 士兵
let soldier = new Receiver()
// 小号手
let trumpeter = new Command(soldier)
// 将军
let general = new Invoker(trumpeter)
general.invoke()

JS中的应用

  • 网页富文本编辑器操作,浏览器封装了一个命令对象
  • document.execCommand('bold')
  • document.execCommand('undo')

设计原则验证

  • 命令对象于执行对象分开,解耦
  • 符合开发封闭原则
相关推荐
其实防守也摸鱼9 小时前
运维--学习阶段问题解答(1)(自测)
linux·运维·服务器·数据库·学习·自动化·命令模式
NG47714 小时前
【软件设计与体系结构】-策略设计模式
java·设计模式·软件工程
CaffeinePro16 小时前
SOLID五大设计原则:重构优雅代码与架构的底层规范
设计模式·架构
饮茶三千17 小时前
电子保函模板编辑器实战二:HTML→FTL 编译转换的设计与实现
前端·vue.js·设计模式
Kel17 小时前
Node.js 本质:从全脉络视角理解运行时原理
javascript·设计模式·node.js
码哥字节18 小时前
11 万 Star 的 Spec Kit,90% 的工程师只用它解决了 10% 的问题
设计模式·vibe coding·github spec kit
我登哥MVP19 小时前
走进 Gang of Four 设计模式:访问者模式
java·设计模式·访问者模式·原型模式
ttod_qzstudio20 小时前
【软考设计模式】状态模式:状态驱动行为自动转换与代码填空精讲
设计模式·状态模式
饮茶三千20 小时前
基于 WangEditor 的富文本编辑器定制实践
前端·vue.js·设计模式
ttod_qzstudio1 天前
【软考设计模式】中介者模式:网状交互的解耦与集中调度精讲
设计模式·中介者模式