【前端设计模式】之命令模式

引言

命令设计模式是一种行为型设计模式,它允许你将命令封装到一个对象中,从而使你可以参数化不同的请求,以及存储、排队、重播和撤销请求。这种设计模式在处理用户界面操作、远程网络请求或其他需要异步执行的操作时非常有用。在前端开发中,我们经常需要处理复杂的操作和交互逻辑。命令模式允许我们将操作封装成对象,并将其作为参数传递、存储或记录,从而实现优雅地管理和执行操作。

命令模式的特性

命令模式具有以下特性:

  1. 命令(Command):封装了一个具体操作及其参数,并提供了执行该操作的方法。
  2. 接收者(Receiver):负责执行具体操作的对象。
  3. 调用者(Invoker):负责调用命令对象并触发其执行方法。
  4. 客户端(Client):创建并配置具体命令对象,并将其传递给调用者进行执行。
  5. 撤销与重做:通过记录历史命令对象,可以实现撤销和重做操作。

应用示例

在前端开发中,我们可以使用命令模式来解决以下问题,并提供相应的代码示例:

1. 按钮点击事件

在处理按钮点击事件时,命令模式可以帮助我们将具体操作封装成命令对象,并将其与按钮关联起来。

 
// 定义命令接口
class Command {execute() {throw new Error("execute() method must be implemented");}
}
// 定义具体命令类
class SaveCommand extends Command {constructor(receiver) {super();this.receiver = receiver;}execute() {this.receiver.save();}
}
class DeleteCommand extends Command {constructor(receiver) {super();this.receiver = receiver;}execute() {this.receiver.delete();}
}
// 定义接收者类
class Receiver {save() {console.log("Saving data...");// 执行保存操作的逻辑}delete() {console.log("Deleting data...");// 执行删除操作的逻辑}
}
// 定义调用者类
class Invoker {setCommand(command) {this.command = command;}executeCommand() {this.command.execute();}
}
// 使用示例
const receiver = new Receiver();
const saveCommand = new SaveCommand(receiver);
const deleteCommand = new DeleteCommand(receiver);
const invoker = new Invoker();
invoker.setCommand(saveCommand);
invoker.executeCommand(); // 输出: "Saving data..."
invoker.setCommand(deleteCommand);
invoker.executeCommand(); // 输出: "Deleting data..."

在这个示例中,有四个主要类:CommandSaveCommandDeleteCommand 和 Receiver

