命令模式

来源：互联网发布：互联网与大数据的区别编辑：程序博客网时间：2024/06/05 02:01

命令模式

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

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

阅读全文

0 0