JS命令模式

最新推荐文章于 2023-04-26 21:45:13 发布

正义的小豆

最新推荐文章于 2023-04-26 21:45:13 发布

阅读量160

点赞数

分类专栏：代码优化

本文链接：https://blog.csdn.net/ywy502/article/details/104760792

版权

代码优化专栏收录该内容

16 篇文章 0 订阅

订阅专栏

命令模式

命令模式是最简单和优雅的模式之一，命令模式中的命令（command）指的是一个执行某些特定事情的指令。
命令模式最常见的应用场景是：有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。
HTML5版《街头霸王》游戏中，命令模式可以用来实现播放录像功能。原理跟Canvas画图的例子一样，我们把用户在键盘的输入都封装成命令，执行过的命令将被存放到堆栈中。播放录像的时候只需要从头开始依次执行这些命令便可，代码如下：

<html>
<body>
    <button id="replay">播放录像</button>
</body>
<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 () {
            receiver[state]();
        }
    };
    var commands = {
        "119": "jump", // W
        "115": "crouch", // S
        "97": "defense", // A
        "100": "attack" // D
    };
    var commandStack = []; // 保存命令的堆栈
    document.onkeypress = function (ev) {
        var keyCode = ev.keyCode,
            command = makeCommand(Ryu, commands[keyCode]);
        if (command) {
            command(); // 执行命令
            commandStack.push(command); // 将刚刚执行过的命令保存进堆栈
        }
    };
    document.getElementById('replay').onclick = function () { // 点击播放录像
        var command;
        while (command = commandStack.shift()) { // 从堆栈里依次取出命令并执行
            command();
        }
    };
</script>
</html>

宏命令
宏命令是一组命令的集合，通过执行宏命令的方式，可以一次执行一批命令。想象一下，家里有一个万能遥控器，每天回家的时候，只要按一个特别的按钮，它就会帮我们关上房间门，顺便打开电脑并登录 QQ。
下面我们看看如何逐步创建一个宏命令。首先，我们依然要创建好各种 Command

var closeDoorCommand = {
    execute: function () {
        console.log('关门');
    }
};
var openPcCommand = {
    execute: function () {
        console.log('开电脑');
    }
};
var openQQCommand = {
    execute: function () {
        console.log('登录 QQ');
    }
};

接下来定义宏命令 MacroCommand ，它的结构也很简单。 macroCommand.add 方法表示把子命令添加进宏命令对象，当调用宏命令对象的 execute 方法时，会迭代这一组子命令对象，并且依次执行它们的 execute 方法：

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 macroCommand = MacroCommand();
macroCommand.add(closeDoorCommand);
macroCommand.add(openPcCommand);
macroCommand.add(openQQCommand);
macroCommand.execute();

当然我们还可以为宏命令添加撤销功能，跟 macroCommand.execute 类似，当调macroCommand.undo 方法时，宏命令里包含的所有子命令对象要依次执行各自的 undo 操作。宏命令是命令模式与组合模式的联用产物

智能命令：“聪明”的命令对象可以直接实现请求，这样一来就不再需要接收者的存在，
傻瓜命令：它只负责把客户的请求转交给接收者来执行，这种模式的好
处是请求发起者和请求接收者之间尽可能地得到了解耦。