亲宝软件园·资讯

展开

JavaScript 命令模式

​ 前端若水   ​ 人气:0

前言

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

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

生活中的命令设计模式

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

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

工作中的命令设计模式

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

我们来做一个需求,该需求是能够一键封锁账户权限和一键解封账户权限

页面结构,写上俩个权限按钮进行控制权限开启与关闭

   <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('权限已关闭')
}

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

加载全部内容

相关教程
猜你喜欢
用户评论