前端设计模式之命令模式

最新推荐文章于 2023-10-19 10:38:29 发布

我是祖国的小花朵啊

最新推荐文章于 2023-10-19 10:38:29 发布

阅读量339

点赞数

分类专栏：设计模式文章标签：设计模式

本文链接：https://blog.csdn.net/crazy_rabit/article/details/103768998

版权

设计模式专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细介绍了设计模式中的命令模式，包括模式动机、定义、结构和优缺点。通过实例解析，阐述了如何在前端开发中降低系统耦合度，实现请求调用者与接收者的解耦，同时说明了命令模式在宏命令和撤销/恢复操作中的应用。

摘要由CSDN通过智能技术生成

模式动机

在软件设计中，我们经常需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是哪个，我们只需在程序运行时指定具体的请求接收者即可，此时，可以使用命令模式来进行设计，使得请求发送者与请求接收者消除彼此之间的耦合，让对象之间的调用关系更加灵活。

在这里插入图片描述

命令模式可以对发送者和接收者完全解耦，发送者与接收者之间没有直接引用关系，发送请求的对象只需要知道如何发送请求，而不必知道如何完成请求。这就是命令模式的模式动机。

模式定义

命令模式(Command Pattern)：将一个请求封装为一个对象，从而使我们可用不同的请求对客户进行参数化；对请求排队或者记录请求日志，以及支持可撤销的操作。命令模式是一种对象行为型模式，其别名为动作(Action)模式或事务(Transaction)模式。
使用频率：中高
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XvGC3423-1577695475868)(https://ceph-dev-pub.dz11.com/fed-doc/1560912893315.png)]

模式结构

在这里插入图片描述
命令模式包含如下角色：

Command: 抽象命令类
ConcreteCommand: 具体命令类
Invoker: 调用者
Receiver: 接收者
Client:客户类

模式分析

命令模式的本质是对命令进行封装，将发出命令的责任和执行命令的责任分割开。
每一个命令都是一个操作：请求的一方发出请求，要求执行一个操作；接收的一方收到请求，并执行操作。
命令模式允许请求的一方和接收的一方独立开来，使得请求的一方不必知道接收请求的一方的接口，更不必知道请求是怎么被接收，以及操作是否被执行、何时被执行，以及是怎么被执行的。
命令模式使请求本身成为一个对象，这个对象和其他对象一样可以被存储和传递。
命令模式的关键在于引入了抽象命令接口，且发送者针对抽象命令接口编程，只有实现了抽象命令接口的具体命令才能与接收者相关联。

典型的抽象命令类代码：

public abstract class Command
{
	public abstract void execute();
}

典型的调用者代码：

 public class Invoker
{
	private Command command;
	
	public Invoker(Command command)
	{
		this.command=command;
	}
	
	public void setCommand(Command command)
	{
		this.command=command;
	}
	
	//业务方法，用于调用命令类的方法
	public void call()
	{
		command.execute();
	}
}

典型的具体命令类代码：

 public class ConcreteCommand extends Command
{
	private Receiver receiver;
	public void execute()
	{
		receiver.action();
	}
}

典型的请求接收者代码：

 public class Receiver
{
	public void action()
	{
		//具体操作
	}
}

命令模式顺序图：

在这里插入图片描述

命令模式实例与解析

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

下面我们看看如何逐步创建一个宏命令。首先，我们依然要创建好各种 Command ：

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);
        },
        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();