当前位置: 首页 > news >正文

【前端设计模式】之备忘录模式

备忘录模式是一种行为设计模式,它允许在不破坏封装性的前提下捕获和恢复对象的内部状态。在前端开发中,备忘录模式可以用于保存和恢复用户界面的状态,以及实现撤销和重做功能。

备忘录模式特性:

  1. 封装了对象的状态:备忘录对象可以保存原始对象的内部状态,并且只有原始对象可以访问该状态。
  2. 可以恢复对象的状态:备忘录对象可以将保存的状态重新应用到原始对象上,使其恢复到之前的状态。
  3. 不破坏封装性:备忘录模式通过将状态保存在备忘录对象中,避免了直接暴露原始对象的内部状态。

应用示例

1. 保存表单数据:

 
// 备忘录
class FormMemento {constructor(state) {this.state = state;}
}// 原始对象
class Form {constructor() {this.state = {};}save() {return new FormMemento(this.state);}restore(memento) {this.state = memento.state;}
}// 使用示例
const form = new Form();
form.state = { name: 'John', age: 25 };const memento = form.save();form.state = { name: 'Alice', age: 30 };form.restore(memento);
console.log(form.state); // { name: 'John', age: 25 }

上述代码中,Form类表示一个表单对象,FormMemento类表示表单的备忘录对象。通过调用save方法可以保存表单的状态,调用restore方法可以恢复表单到之前的状态。

  1. FormMemento类:这是一个简单的类,它只有一个属性,即state。这个类的作用是保存表单(Form)对象的状态。

  2. Form类:这个类具有一个state属性,它是一个对象,用于存储表单的状态。这个类有两个方法:

    • save()方法:此方法创建并返回一个FormMemento对象,该对象包含当前Form对象的状态。
    • restore(memento)方法:此方法接受一个FormMemento对象,并将其状态复制到当前Form对象中。
  3. 使用示例:首先,创建一个新的Form对象。然后,设置其状态,调用save()方法保存当前状态,更改状态,最后使用restore()方法恢复到之前保存的状态。

2. 撤销和重做功能

 
// 备忘录
class EditorMemento {constructor(content) {this.content = content;}
}// 原始对象
class Editor {constructor() {this.content = '';this.history = [];this.currentIndex = -1;}type(text) {this.content += text;}save() {const memento = new EditorMemento(this.content);this.history.push(memento);this.currentIndex++;}undo() {if (this.currentIndex > 0) {this.currentIndex--;this.content = this.history[this.currentIndex].content;}}redo() {if (this.currentIndex < this.history.length - 1) {this.currentIndex++;this.content = this.history[this.currentIndex].content;}}
}// 使用示例
const editor = new Editor();
editor.type('Hello');
editor.save();
console.log(editor.content); // 'Hello'editor.type(' World');
editor.save();
console.log(editor.content); // 'Hello World'editor.undo();
console.log(editor.content); // 'Hello'editor.redo();
console.log(editor.content); // 'Hello World'

上述代码中,首先定义了一个EditorMemento类,表示编辑器的备忘录。备忘录对象保存了编辑器在某个状态下的内容。

接下来定义了一个Editor类,表示编辑器对象。编辑器对象包含一个内容属性content,一个历史记录属性history,以及一个当前索引属性currentIndex

编辑器对象提供了几个方法:

  • type(text):在编辑器中输入文本,将文本追加到内容属性中。
  • save():保存当前编辑器的状态,创建一个新的备忘录对象,并将其添加到历史记录中。同时更新当前索引的值。
  • undo():撤销上一次的操作,将当前索引减1,并将内容属性更新为上一次保存的备忘录中的内容。
  • redo():重做上一次撤销的操作,将当前索引加1,并将内容属性更新为下一次保存的备忘录中的内容。

优缺点

优点
  1. 提供了一种保存和恢复对象状态的方式,使得对象的状态管理更加灵活。
  2. 可以实现撤销和重做功能,提升用户体验。
  3. 不破坏封装性,保持了对象的内部状态的私有性。
缺点
  1. 如果备忘录对象过多或者状态较大,会占用较大的内存空间。
  2. 备忘录模式会增加代码复杂度,需要额外维护备忘录对象和原始对象之间的关系。

总结

