命令模式

WEB前端 waitig 490℃ 百度已收录 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();

本文由【waitig】发表在等英博客
本文固定链接:命令模式
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)