  • Command 是一个抽象类,定义了一个 execute() 方法,但并不实现该方法。这意味着任何继承 Command 的具体类都需要实现自己的 execute() 方法。
  • SaveCommand 和 DeleteCommand 是继承自 Command 的具体命令类。它们都实现了自己的 execute() 方法,分别调用 Receiver 对象的 save() 和 delete() 方法。
  • Receiver 类定义了两个方法:save() 和 delete(),分别代表数据的保存和删除操作。
  • Invoker 类负责处理命令。它有一个 command 属性,可以设置具体的命令对象,并有一个 executeCommand() 方法来执行命令。

示例的使用部分演示了如何使用这些类。首先,创建一个 Receiver 对象,然后创建两个命令对象 saveCommand 和 deleteCommand,它们都接受同一个 Receiver 对象作为参数。接着,创建一个 Invoker 对象,并设置其命令为 saveCommand 和 deleteCommand。最后,通过调用 executeCommand() 方法来执行命令。

2. 键盘快捷键

在处理键盘快捷键时,命令模式可以帮助我们将具体操作封装成命令对象,并将其与特定的快捷键关联起来。

 
// 定义命令接口
class Command {execute() {throw new Error('execute() method must be implemented');}
}
// 定义具体命令类
class CopyCommand extends Command {constructor(receiver) {super();this.receiver = receiver;}execute() {this.receiver.copy();}
}
class PasteCommand extends Command {constructor(receiver) {super();this.receiver = receiver;}execute() {this.receiver.paste();}
}
// 定义接收者类
class Receiver {copy() {console.log('Copying text...');// 执行复制操作的逻辑}paste() {console.log('Pasting text...');// 执行粘贴操作的逻辑}
}
// 定义调用者类
class Invoker {constructor() {this.commands = {};}setCommand(key, command) {this.commands[key] = command;}executeCommand(key) {if (this.commands[key]) {this.commands[key].execute();}}
}
// 使用示例
const receiver = new Receiver();
const copyCommand = new CopyCommand(receiver);
const pasteCommand = new PasteCommand(receiver);
const invoker = new Invoker();
invoker.setCommand('Ctrl+C', copyCommand);
invoker.setCommand('Ctrl+V', pasteCommand);
invoker.executeCommand('Ctrl+C'); // 输出: "Copying text..."
invoker.executeCommand('Ctrl+V'); // 输出: "Pasting text..."

上述示例中定义了一个抽象的命令类 Command,其中包含一个 execute() 方法。具体的命令类 CopyCommand 和 PasteCommand 继承自 Command 类,并实现了各自的 execute() 方法。

然后定义了一个接收者类 Receiver,其中包含 copy() 和 paste() 方法,分别表示复制和粘贴操作的具体逻辑。

接下来定义了一个调用者类 Invoker,其中包含一个 commands 对象用于存储命令对象,以及 setCommand() 和 executeCommand() 方法。setCommand() 方法用于将命令对象与特定的键值进行关联,executeCommand() 方法用于根据给定的键值执行对应的命令。

最后,通过实例化相关的类并进行调用,演示了命令模式的用法。创建了一个接收者对象 receiver,以及两个命令对象 copyCommand 和 pasteCommand。然后创建了一个调用者对象 invoker,并使用 setCommand() 方法将命令对象与对应的键值进行关联。最后通过调用 executeCommand() 方法执行对应的命令,输出相应的结果。

优点和缺点

优点
  1. 解耦操作和接收者:命令模式将操作封装成对象,使得发送者和接收者之间解耦,可以独立变化。
  2. 可扩展性:可以轻松地添加新的具体命令类,而无需修改现有代码。
  3. 支持撤销和重做:通过记录命令历史,可以实现撤销和重做操作。
缺点
  1. 可能导致类的数量增加:每个具体命令类都需要实现一个执行方法,可能会导致类的数量增加。
  2. 命令调用的开销:每个命令都需要创建一个对象,并将其传递给调用者执行,可能会带来一定的性能开销。

总结

命令模式是一种非常有用的设计模式,在前端开发中经常用于管理和执行操作。它通过将操作封装成对象,并将其作为参数传递、存储或记录,实现了优雅地管理和执行操作。通过使用命令模式,我们可以提高代码的可维护性和可扩展性。然而,在应用命令模式时需要权衡其带来的优缺点,并根据具体情况进行选择。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/113154.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ArduPilot开源飞控之AP_OpticalFlow

ArduPilot开源飞控之AP_OpticalFlow 1. 源由2. 框架设计2.1 启动代码2.2 任务代码 update2.3 任务代码 handle_msg2.4 任务代码 handle_msp2.5 任务代码 do_aux_function 3. 重要例程3.1 AP_OpticalFlow3.2 init3.3 update3.4 handle_msg3.5 handle_msp3.6 start_calibration3.…

代码随想录Day24 LeetCode T491 递增子序列 LeetCode T46 全排列 LrrtCode T47 全排列II

LeetCode T491 递增子序列 题目链接:491. 递增子序列 - 力扣(LeetCode) 题目思路: 首先这里的测试用例很容易误导我们,这道题不能使用上次子集的思路对数组先排序,使用一个used数组来解决问题. 我们用[4,7,6,7]举例这道题的递增序列不存在[4,6,7,7]这个…

合同管理系统

合同管理系统 功能介绍: 功能特性: 根据对合同管理系统系统分析合同管理由以下模块组成,相对方管理、合同文本管理、合同审批管理、合同履行审批、风险事件管理、合同查询、合同统计、系统提醒、系统管理。 1、相对方管理 1.有“相对方…

SpringBoot环境搭建与初创程序

一:IDEA环境准备 IDEA社区版版本: 2021.1-2022.1.4 IDEA专业版版本: 无要求 🌟如果个人电脑安装的IEDA不在这个范围,需要卸载重新安装;且⼀定要删除注册表 参考文章➜IDEA卸载和删除注册表 二: Maven (1)Maven的概念…

第六届“中国法研杯”司法人工智能挑战赛进行中!

第六届“中国法研杯”司法人工智能挑战赛 赛题上新! 第六届“中国法研杯”司法人工智能挑战赛(LAIC2023)目前已发布司法大模型数据和服务集成调度 、证据推理、司法大数据征文比赛、案件要素识别四大任务。本届大赛中,“案件要素…

克隆的虚拟机,查不到IP号

文章目录 问题解决描述解决步骤重新生成MAC地址修改一修改二 相关操作查看当前所有网卡修改网络配置文件文件内容修改修改文件名 问题解决 描述 使用克隆的虚拟机,网卡和原虚拟机的相同,会导致克隆虚拟机的网卡不可用,从而使用ip addr查看不…

上新啦!请查收云原生虚拟数仓 PieCloudDB 十月动态

PieCloudDB Database 最新动态 PieCloudDB 压缩效率得到提升 为了节省存储空间,降低用户存储费用,PieCloudDB 在压缩率上不断优化,包括: 对 HLL(HyperLogLog)支持游程编码(Run Length Encodi…

Visual Studio2019 与 MySQL连接 版本关系

Refer: VS 连接MySQL | mysql-for-visualstudio 的安装-CSDN博客 【精选】用VS2019(C#)连接MYSQL(从0入门,手把手教学)_mysql-for-visualstudio-1.2.9.msi_Flying___rabbit的博客-CSDN博客 一、工具:VS2019需要连接M…

Qt 官方文档及阅读方法

文章目录 选择 All Qt Modules 查找模块选择 C Classes 查看该模块的所有的类当前类说明文档 QT 官方文档参考:https://doc.qt.io/qt-5 选择 All Qt Modules 查找模块 选择 C Classes 查看该模块的所有的类 当前类说明文档 包括 属性公共函数重新实现的公共功能公…

巡检管理系统哪一款简单实用?如何解决传统巡检难题,实现高效监管?

在电力、燃气、水务等公共服务领域,线路巡检工作是保障公众安全、避免事故发生的重要环节。然而,传统的巡检方式存在一些显著的问题,可能会对公共安全和稳定运行产生不利的影响。为了解决这些问题,需要一种能够实现高效、精准的线…

SystemVerilog学习(1)——验证导论

写在最前 选课不慎,选修课选了个SystemVerilog,事情比必修还多,上课老师讲的一点用没有,但是学分还得修,只能自学了,既来之则安之。 一、什么是SystemVerilog SystemVerilog简称为SV语言,是一种…

汇编的指令

减法类指令: 不带借位的减法: sub dest,src;dest(dest)-(src) 注意: 1、源操作数和目的操作数不能同时为段寄存器或存储单元 2、对标志位有影响,主要影响CF、ZF、OF、SF。 带借位的减法: sbb dest,src;dest(dest)-(…

react native 使用夜神模拟器开发调试 windows+android

执行adb devices, 提示List of devices attached 打开本地sdk目录中的platform-tools文件夹,复制下面3个文件 打开夜神模拟器安装目录中的bin目录,把复制出来的文件复制替换到bin目录中 在复制一份platform-tools目录中的adb.exe,重命名为…

python基础教程:递归函数教程

嗨喽,大家好呀~这里是爱看美女的茜茜呐 1.递归的定义: 在函数内部直接或者间接调用函数本身 👇 👇 👇 更多精彩机密、教程,尽在下方,赶紧点击了解吧~ python源码、视频教程、插件安装教程、资…

深度解析网络代理技术及其在网络安全和爬虫应用中的关键作用

在当今数字化时代,网络代理技术在维护网络安全、保护隐私以及实现高效数据获取方面发挥着不可或缺的作用。本文将全面解析Socks5代理、IP代理等关键技术,并探讨其在网络安全和爬虫开发中的重要作用。 1. Socks5代理与SK5代理:多功能代理协议…

四川云汇优想:短视频矩阵运营方案

短视频矩阵运营方案是为了提高短视频平台的用户黏性和活跃度,从而增强用户粘性和平台的商业价值而制定的。下面四川百幕晟小编将对短视频矩阵运营方案进行详细的介绍和分析。 首先,短视频矩阵运营方案要注重用户精细化运营。通过用户画像和兴趣标签&…

Mysql 中的性能调优方法

Mysql 性能调优方法可以从四个方面来说,分别是: 表结构与索引 SQL 语句优化 Mysql 参数优化 硬件及系统配置 这四个方面的优化成本和优化效果是成反比的。 表结构和索引的优化 表结构和索引的优化,主要可以下面这些方面去优化: 分…

Python学习笔记—基本语法

1、一般代码第一行会有#!/usr/bin/python3 这句注释是告诉操作系统执行该脚本时,调用/usr/bin目录下的Python 解释器。 在windows 下可以不写第一行注释 2、多行注释’’’和”””,用法类似verilog中的/**/ 如 ’’’ 第一行注释 第二行注释…

JVM第十六讲:调试排错 - Java 线程分析之线程Dump分析

调试排错 - Java 线程分析之线程Dump分析 本文是JVM第十六讲,Java 线程分析之线程Dump分析。Thread Dump是非常有用的诊断Java应用问题的工具。 文章目录 调试排错 - Java 线程分析之线程Dump分析1、Thread Dump介绍1.1、什么是Thread Dump1.2、Thread Dump特点1.3、…

【大模型AIGC系列课程 3-8】AI 代理的应用

1. 如果有一群角色(AI Agent)会发生什么? Generative Agents: Interactive Simulacra of Human Behavior Paper: https://arxiv.org/abs/2304.03442 Demo: https://reverie.herokuapp.com/arXiv_Demo/ 我们的生成式代理架构。代理感知(Perceive)其环境(Env),所有感知都…