JavaScript设计模式——命令模式

时间 2019-11-09

原文原文链接

　　命令模式是JavaScript设计模式中行为型的一种设计模式；html

　　定义：前端

　　向某些对象发送请求，可是并不知道被请求的操做具体是什么，因此咱们但愿以一种松耦合的方式来设计程序，使得请求发送者和接收者之间可以消除彼此之间的耦合关系；而咱们的这种松耦合的方式就是命令模式；java

　　白话解释：web

　　假如你是大家公司研发部门团队leader，这时大家领导分布给你一个任务，你粗略的看了一下，很简单的需求比较容易实现；而你做为团队leader，天天确定会有不少事情，因此你准备把需求直接丢给组员去开发和实现；领导根本不在乎是你作的仍是你让谁作的，领导要的只是最终成果！这里领导就是命令的发布者，而你就是命令的接收者；设计模式

　　代码实现：数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <button id="button1">发布命令给前端</button>
        <button id="button2">发布命令给后台</button>
</body>
<script>

    var button1 = document.getElementById("button1");
    var button2 = document.getElementById("button2");
    // 定义命令
    var command = function(Executor,func){
        Executor.onclick = func;
    }
    // 定义领导
    var Leader = {};
    
    Leader.teamleader = {
        web:function(){
            console.log("前端立刻完成");
        },
        java:function(){    
            console.log("后台立刻完成")
        }
    }

    command(button1,Leader.teamleader.web);
    command(button2,Leader.teamleader.java);
</script>
</html>

　　运行结果：微信

　　这里的将命令对象单独的定义为一个方法，根据参数执行不一样的任务。点击不一样按钮的时候，执行不一样的命令；学习

　　宏命令：ui

　　　　宏命令是一组命令的集合，经过执行宏命令的方式能够一次性执行一批命令；
this

　　　　电脑开机自启动项：如今不少软件都默认添加了电脑开机自启动，就是咱们电脑开机以后默认启动某些特定的软件；这就是一种宏命令的场景；

    var QQCommand = {
        excute:function(){
            console.log("自启动QQ成功");
        }
    }

    var weChatCommand = {
        excute:function(){
            console.log("自启动微信成功");
        }
    }

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

    var macroCommand = MacroCommand();
    macroCommand.add(QQCommand);
    macroCommand.add(weChatCommand);
    macroCommand.excute();

　　上面的代码中，咱们在宏命令对象中定义了一个list数组，而后经过add方法进行添加到执行队列中，所谓的执行队列就是list这个数组，而后咱们经过循环来依次执行命令，这就产生了咱们的宏命令，经过一个命令一键启动多个任务；

　　命令模式其实就是定义一个命令对象，请求发布者经过参数化的形式传入参数来进行执行具体不一样的操做，来达到请求发布者与接收者的解耦；

　　最后的话：

本系列一共写了十篇经常使用的JavaScript设计模式的文章，参考了大量的资料加上本身的理解但愿以最通俗易懂的方式来说给你们听，因为本人水平和精力有限，理解有误的地方请及时指出，设计模式系列文章暂时先搁置，后续再补充；下个月开始准备系统学习ES6，完成ES6系列文章；