《JavaScript 设计模式与实战》—— 命令模式

292 阅读1分钟

命令模式

命令模式是最简单和优雅的模式之一,命令模式中的命令指的是一个执行某些特定对象的指令。

在 JavaScript 中,我们可以换种说法。

命令模式中的命令指的是执行某些特定对象的函数。

先看一下 JavaScript 中的命令模式。

function bindClick(button, func) {
    button.onclick = func;
}

这就是 JavaScript 中的命令模式。是不是很简单,func 就是命令模式中的命令。

其实命令模式的由来,其实是回调函数的一个面向对象的替代品。

撤销命令

命令模式的作用不仅是封装运算块,而且可以很方便的给命令对象增加撤销操作。

function createCommand() {
    let count = 0;
    let oldCount = 0;

    function command() {
        oldCount = count;
        count++;
    }

    function back() {
        count = oldCount;
    }

    return {
        command,
        back,
    };
}
const { command, back } = createCommand();
function bindClick(button, func) {
    button.onclick = func;
}

通过缓存原始信息,可以很轻松的实现撤销命令的操作。

命令重做

可以把执行过的命令都缓存到一个历史命令队列,通过重新执行命令的方式回到第几次执行命令。

const commander = {
    up() {
        console.log('up');
    },
    down() {
        console.log('down');
    },
    left() {
        console.log('left');
    },
    right() {
        console.log('right');
    },
};
let commandQueue = [];
function bindClick(button, command) {
    commandQueue.push(command);
    button.onclick = command;
}

通过一个命令队列,我们可以实现命令回退的效果。

我们还可以通过定义一组命令的方式生成一个宏命令。

实现方法很简单,把子命令添加到宏命令数组中,并一次执行就好。