javascript命令模式

最新推荐文章于 2023-10-22 20:11:10 发布

辛丙亮

最新推荐文章于 2023-10-22 20:11:10 发布

阅读量427

点赞数

CC 4.0 BY-SA版权

分类专栏：运维前端文章标签： javascript js命令模式

本文链接：https://blog.youkuaiyun.com/qq_22533095/article/details/52231258

运维同时被 2 个专栏收录

24 篇文章

订阅专栏

前端

23 篇文章

订阅专栏

本文介绍了JavaScript中的命令模式，包括如何实现基本的命令模式、支持撤销重做功能的命令模式及宏命令模式。通过实例展示了如何将命令模式应用于按钮点击事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript命令模式

传统面向对象语言中的命令模式

<body>
    <button id="button1">点击按钮1</button>
    <button id="button2">点击按钮2</button>
    <button id="button3">点击按钮3</button>
</body>
<script>
    var button1 = document.getElementById('button1');
    var button2 = document.getElementById('button2');
    var button3 = document.getElementById('button3');

    var setCommand = function (button, command) {
        button.onclick = function () {
            command.execute();
        }
    };

    //具体的动作
    var MenuBar = {
        refresh: function () {
            console.log('刷新菜单目录')
        }
    };

    var SubMenu = {
        add: function () {
            console.log('增加子菜单');
        },
        del: function () {
            console.log('删除子菜单');
        }
    };

    //封装为命令
    var RefreshMenuBarcOMMAND = function (receiver) {
        this.receiver = receiver;
    };

    RefreshMenuBarcOMMAND.prototype.execute = function () {
        this.receiver.refresh();
    };



    var AddSubMenuCommand = function (receiver) {
        this.receiver = receiver;
    };

    AddSubMenuCommand.prototype.execute = function () {
        this.receiver.add();
    };


    var DelSubMenuCommand = function (receiver) {
        this.receiver = receiver;
    };

    DelSubMenuCommand.prototype.execute = function () {
        this.receiver.del();
    }

    var refreshMenuBarCommand = new RefreshMenuBarcOMMAND(MenuBar);
    var addSubMenuCommand = new AddSubMenuCommand(SubMenu);
    var delSubMenuCommand = new DelSubMenuCommand(SubMenu);

    setCommand(button1, refreshMenuBarCommand);
    setCommand(button2, addSubMenuCommand);
    setCommand(button3, delSubMenuCommand);
</script>

javascript中的命令模式

<body>
    <button id="button1">点击按钮1</button>
    <button id="button2">点击按钮2</button>
    <button id="button3">点击按钮3</button>
</body>
<script>
    var button1 = document.getElementById('button1');
    var button2 = document.getElementById('button2');
    var button3 = document.getElementById('button3');


    var setCommand = function (button, command) {
        button.onclick = function () {
            command.execute();
        }
    };

    var MenBar = {
        refresh: function () {
            console.log("刷新菜单");
        }
    };

    //变成命令
    var RefreshMenuBarCommand = function (receiver) {
        return {
            execute:  function () {
                receiver.refresh();
            }
        }
    };

    var refresBarCommand = RefreshMenuBarCommand(MenBar);

    setCommand(button1, refresBarCommand);
</script>

对命令的撤销或重新执行

var Ryu = {
    attack: function () {
        console.log('攻击');
    },
    defense: function () {
        console.log('防御');
    },
    jump: function () {
        console.log('跳跃');
    },
    crouch: function () {
        console.log('蹲下');
    }
};

var makeCommand = function (receiver, state) {      //创建命令
    return function () {
        var fun = receiver[ state ];
        fun();
    }
};

var commands = {
    '119': 'jump',          //W
    '115': 'crouch',        //S
    '97': 'defense',        //A
    '100': 'attack'         //D
};

var commandStack = [];              //保存命令的堆栈

document.onkeypress  = function (event) {
    var keyCode = event.which || event.keyCode,
            command = makeCommand(Ryu, commands[keyCode]);

    if(command){
        command();                  //执行命令
        commandStack.push(command);        //将刚刚执行过的命令保存进堆栈
    }
};

document.getElementById('replay').onclick = function () {       //点击播放录像
    var command;
    while (command = commandStack.shift()){                     //从堆栈中依次取出来执行
        command();
    }
};

宏命令

用户希望一个指令执行一系列命令，这就是宏命令

execute: function () {
        console.log('关门');
    }
};

var openPcCommand = {
    execute: function () {
        console.log('打开电脑');
    }
};

var openQQCommand = {
    execute: function () {
        console.log('登录QQ');
    }
};

//我们希望，触发命令时执行一系列命令
var MacroCommand = function () {
    return {
        commandList: [],
        add: function (command) {
            this.commandList.push(command);
        },
        execute: function () {
            for(var i = 0, command; command = this.commandList[i++];){
                command.execute();
            }
        }
    }
};

var macrocommand = MacroCommand();
macrocommand.add(closeDoorCommand);
macrocommand.add(openPcCommand);
macrocommand.add(openQQCommand);

macrocommand.execute();