码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript设计模式与开发实践---读书笔记(9) 命令模式

时间:2016-10-09 20:12:58      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:

命令模式的用途:

命令模式是最简单和优雅的模式之一,命令模式中的命令(command)指的是一个执行某些特定事情的指令。

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

命令模式的例子-菜单程序:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命令模式-菜单程序</title>
</head>
<body>
    <button id="button1">1</button>
    <button id="button2">2</button>
    <button id="button3">3</button>
</body>
</html>
<script>
    var button1 = document.getElementById(‘button1‘);
    var button2 = document.getElementById(‘button2‘);
    var button3 = document.getElementById(‘button3‘);
    var setCommand = function(button,command){    
        button.onclick = function(){
            command.execute();
        }
    };

    var MenuBar = {
        refresh: function(){
            console.log(‘刷新菜单目录‘);
        },
        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(){
        console.log(‘删除子菜单‘);
    };

    var refreshMenuBarCommand = new RefreshMenuBarCommand(MenuBar);
    var addSubMenuCommand = new AddSubMenuCommand(SubMenu);
    var delSubMenuCommand = new DelSubMenuCommand(SubMenu);

    setCommand(button1,refreshMenuBarCommand);
    setCommand(button2,addSubMenuCommand);
    setCommand(button3,delSubMenuCommand);
</script>

以上代码模拟传统面向对象语言的命令模式实现。

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

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

    var MenuBar = {
        refresh: function(){
            console.log(‘刷新菜单目录‘);
        }
    };
//用闭包实现的命令模式如下代码所示:
    var RefreshMenuBarCommand = function(receiver){
        return function(){
            receiver.refresh();
        }
    };
    
    var refreshMenuBarCommand = new RefreshMenuBarCommand(MenuBar);

    setCommand(button1,refreshMenuBarCommand);
//把执行函数改为调用execute方法
    var refreshMenuBarCommand = function(receiver){
        return{
            execute: function(){
                receiver.refresh();
            }
        }
    };

    var setCommand = function(button,command){
        button.onclick = function(){
            command.execute();
        }
    };

    var refreshMenuBarCommand = new RefreshMenuBarCommand(MenuBar);
    setCommand(button1,refreshMenuBarCommand);

撤销命令:

撤销操作的实现一般是给命令对象增加一个名为unexecute或者undo的方法,在该方法里执行exectue的反向操作。

撤消和重做:

很多时候,我们需要撤销一系列的命令。然而,在某些情况下无法顺利地利用undo操作让对象回到execute之前的状态。

canvas画图中,擦除一条线相对不容易实现。这时候最好的办法是先清除画布,然后把刚才执行过的命令全部重新执行一遍,这一点同样可以利用一个历史列表堆栈办到。记录命令日志,然后重复执行它们,这是逆转不可逆命令的一个好办法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>撤销和重做命令</title>
</head>
<body>
    <button id="replay">播放录像</button>
</body>
</html>
<script>
    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(){
            receiver[state]();
        }
    };

    var commands = {
        "119":"jump",//W
        "115":"crouch",//S
        "97":"defense",//A
        "100":"attack"//D
    };

    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>

命令队列

宏命令:

宏命令是一组命令的集合,通过执行宏命令的方式,可以一次执行一批命令。

    var closeDoorCommand = {
        execute: function(){
            console.log(‘关门‘);
        }
    };

    var openPcCommand = {
        execute: function(){
            console.log(‘开电脑‘);
        }
    };

    var openQQCommand = {
        execute: function(){
            console.log(‘登录QQ‘);
        }
    };

    var MacroCommand = function(){
        return {
            commandsList:[],
            add: function(){
                for(var i=0,command;command = this.commandsList[i++]; ){
                    command.execute();
                }
            }
        }
    };

    var macroCommand = MacroCommand();
    macroCommand.add(closeDoorCommand);
    macroCommand.add(openPcCommand);
    macroCommand.add(openQQCommand);
    macroCommand.execute();

宏命令是命令模式与组合模式的联用产物。

智能命令与傻瓜命令

命令模式在JavaScript语言中的一种隐形的模式。

JavaScript设计模式与开发实践---读书笔记(9) 命令模式

标签:

原文地址:http://www.cnblogs.com/6489c/p/5943430.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!