js设计模式之命令模式

xml 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命令模式</title>
</head>
<body>
<button id="btn1">刷新菜单</button>
<button id="btn2">增加菜单</button>
<button id="btn3">删除菜单</button>
<script>
    /**
     * 命令模式(Command)的定义是:用于将一个请求封装成一个对象,从而使你可用不同的请求对客户进行参数化;
     * 对请求排队或者记录请求日志,以及执行可撤销的操作。也就是说改模式旨在将函数的调用、请求和操作封装成一个单一的对象,然后对这个对象进行一系列的处理。
     * 此外,可以通过调用实现具体函数的对象来解耦命令对象与接收对象。
     */
        //定义一个命令发布者(执行类)
    class Executor {
        setCommand(btn, command) {
            btn.onclick = function () {
                command.execute();
            }
        }
    }

    //定义一个命令接受者
    class Menu {
        refresh() {
            console.log('刷新菜单');
        }

        addMenu() {
            console.log('添加菜单');
        }
        deleteMenu() {
            console.log('删除菜单');
        }
    }

    //刷新菜单命令对象
    class RefreshMenu {
        constructor(receiver) {
            this.receiver = receiver;
        }
        //爆漏出统一的接口
        execute(){
            this.receiver.refresh();
        }
    }
    //增加菜单
    class AddMenu {
        constructor(receiver) {
            this.receiver = receiver;
        }
        //爆漏出统一的接口
        execute(){
            this.receiver.addMenu();
        }
    }
    //删除菜单
    class DeleteMenu {
        constructor(receiver) {
            this.receiver = receiver;
        }
        execute(){
            this.receiver.deleteMenu();
        }
    }
    const menu = new Menu();
    const executor = new Executor();
    //刷新菜单
    const refreshMenu = new RefreshMenu(menu);
    //给按钮添加刷新操作
    let ben1=document.getElementById('btn1');
    executor.setCommand(ben1, refreshMenu);
    //给按钮2添加增加菜单操作
    let addMenu=new AddMenu(menu);
    let ben2=document.getElementById('btn2');
    executor.setCommand(ben2, addMenu);
    //删除菜单
    let deleteMenu=new DeleteMenu(menu);
    let ben3=document.getElementById('btn3');
    executor.setCommand(ben3, deleteMenu);
</script>
</body>
</html>
相关推荐
jingling55516 分钟前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
lybugproducer17 分钟前
创建型设计模式之:简单工厂模式、工厂方法模式、抽象工厂模式、建造者模式和原型模式
java·设计模式·建造者模式·简单工厂模式·工厂方法模式·抽象工厂模式·面向对象
Freedom风间5 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军6 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军6 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪6 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer6 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
BillKu6 小时前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风7 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui