JavaScript命令模式详解：从基础解耦到宏命令实现

命令模式基础概念

命令模式属于JavaScript设计模式中的行为型类别；

定义：该模式旨在向特定对象发送请求，但无需知晓具体的操作细节。通过这种松耦合的设计方式，请求的发送方与接收方得以消除直接依赖；这种实现解耦的手段即为命令模式；

通俗解释：假设你是研发团队负责人，接到上级下达的任务。经过初步评估，你发现需求简单且易于实现。但由于日常事务繁多，你决定将具体开发工作分配给团队成员。上级并不关心执行者是谁，只关注最终交付成果。在此场景中，上级是命令的发起者，而你作为负责人则是命令的接收者和分发者；

代码实现：

<!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>

运行结果：

上述代码将命令对象封装为独立方法，依据传入参数执行不同任务。当点击不同按钮时，会触发对应的命令执行逻辑；

宏命令：

宏命令是指一组命令的集合，通过执行宏命令可以一次性批量执行多个子命令；

实际场景：许多软件在电脑开机时自动启动，即开机自启动功能。这属于宏命令的典型应用场景；

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系列文章；

以上是关于JavaScript设计模式之命令模式的详细内容，更多JavaScript设计模式相关资料请关注本站其他文章！