js之命令模式_js execute-CSDN博客

本文链接：https://blog.csdn.net/linhongyong/article/details/53444008

假设有一个快餐店，而我是该餐厅的点餐服务员，那么我一天的工作应该是这样的：当某位客人点餐或者打来订餐电话后，我会把他的需求都写在清单上，然后交给厨房，客人不用关心是哪些厨师帮他炒菜。我们餐厅还可以满足客人需要的定时服务，比如客人可能当前正在回家的路上，要求 1个小时后才开始炒他的菜，只要订单还在，厨师就不会忘记。客人也可以很方便地打
电话来撤销订单。另外如果有太多的客人点餐，厨房可以按照订单的顺序排队炒菜。

这些记录着订餐信息的清单，便是命令模式中的命令对象。

命令模式level01：

假设我们正在编写一个用户界面程序，该用户界面上至少有数十个 Button 按钮。因为项目比较复杂，所以我们决定让某个程序员负责绘制这些按钮，而另外一些程序员则负责编写点击按
钮后的具体行为，这些行为都将被封装在对象里。在大型项目开发中，这是很正常的分工。对于绘制按钮的程序员来说，他完全不知道某个按钮未来将用来做什么，可能用来刷新菜单界面，也可能用来增加一些子菜单，他只知道点击这个按钮会发生某些事情。那么当完成这个按钮的绘制之后，应该如何给它绑定onclick 事件呢？

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

我们很快可以找到在这里运用命令模式的理由：点击了按钮之后，必须向某些负责具体行为的对象发送请求，这些对象就是请求的接收者。但是目前并不知道接收者是什么对象，也不知道
接收者究竟会做什么。此时我们需要借助命令对象的帮助，以便解开按钮和负责具体行为对象之间的耦合。

设计模式的主题总是把不变的事物和变化的事物分离开来，命令模式也不例外。按下按钮之后会发生一些事情是不变的，而具体会发生什么事情是可变的。通过 command 对象的帮助，将来我们可以轻易地改变这种关联，因此也可以在将来再次改变按钮的行为。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="button1">点击按钮 1</button>
    <button id="button2">点击按钮 2</button>
    <button id="button3">点击按钮 3</button>
    <script>
        var button1 = document.getElementById( 'button1' );
        var button2 = document.getElementById( 'button2' );
        var button3 = document.getElementById( 'button3' );

       /* 接下来定义 setCommand 函数， setCommand 函数负责往按钮上面安装命令。可以肯定的是，点
        击按钮会执行某个 command 命令，执行命令的动作被约定为调用 command 对象的 execute() 方法。
        虽然还不知道这些命令究竟代表什么操作，但负责绘制按钮的程序员不关心这些事情，他只需要
        预留好安装命令的接口， command 对象自然知道如何和正确的对象沟通：*/
        var setCommand = function( button, command ){
            button.onclick = function(){
                command.execute();
            }
        };

        //功能对象
        var MenuBar = {
            refresh: function(){
                console.log( '刷新菜单目录' );
            }
        };
        var SubMenu = {
            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( '删除子菜单' );
        };
//        最后就是把命令接收者传入到 command 对象中，并且把 command 对象安装到 button 上面：
        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>
</body>
</html>

JavaScript 中的命令模式level02

在面向对象设计中，命令模式的接收者被当成 command 对象的属性保存起来，同时约定执行命令的操作调用 command.execute 方法。在使用闭包的命令模式实现中，接收者被封闭在闭包产生的环境中，执行命令的操作可以更加简单，仅仅执行回调函数即可。无论接收者被保存为对象的属性，还是被封闭在闭包产生的环境中，在将来执行命令的时候，接收者都能被顺利访问。用闭包实现的命令模式如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="button1">点击按钮 1</button>
    <script>
        var button1 = document.getElementById( 'button1' );
        var button2 = document.getElementById( 'button2' );
        var button3 = document.getElementById( 'button3' );

        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 = RefreshMenuBarCommand( MenuBar );
        setCommand( button1, refreshMenuBarCommand );
    </script>
</body>
</html>

JavaScript 中的命令模式level03

当然，如果想更明确地表达当前正在使用命令模式，或者除了执行命令之外，将来有可能还要提供撤销命令等操作。那我们最好还是把执行函数改为调用 execute 方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="button1">点击按钮 1</button>
    <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( '刷新菜单界面' );
            }
        };
        var RefreshMenuBarCommand = function( receiver ){
            return {
                execute: function(){
                    receiver.refresh();
                }
            }
        };
        var refreshMenuBarCommand = RefreshMenuBarCommand( MenuBar );
        setCommand( button1, refreshMenuBarCommand );
    </script>
</body>
</html>

JavaScript 中的命令模式level03：撤销命令

给点击事件绑定命令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="replay">播放录像</button>
    <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 ); // 将刚刚执行过的命令保存进堆栈
            }
        };w
        document.getElementById( 'replay' ).onclick = function(){ // 点击播放录像
            var command;
            while( command = commandStack.shift() ){ // 从堆栈里依次取出命令并执行
                command();
            }
        };
    </script>
</body>
</html>

命令队列

在订餐的故事中，如果订单的数量过多而厨师的人手不够，则可以让这些订单进行排队处理。第一个订单完成之后，再开始执行跟第二个订单有关的操作。

队列在动画中的运用场景也非常多，比如之前的小球运动程序有可能遇到另外一个问题：有些用户反馈，这个程序只适合于 APM小于 20的人群，大部分用户都有快速连续点击按钮的习惯，当用户第二次点击 button的时候，此时小球的前一个动画可能尚未结束，于是前一个动画会骤然停止，小球转而开始第二个动画的运动过程。但这并不是用户的期望，用户希望这两个动画会排队进行。

把请求封装成命令对象的优点在这里再次体现了出来，对象的生命周期几乎是永久的，除非我们主动去回收它。也就是说，命令对象的生命周期跟初始请求发生的时间无关， command 对象
的 execute 方法可以在程序运行的任何时刻执行，即使点击按钮的请求早已发生，但我们的命令对象仍然是有生命的。

所以我们可以把 div的这些运动过程都封装成命令对象，再把它们压进一个队列堆栈，当动画执行完，也就是当前 command 对象的职责完成之后，会主动通知队列，此时取出正在队列中等
待的第一个命令对象，并且执行它。

我们比较关注的问题是，一个动画结束后该如何通知队列。通常可以使用回调函数来通知队列，除了回调函数之外，还可以选择发布订阅模式。即在一个动画结束后发布一个消息，订阅者接收到这个消息之后，便开始执行队列里的下一个动画。读者可以尝试按照这个思路来自行实现一个队列动画。

宏命令

宏命令是一组命令的集合，通过执行宏命令的方式，可以一次执行一批命令。想象一下，家里有一个万能遥控器，每天回家的时候，只要按一个特别的按钮，它就会帮我们关上房间门，顺便打开电脑并登录 QQ。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var closeDoorCommand = {
            execute: function(){
                console.log( '关门' );
            }
        };
        var openPcCommand = {
            execute: function(){
                console.log( '开电脑' );
            }
        };
        var openQQCommand = {
            execute: function(){
                console.log( '登录 QQ' );
            }
        };
        /*接下来定义宏命令 MacroCommand ，它的结构也很简单。 macroCommand.add 方法表示把子命令添
        加进宏命令对象，当调用宏命令对象的 execute 方法时，会迭代这一组子命令对象，并且依次执
        行它们的 execute 方法：*/
        var MacroCommand = function(){
            return {
                commandsList: [],
                add: function( command ){
                    this.commandsList.push( command );
                },
                undo: function () {//撤销功能

                },
                execute: 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();
    </script>
</body>
</html>

智能命令与傻瓜命令

再看一下我们在 9.7节创建的命令：

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

很奇怪， closeDoorCommand 中没有包含任何 receiver 的信息，它本身就包揽了执行请求的行为，这跟我们之前看到的命令对象都包含了一个 receiver 是矛盾的。

一般来说，命令模式都会在 command 对象中保存一个接收者来负责真正执行客户的请求，这种情况下命令对象是“傻瓜式”的，它只负责把客户的请求转交给接收者来执行，这种模式的好处是请求发起者和请求接收者之间尽可能地得到了解耦。

但是我们也可以定义一些更“聪明”的命令对象，“聪明”的命令对象可以直接实现请求，这样一来就不再需要接收者的存在，这种“聪明”的命令对象也叫作智能命令。没有接收者的智能命令，退化到和策略模式非常相近，从代码结构上已经无法分辨它们，能分辨的只有它们意图的不同。策略模式指向的问题域更小，所有策略对象的目标总是一致的，它们只是达到这个目标的不同手段，它们的内部实现是针对“算法”而言的。而智能命令模式指向的问题域更广， command对象解决的目标更具发散性。命令模式还可以完成撤销、排队等功能。