备忘录模式是一种有用的设计模式,在前端开发中可以应用于保存和恢复用户界面状态、实现撤销和重做功能等场景。通过封装对象状态并提供恢复机制,备忘录模式提高了代码灵活性和可维护性。然而,在使用备忘录模式时需要注意内存占用和代码复杂度等问题。

相关文章:

【前端设计模式】之备忘录模式

备忘录模式是一种行为设计模式&#xff0c;它允许在不破坏封装性的前提下捕获和恢复对象的内部状态。在前端开发中&#xff0c;备忘录模式可以用于保存和恢复用户界面的状态&#xff0c;以及实现撤销和重做功能。 备忘录模式特性&#xff1a; 封装了对象的状态&#xff1a;备…...

复习Day15:栈与队列part02:20. 有效的括号、1047.删除字符串中所有相邻重复项

我用的方法是在leetcode再过一遍例题&#xff0c;明显会的就复制粘贴&#xff0c;之前没写出来就重写&#xff0c;然后从拓展题目中找题目来写。辅以Labuladong的文章看。然后刷题不用CLion了&#xff0c;使用leetcode自带的IDE模拟面试环境。 历史博客链接&#xff1a; http…...

基于Java的宠物商城管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…...

Python的GIL存在的情况下,是否还有必要添加线程锁。

GIL锁的产生&#xff1a; 为了保证在单线程情况下&#xff0c;Python的正常执行和效率&#xff0c;GIL锁产生了&#xff0c;由于只有一把锁就不会产生死锁也不用切换。 对于Python语言而言&#xff0c;只有CPython解释器&#xff08;用C语言编写的Python解释库&#xff09;存在…...

基于下垂控制的孤岛双机并联逆变器环流抑制MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 在实际应用中逆变器都是并联运行的,但是逆变器的并联运行也存在不少问题,由于线路阻抗差异、各个逆变器输出端瞬时电压幅值不同等,都容易导致环流的出现。环流会导致逆变器损耗增加,从而影响微电网的输出效率…...

spring事务面试题

1.Spring 事务实现方式有哪些&#xff1f; 事务就是一系列的操作原子操作,Spring事务机制主要 包括声明式事务和编程式事务。 编程式事务&#xff1a;通过编程的方式管理事务&#xff0c;自己设置未提交模式&#xff0c;自己获取连接&#xff0c;自己预编译&#xff0c;自己回…...

C++标准库算法整理

目录 1、数值操作 1.1、std::accumulate 1.2、std::inner_product 1.3、std::partial_sum 1.4、std::exclusive_scan 1.5、std::inclusive_scan 1.6、std::reduce 2、相邻元素 2.1、std::adjacent_difference 2.2、std::adjacent_find 2.3、std::unique 2.4、std::u…...

【Codeforces】Codeforces Round 903 (Div. 3)【待补】

Dashboard - Codeforces Round 903 (Div. 3) - Codeforces Problem - C - Codeforces Problem - D - Codeforces...

workerman 运行时报错 Call to undefined function posix_getpid()

使用 验证php扩展是否齐全 curl -Ss https://www.workerman.net/check | php缺少posix 下载 在 Linux 系统上&#xff0c;可以使用包管理器来安装 php-posix 扩展&#xff0c;例如 Ubuntu 系统可以通过以下命令进行安装&#xff1a; sudo apt-get install php-posix如果你使用…...

【探讨C++中的临时对象:一时之物还是永恒之道?】

在C编程中&#xff0c;临时对象是一个经常引起讨论的话题。它们是什么&#xff0c;为什么它们存在&#xff0c;以及如何正确使用它们&#xff1f;本文将深入探讨C中的临时对象&#xff0c;帮助您理解它们的含义和用途。 什么是临时对象&#xff1f; 临时对象&#xff08;Temp…...

二叉树相关算法

1、二叉树基本操作 二叉树的定义就不在这里多说了&#xff0c;下面这个图就是一个简单的二叉树&#xff1a; 二叉树的三种遍历方式&#xff1a; 前序遍历&#xff1a;头左右&#xff0c;也就是先头后左再右&#xff1a;1245367 public static void prePrint(BinaryTreeNode …...

Vue_Bug npm install报错 code:128

Bug描述&#xff1a; npm install报错 code&#xff1a;128 npm ERR! Warning: Permanently added ‘github.com’ (ED25519) to the list of known hosts. npm ERR! gitgithub.com: Permission denied (publickey). npm ERR! fatal: Could not read from remote repository. n…...

