JavaScript设计模式-命令模式(15)

简介: JavaScript设计模式-命令模式(15)

命令设计模式是由三部分构成:

  1. 发令者:用于发出命令和调用命令,不知道如何执行且谁去执行
  2. 执行者:用于提供对应接口发出的命令的处理请求,不知道谁发出的命令
  3. 命令对象:用于接收命令且处理执行者的请求

把执行操作和稍后执行事件信息存在命令对象中,通过发令者发布命令来让执行者进行执行,从而达到了执行者和发令者分离开来,使代码耦合度降低

生活中的命令设计模式


在生活中,我们去饭馆吃饭,我们先告诉服务员我们想要吃那些菜以及对菜品的要求,然后服务员通过点餐平台告知后面的厨房,厨房得知我们想要吃的菜以及对菜品的要求,厨师对菜品进行制作,做好后通知服务员,服务员把菜品给我们端上来,我们进行享用


生活中例子上,发令者就是我们,执行者是服务员,厨师制作菜品则是命令对象

工作中的命令设计模式


在工作中我们通常用于某些时候需要向某些对象发起请求,但并不知道接收者是谁,也不知道请求的操作是什么,此时可以使用命令设计模式


我们来做一个需求,该需求是能够一键封锁账户权限和一键解封账户权限页面结构,写上俩个权限按钮进行控制权限开启与关闭

<button id="onbtn">开启权限</button>
    <button id="offbtn">关闭权限</button>

我们在通过js进行过去到俩个权限控制按钮

const onBtn=document.getElementById('onbtn');
  const offBtn=document.getElementById('offbtn');

发令者

class Control {
    submit(command) {
        command.execute();
    }
}

执行者

class Power {
    powerOn() {
        console.log("开启所有权限入口");
    }
    powerOff() {
        console.log("关闭所有权限入口");
    }
}

命令对象

class PowerOnCommand {
    constructor(current) {
        this.current = current;
    }
    execute() {
        this.current.powerOn();
    }
    undo() {
        this.current.powerOff();
    }
    redo() {
        this.execute();
    }
}
class PowerOffCommand {
    constructor(current) {
        this.current = current;
    }
    execute() {
        this.current.powerOff();
    }
    undo() {
        this.current.powerOn();
    }
    redo() {
        this.execute();
    }
}

我们把各个类都创建好实例,然后再通过js给按钮绑定上事件,通过事件操作命令者


实例进行发布命令

//执行者实例
const power = new Power();
//命令对象实例
const powerOn = new PowerOnCommand(power);
const powerOff = new PowerOffCommand(power);
//发布者实例
const control = new Control();
//开启权限按钮绑定事件
onBtn.onclick=function(){
// 开启所有权限入口
    control.submit(powerOn); 
    alert('权限已开启')
}
//关闭权限按钮绑定事件
offBtn.onclick=function(){
// 关闭所有权限入口
    control.submit(powerOff); 
    alert('权限已关闭')
}

命令者设计模式由于允许我们将操作封装在对象中进行管理,所以也可以用来实现事务系统,将执行的命令保存在历史记录中,如果成功则执行最后的命令,否则根据历史记录进行回滚,对执行的操作进行撤销


坚持努力,无惧未来!


相关文章
|
10天前
|
设计模式 存储 算法
「全网最细 + 实战源码案例」设计模式——命令模式
命令模式(Command Pattern)是一种行为型设计模式,将请求封装成独立对象,从而解耦请求方与接收方。其核心结构包括:Command(命令接口)、ConcreteCommand(具体命令)、Receiver(接收者)和Invoker(调用者)。通过这种方式,命令的执行、撤销、排队等操作更易扩展和灵活。 适用场景: 1. 参数化对象以操作。 2. 操作放入队列或远程执行。 3. 实现回滚功能。 4. 解耦调用者与接收者。 优点: - 遵循单一职责和开闭原则。 - 支持命令组合和延迟执行。 - 可实现撤销、恢复功能。 缺点: - 增加复杂性和类数量。
48 14
「全网最细 + 实战源码案例」设计模式——命令模式
|
1月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
90 33
|
3月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
57 2
|
4月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
49 3
|
5月前
|
设计模式 存储 算法
Java设计模式-命令模式(16)
Java设计模式-命令模式(16)
|
6月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
92 1
|
6月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
6月前
|
设计模式 存储 Java
【十二】设计模式~~~行为型模式~~~命令模式(Java)
文章详细介绍了命令模式(Command Pattern),这是一种对象行为型模式,用于将请求封装成对象,实现请求发送者与接收者的解耦,从而降低系统耦合度、提高灵活性,并支持命令的排队、记录、撤销和恢复操作。通过案例分析、结构图、时序图和代码示例,文章展示了命令模式的组成部分、实现方式和应用场景,并讨论了其优点、缺点和适用情况。
|
7月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
112 7
|
7月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
95 6

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    53
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62