首页 > 其他分享 >前端开发设计模式——命令模式

前端开发设计模式——命令模式

时间:2024-10-16 19:51:07浏览次数:9  
标签:调用者 对象 接收者 模式 命令 command 设计模式 前端开发

目录

一、命令模式的定义和特点

1.定义:                

2. 特点:

二、命令模式的结构与原理

1.结构:

2.原理:

三、命令模式的实现方式

1.定义接口命令:

2.创建具体的命令类:

3.定义接收者:

4.创建调用者:

四、命令模式的使用场景

1.界面按钮的点击操作:

        1.1  定义命令接口和接收者

        1.2 创建具体命令类:

        1.3 创建调用者:

        1.4 使用示例:

2.表单提交:

3.可撤销的操作:

五、命令模式的优点

六、命令模式的缺点

七、命令模式的注意事项

1.合理设计命令对象:

2.考虑命令的撤销和重做:

3.注意命令的性能:


一、命令模式的定义和特点

1.定义:                

        在前端开发中,命令模式是一种行为设计模式,它将请求封装成一个对象,从而使你可以用不同的请求对客户进行参数化,对请求排队或记录请求日志,以及支持可撤销的操作。

2. 特点:

        解耦请求的发送者和接收者。发送者无需了解接收者的具体实现,只需要知道如何发送一个命令对象。

                易于实现可撤销的操作。可以通过保存命令对象的历史记录,实现撤销和重做功能。

                支持命令的排队和执行。可以将多个命令对象放入队列中,依次执行。

二、命令模式的结构与原理

1.结构:

        命令接口:定义了执行命令的方法。

        具体命令类:实现命令接口,封装了具体的请求操作。

        调用者:负责接收请求并执行相应的命令。

        接收者:执行具体的操作。

2.原理:

        调用者接收命令对象,并调用命令对象的执行方法。命令对象持有接收者的引用,并在执行方法中调用接收者的具体操作。

三、命令模式的实现方式

1.定义接口命令:

interface Command {
  execute(): void;
}

2.创建具体的命令类:

class ConcreteCommand implements Command {
  private receiver: Receiver;

  constructor(receiver: Receiver) {
    this.receiver = receiver;
  }

  execute() {
    this.receiver.action();
  }
}

3.定义接收者:

class Receiver {
  action() {
    console.log('Receiver is performing an action.');
  }
}

4.创建调用者:

class Invoker {
  private command: Command;

  setCommand(command: Command) {
    this.command = command;
  }

  executeCommand() {
    this.command.execute();
  }
}

四、命令模式的使用场景

1.界面按钮的点击操作:

        可以将按钮的点击事件封装成命令对象,当按钮被点击时,调用者执行相应的命令对象,从而实现具体的操作。

        示例:网页按钮的点击操作

        1.1  定义命令接口和接收者

                (1)命令接口:

interface Command {
  execute(): void;
}

                 这个接口定义了一个execute方法,用于执行命令。

                (2)接收者(处理具体操作的对象):

class ButtonHandler {
  clickAction() {
    console.log('Button was clicked!');
  }
}

                 这个接收者类有一个方法clickAction,用于处理按钮点击后的具体操作。

        1.2 创建具体命令类:
class ButtonClickCommand implements Command {
  private handler: ButtonHandler;

  constructor(handler: ButtonHandler) {
    this.handler = handler;
  }

  execute() {
    this.handler.clickAction();
  }
}

                这个命令类在execute方法中调用接收者的clickAction方法 。

        1.3 创建调用者:
class Invoker {
  private command: Command;

  setCommand(command: Command) {
    this.command = command;
  }

  triggerCommand() {
    this.command.execute();
  }
}

                调用者有设置命令和触发命令执行的方法。 

        1.4 使用示例:
const handler = new ButtonHandler();
const command = new ButtonClickCommand(handler);
const invoker = new Invoker();

invoker.setCommand(command);
invoker.triggerCommand();

        在这个示例中,当点击按钮时(这里模拟通过调用者触发),调用者Invoker执行命令对象ButtonClickCommand,命令对象再调用接收者ButtonHandler的方法来完成具体的操作。这样就实现了命令模式,将按钮点击操作与具体的处理逻辑解耦 

2.表单提交:

        将表单提交的操作封装成命令对象,在提交表单时,调用者执行命令对象,进行数据验证、提交等操作。

3.可撤销的操作:

        通过保存命令对象的历史记录,可以实现撤销和重做功能。

五、命令模式的优点

        1.解耦了请求的发送者和接收者,使得代码更加灵活和可维护。

        2.易于实现可撤销的操作,提高了用户体验。

        3.支持命令的排队和执行,方便进行复杂的操作控制。

六、命令模式的缺点

        1.可能会增加系统的复杂性,特别是当命令对象的数量较多时。

        2.需要额外的代码来实现命令模式,增加了开发成本。

