设计模式之命令模式

最新推荐文章于 2024-09-24 19:45:00 发布

原创最新推荐文章于 2024-09-24 19:45:00 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

设计模式专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了JavaScript中的命令模式，包括传统命令模式的应用、撤销和重做的实现，以及宏命令的概念。通过具体实例，展示了如何在JavaScript中实现命令模式的不同应用场景。

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

命令模式主要是处理解决命令和执行的解耦，如果不显性的显性的独立一个命令安装对象，将和策略模式无法区分

1.传统命令模式

2.javascript中的命令模式

3.撤销和重做

4.宏命令

传统命令模式：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="button1">点击按钮1</button>
<button id="button2">点击按钮1</button>
<button id="button3">点击按钮1</button>
<script>
    function $(id){
        return document.getElementById(id);
    }
    var btn1=$("button1");
    var btn2=$("button2");
    var btn3=$("button3");
    //设置命令
    var setCommand=function(button,command){
        button.onclick=function(){
            command.execute();
        }
    };
    //设置命令
    var MenuBar={
        refresh:function(){
            console.log("刷新菜单目录")
        }
    };
    var subMen={
        add:function(){
            console.log("增加子菜单")
        },
    del:function(){
        console.log("删除子菜单")
    }
    };
//在让button有用前，我们先要把这些行为都分钟到命令类中
    var RefreshMenuBarCommad=function(receiver){
        this.receiver=receiver;
    };
    RefreshMenuBarCommad.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(){
       console.log("删除子菜单")
    };
//最后吧命令接受者传入草command对象中，并且把command对象安装到button上面
    var refreshMenuBarCommand=new RefreshMenuBarCommad(MenuBar);
    var addSubMenuCommand=new AddsubMenuCommand(subMen);
    var delSubMenuCommand=new DelSubMenuCommand(subMen);

    setCommand(btn1,refreshMenuBarCommand);
    setCommand(btn2,addSubMenuCommand);
    setCommand(btn3,delSubMenuCommand)
</script>
</body>
</html>

javascript的命令模式：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="button1">点击按钮1</button>
<button id="button2">点击按钮1</button>
<button id="button3">点击按钮1</button>
<script>
    function $(id){
        return document.getElementById(id);
    }
    var btn1=$("button1");
    var btn2=$("button2");
    var btn3=$("button3");
    //设置命令
    var setCommand=function(button,command){
        button.onclick=function(){
            command.execute();
        }
    };
    //设置命令
    var MenuBar={
        refresh:function(){
            console.log("刷新菜单目录")
        }
    };
    //在让button有用前，我们先要把这些行为都分钟到命令类中,将来可能需要提供撤销功能所以吧执行函数改为execute
    var RefreshMenuBarCommad=function(receiver){
        return{
            execute:function(){
                receiver.refresh();
            }
        }
    };


    var refreshMenuBarCommand=RefreshMenuBarCommad(MenuBar);
    setCommand(btn1,refreshMenuBarCommand);

    </script>
</body>
</html>

撤销命令和重做：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="replay">播放录像</button>
<script>
    var Ryu={
        attach:function(){
            console.log("攻击");
        },
        defense:function(){
            console.log("防御")
        },
        jump:function(){
            console.log("跳动")

        },
        crouch:function(){
            console.log("蹲下")
        }
    };
    //创建命令
    var makeCommand=function(receiver,state){
        return function(){
            receiver[state]();
        }
    };
    var commands={
      "119":"jump",//w
        "115":'crouch',//s
        "97":"defense",//a
        "100":"attach"//d
    };
    var commandStachk=[];//保存命令的堆栈
    document.onkeypress=function(ev){
        var keyCode=ev.keyCode;
        var command=makeCommand(Ryu,commands[keyCode]);
        if(command){
            command();//执行命令
            commandStachk.push(command);//将刚刚执行过的命令保存到堆 栈中
        }
    };
    document.getElementById("replay").onclick=function(){
        var command;
        while(command=commandStachk.shift()){
            command();
        }
    }
</script>
</body>
</html>

宏命令[将无法看出是命令模式]：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var closeDoorCommand={
        execute:function(){
            console.log("关门")
        }
    };
    var openPcCommand={
        execute:function(){
            console.log("开电脑")
        }
    };
    var openQQCommand={
        execute:function(){
            console.log("登录QQ")
        }
    };
    //添加命令，并执行多个命令
    var MacroCommand=function() {
        return {
            commandsList: [],
            add: function (command) {
                this.commandsList.push(command)
            },
            execute: function () {
                for (var i = 0, command; command = this.commandsList[i++];) {
                    command.execute();
                }
            }
        }
    };

    var macroCommands=MacroCommand();//创建命令对象
    //添加命令
    macroCommands.add(closeDoorCommand);
    macroCommands.add(openPcCommand);
    macroCommands.add(openQQCommand);
    //执行命令
    macroCommands.execute();
</script>
</body>
</html>