javascript命令模式

javascript命令模式

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

    点击按钮1
    点击按钮2
    点击按钮3

javascript中的命令模式

    点击按钮1
    点击按钮2
    点击按钮3

对命令的撤销或重新执行

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();