命令模式

男娘i 2022-06-05 22:40 122阅读 0赞

#### 命令模式 ####

命令模式最常见的应用场景是：有时需要向某些对象发送请求，但是不知道请求的接受者是谁，也不知道请求的操作是什么。此时希望用一种松耦合的方式设计程序，使得请求发送者和请求接受者能消除彼此之间的耦合关系。

var button1 = document.getElementById('btn1')
        var button2 = document.getElementById('btn2')
        var button3 = document.getElementById('btn3')
    
        var  setCommand = function (button,command) { 
            button.onclick = function () { 
                command.execute()
            }
        }
        var MenuBar = {
            refresh: function () { 
                console.log('刷新菜单目录')
            }
        }
        var SubBar = {
            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(SubBar)
        var delSubMenuCommand = new DelSubMenuCommand(SubBar)
    
        setCommand(button1,refreshMenuBarcommand)
        setCommand(button2,addSubMenuCommand)
        setCommand(button3,delSubMenuCommand)

#### 命令模式实现重放 ####

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <button id="replay">播放录像</button>
        <script> var Ryu = { attack:function () { console.log('攻击') }, defense:function () { console.log('防御') }, jump:function () { cosole.log('跳跃') }, crouch:function () { console.log('蹲下') } } var makeCommand = function (receiver, state) { return function () { recevier[state]() } } var commands = { '119':'jump', '115':'crouch', '97':'defense', '100':'attack', } 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>
    </body>
    </html>

#### 宏命令 ####

var closeDoor = {
            execute:function () { 
                console.log('关门')
            }
        }
        var openDoor = {
            execute:function () { 
                console.log('开门')
            }
        }
        var MarcoCommand = 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 = new MarcoCommand()
        macroCommand.add(closeDoor)
        macroCommand.add(openDoor)
        macroCommand.execute();