七、命令模式的注意事项

1.合理设计命令对象:

        命令对象应该尽可能地独立和可复用,避免与特定的调用者或接收者紧密耦合。

2.考虑命令的撤销和重做:

        如果需要实现可撤销的操作,需要在命令对象中保存足够的信息,以便能够撤销和重做操作。

3.注意命令的性能:

        如果命令对象的执行时间较长,可能会影响系统的性能。可以考虑使用异步执行或者优化命令的实现

关于设计模式中的命令模式就介绍到这了,如果对于其他模式感兴趣的话,可以点击右下角的“专栏目录”查看更多设计模式。码字不易,点个赞再走吧

标签:调用者,对象,接收者,模式,命令,command,设计模式,前端开发
From: https://blog.csdn.net/jxnd123456/article/details/142937385

相关文章

  • 35岁前端开发者:转型还是坚守?
    在互联网行业,35岁似乎成了一个敏感的年龄分水岭。很多前端开发者开始思考:到了35岁,是不是都要转型?本文将探讨这个话题,希望能为面临这一困惑的前端开发者提供一些参考。一、35岁焦虑:现实还是误解?在互联网行业,35岁焦虑并非个别现象。很多前端开发者担心随着年龄的增长,自己的技术......
  • Sharding-JDBC标准模式详解
    Sharding-JDBC标准模式详解一.为什么要使用标准模式?Sharding-JDBC的标准模式就配置而言比inline模式繁琐多了,那为什么要使用标准模式呢Sharding-JDBC作为ApacheShardingSphere生态中的一款轻量级Java框架,提供了数据分片、读写分离、分布式事务和数据库治理等核心功......
  • 前端开发 --JavaScript
    前言html种script主要包括内联script和引用外部JavaScript文件两张方式1.内联script的用法内联script指的是将JavaScript代码直接写在html文档中某个部位<!--内嵌--><script>alert(1)</script><script>windowonload=function(){vara......
  • WSL2 提示 NAT 模式下的 WSL 不支持 localhost 代理。
    wsl:检测到localhost代理配置,但未镜像到WSL。NAT模式下的WSL不支持localhost代理。意思是说你在宿主机上启用了代理设置,指向localhost(宿主自己),但是WSL虚拟机是处在一个NAT的子网下的,没有设置指向宿主的代理。要想让WSL虚拟机使用宿主机的代理,就需要设置指向宿......
  • Bocha Web Search API:使用Langchain的Agent模式通过Tool Use调用博查 Search API实现L
    上篇文章介绍了国内可用的博查WebSearchAPI,详见:使用博查WebSearchAPI获取搜索引擎的网页链接和文本摘要,给AI/RAG应用增加联网搜索功能本篇讲述一下如何通过LangChain的FunctionCall方式使用它。1.安装LangChainpipinstalllangchainopenai2.获取博查......
  • 凯中故障6:Outlook无法连接到Exchange Server(MAPI模式)
    凯中故障6:Outlook无法连接到ExchangeServer(MAPI模式)问题现象:组织中有一个邮箱账户无法连接至exchange(MAPI)模式,其他邮箱账户正常。尝试在outlook”发送/接收“菜单点击”更新文件夹“出现下图报错:我做了一些尝试:1.使用Foxmail的exchange模式连接exchangeserver一切正常2.......
  • C++中如何使用单例模式管理全局变量
    单例模式(SingletonPattern)是一种常用的设计模式,旨在确保一个类只有一个实例,并提供一个全局的访问点。要使用单例模式管理全局变量,可以通过控制类的实例化过程,防止多个对象的创建。这样做不仅可以保证数据一致性,还能避免使用直接的全局变量带来的命名冲突和潜在的多线程安全问题。......
  • 【web服务】耗时任务基于API与worker模式
    场景:当我们爬虫或者获取数据需要很长的时间计算或者等待,这种情况情况下基于API与worker模式完成交付1.API端:用flask框架importjsonimportuuidimportredisfromflaskimportFlask,request,jsonifyapp=Flask(__name__)pool=redis.ConnectionPool(host='127.0.0......
  • Pytest参数详解 — 基于命令行模式
    Hey,大家周二好啊!今天我们来聊聊一个非常实用的话题:Pytest的命令行参数。Pytest是一个强大的Python测试框架,它支持简单的单元测试和复杂的功能测试。但是,你真的了解如何充分利用Pytest的命令行参数来优化你的测试流程吗?如果你还不是很清楚,那么这篇文章就是为你准备的!在Python的......
  • AMIS低代码平台,前端开发常见问题(一)
    1.快速进去系统快捷键Ctrl+q2.CRUD(增删改查)添加序号。"tpl":"${index+1}"代码如下:{ "type":"text", "label":"序号", "placeholder":"-", "body":[ ], "id":"u:......