【Unity ShaderGraph】| 如何快速制作一个 马赛克效果 实战

前言 【Unity ShaderGraph】| 如何快速制作一个 马赛克效果 实战一、效果展示二、马赛克效果四、应用实例 前言 本文将使用Unity 的ShaderGraph制作一个马赛克的效果&#xff0c;可以直接拿到项目中使用。对ShaderGraph还不了解的小伙伴可以参考这篇文章&#xff1a;【Unity S…...

【Java 进阶篇】JavaScript DOM Document对象详解

在前端开发中&#xff0c;DOM&#xff08;文档对象模型&#xff09;扮演着重要的角色。它允许我们使用JavaScript来与网页文档进行交互&#xff0c;实现动态的网页效果。DOM的核心部分之一就是Document对象&#xff0c;它代表了整个HTML文档。在本篇博客中&#xff0c;我们将深…...

LetCode刷题[简单题](5)按摩师,迭代出最优解(卡尔曼滤波也是类似迭代)

所有的遍历寻求有条件约束的最大值都可以转换成&#xff0c;新的数带来的最大值的变化&#xff0c;问题往这个方向转化就可以&#xff0c;问题都是在最中进行选择的&#xff0c;因此关注的问题最大值得上限就好了&#xff0c;不必关注可能随机的下限。关注随机可能的下限会把问…...

C/C++笔试易错与高频题型图解知识点(二)—— C++部分(持续更新中)

目录 1.构造函数初始化列表 1.1 构造函数初始化列表与函数体内初始化区别 1.2 必须在初始化列表初始化的成员 2 引用&引用与指针的区别 2.1 引用初始化以后不能被改变&#xff0c;指针可以改变所指的对象 2.2 引用和指针的区别 3 构造函数与析构函数系列题 3.1构造函数与析…...

使用new创建动态结构

在运行时创建数组优于在编译时创建数组&#xff0c;对于结构&#xff08;同一个结构可以存储多种类型的数据。&#xff09;也是如此。需要在程序运行时为结构分配所需的空间&#xff0c;这也可以使用new运算符来完成。通过使用new&#xff0c;可以创建动态结构。同样&#xff0…...

论文笔记与复现[156]PARAFAC. tutorial and applications

原文下载&#xff1a;https://www.sciencedirect.com/science/article/abs/pii/S0169743997000324 摘要 本文介绍了PARAFAC的多维分解方法及其在化学计量学中的应用。PARAFAC是PCA向高阶数组的推广&#xff0c;但该方法的一些特性与普通的二维情况截然不同。例如&#xff0c;…...

Python 基础30道测试题

你好&#xff0c;我是悦创。 我会给出 30 道涉及 Python 基础的题目。这些题目将覆盖各种 Python 基础知识点&#xff0c;包括数据类型、控制结构、函数、模块等。 输出 “Hello, World!”。创建一个变量&#xff0c;并为其赋值&#xff0c;然后输出该变量的值。输入两个数&a…...

【环境搭建】linux docker-compose安装rocketmq

创建目录 mkdir -p /data/docker/rocketmq/namesrv/logs mkdir -p /data/docker/rocketmq/broker1/conf mkdir -p /data/docker/rocketmq/broker1/logs mkdir -p /data/docker/rocketmq/broker1/store 给权限 chmod -R 777 /data/docker/rocketmq 创建配置文件 cd /data/d…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

WEB3全栈开发——面试专业技能点P4数据库

一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库&#xff0c;基于 mysql 库改进而来&#xff0c;具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点&#xff1a; 支持 Promise / async-await&#xf…...

JS红宝书笔记 - 3.3 变量

要定义变量&#xff0c;可以使用var操作符&#xff0c;后跟变量名 ES实现变量初始化&#xff0c;因此可以同时定义变量并设置它的值 使用var操作符定义的变量会成为包含它的函数的局部变量。 在函数内定义变量时省略var操作符&#xff0c;可以创建一个全局变量 如果需要定义…...

内窥镜检查中基于提示的息肉分割|文献速递-深度学习医疗AI最新文献

Title 题目 Prompt-based polyp segmentation during endoscopy 内窥镜检查中基于提示的息肉分割 01 文献速递介绍 以下是对这段英文内容的中文翻译&#xff1a; ### 胃肠道癌症的发病率呈上升趋势&#xff0c;且有年轻化倾向&#xff08;Bray等人&#xff0c;2018&#x…...