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

命令模式的用途：

命令模式是最简单和优雅的模式之一，命令模式中的命令（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语言中的一种隐形的模式。

时间： 2024-10-27 12:50:14

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

JavaScript设计模式与开发实践---读书笔记(7) 迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. JavaScript中的Array.prototype.foreach. 1.JQuery中的迭代器 $.each函数 2.自己实现一个each函数 var each = function(ary,callback){ for(var i=0,l=ary.length;i<l;i++){ callback.call(ary[i],i,ary[i]);//把下标和元素当作参数传给callback函数 }

JavaScript设计模式与开发实践---读书笔记(5) 策略模式

策略模式的定义是:定义一系列的算法,把它们一个个封转起来,并且使它们可以相互替换. JavaScript版本的策略模式: 奖金系统: var strategies = { "S": function(salary){ return salary*4; }, "A": function(salary){ return salary*3; }, "B": function(salary){ return salary*2; } }; var calc

JavaScript设计模式与开发实践---读书笔记(10) 组合模式

组合模式就是用小的子对象来构建更大的对象,而这些小的子对象也许是由更小的"孙对象"构成的. 组合模式将对象组合成树形结构,以表示"部分-整体"的层次结构. 抽象类在组合模式中的作用: 组合模式最大的优点在于可以一致地对待组合对象和基本对象.这种透明性带来的便利,在静态类型语言中体现的尤为明显. JavaScript中实现组合模式的难点在于要保证组合对象和叶对象拥有同样的方法,这通常需要用鸭子类型的思想对它们进行接口检查. 透明性带来的安全问题: 组合模式的例子-扫描

JavaScript 设计模式与开发实践读书笔记 http://www.open-open.com/lib/view/open1469154727495.html

JavaScript 设计模式与开发实践读书笔记 最近利用碎片时间在 Kindle 上面阅读<JavaScript 设计模式与开发实践读书>这本书,刚开始阅读前两章内容,和大家分享下我觉得可以在项目中用的上的一些笔记. 我的 github 项目会不定时更新,有需要的同学可以移步到我的 github 中去查看源码: https://github.com/lichenbuliren/design-mode-notes 1.currying 函数柯里化 currying 又称 部分求值 .一个 cu

JavaScript设计模式与开发实践-读书笔记（3）闭包和高阶函数

闭包(closure) 闭包的形成与变量的作用域以及变量的生存周期密切相关. 变量的作用域,就是指变量的有效范围. 全局变量和局部变量. 在JavaScript中,函数可以用来创造函数作用域. 变量的生存周期,全局变量的生命周期是永久的,除非我们主动销毁这个全局变量. 对于在函数体内用var关键字声明的局部变量来说,当退出函数时,这些局部变量即失去了它们的价值,它们都会随着函数调用的结束而被销毁. 利用闭包我们可以完成许多奇妙的工作. 闭包的作用: 1.封转变量 闭包可以帮助我们把一些不需要暴露

JavaScript设计模式与开发实践——读书笔记1.高阶函数(下)

上部分主要介绍高阶函数的常见形式,本部分将着重介绍高阶函数的高级应用. 1.currying currying指的是函数柯里化,又称部分求值.一个currying的函数会先接受一些参数,但不立即求值,而是继续返回给另一个函数,通过闭包存储起来.等到函数被真正需求要求值的时候,将之前传入的参数统一起来求值.例如,我们要计算一个月的开销,我们并不需要计算每天具体花了多少,而是需要计算月底总共花掉多少,也就是说,实际上我们只需要在月底计算一次.所以每个月的前29天,我们都只需要保存好当天的开销,到30

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

前言 设计模式的定义是:在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案. 从某些角度来看,设计模式确实有可能带来代码量的增加,或许会把系统的逻辑搞的更复杂.但软件开发的成本并非全部在开发阶段,设计模式的作用是让人们写出可复用和可维护性高的程序. 所有设计模式的实现都遵循一条原则,即“找出程序中变化的地方,并将变化封装起来”. 不变和稳定的部分是非常容易复用的. 分辨模式的关键是意图而不是结构 模式只有放在具体的环境下才有意义,辨别模式的关键是这个模式出现的场景,以及为我们解决的问题.

Javascript设计模式与开发实践读书笔记（1-3章）

第一章 面向对象的Javascript 1.1 多态在面向对象设计中的应用   多态最根本好处在于,你不必询问对象“你是什么类型”而后根据得到的答案调用对象的某个行为--你只管调用行为就好,剩下的一切多态会搞定 换句话说就是:多态的最根本作用就是把过程化的条件分支语句转化为对象的多态性,从而消除这些条件分支语句 例子:假设有一个地图应用,每个地图API提供商都提供了show方法,负责在页面上显示地图,首先我们用一些分支条件语句来实现一个调用方法renderMap 此时一旦需要增加搜搜地图的应用,

JavaScript设计模式与开发实践---读书笔记(8) 发布-订阅模式

发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布-订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案. 可以取代对象之间硬编码的通知机制,一个对象不用再显式地调用另外一个对象的某个接口. 自定义事件 首先要指定好谁充当发布者: 然后给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者: 最后发布消息时,发布者会遍历这个缓存列表,依次触发里面存放的订阅者回调函数. 另外,我们还可以往回调函数里填入