三种Undo\Redo的实现

本文介绍了三种UndoRedo实现方式:基于对象序列化的方案、基于Command模式的方法及结合RoutedEvent、Observer模式和Command模式的新思路。每种方式都有各自的优缺点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、基于对象序列化的Undo\Redo

Rockford LhotkaCSLA框架中,介绍了一种基于保存序列化对象入栈的Undo\Redo实现方案。调用BeginEdit函数时,通过反射机制将整个业务对象的所有Field序列化,并保存在UndoStack中。在Undo时,将保存在UndoStack中的序列化的Map值读出来,对现有的业务对象进行数值还原。

由于使用对象序列化的方式来保存对象的历史。所以当UndoStack比较深,或是业务对象比较大的时候会占用比较多的内存,性能上也不尽如人意。但是CSLAUndo实现方式通用性较好。所以适用范围还是不小的。

二、基于Command模式的Undo\Redo

GoF的名著《Design Patterns》中介绍了著名的Command的模式,主要用途之一就是用来实现Undo\Redo的。具体实现方式就不在这里介绍了,有兴趣可以参考《Design Patterns》一书。

灵活运用这种实现方式可以应对各种Undo操作,但是是以损失一定的可复用性为代价的。一个可以Undo的操作越具体,它和实现应用的关系就越紧,抽象性就越差,也就越难以复用。其极端情况就是每个Command都要符合ACID

最重要的是,如果要使用Command模式来实现Undo机制,最好是在开始写代码之前就做这个决定,并自始至终使用Command来响应用户请求。如果等到所以的代码都写到Click事件处理函数里的时候,再想用Command来实现Undo\Redo就麻烦了。

三、结合RoutedEventObserver模式和Command模式的Undo\Redo

为了解决上面两种Undo实现方式的缺点,既保证通用性,又能减少资源占用。可以将上面的两种方式结合起来,并联合和RoutedEvent机制和Observer模式。

RoutedEvent.NET 3.0中的WPF里的新型的事件传递机制。主要特点是子对象的事件发生后会触发父对象的相应事件。从而简化事件的订阅。但是WPF里的RoutedEvent只能用在UIElement上,业务对象就无福消受了。所以可以自己实现一个简单的RoutedEvent机制来简化事件的订阅。

然后用一个Watcher对象监视业务对象的变化,将变化抽象、封装成一个可以UndoRedoCommand。大致可以分成PropertyChangedEditionItemChangedEdition两种,就可以提供对于属性改变、从List中删除、向List添加、ListItem Move这些常见操作的UndoRedo

当然这种方式也有不好的地方,由于抽象程度比较高,所以这种Undo机制并不能很好地和业务逻辑契合,比如List AList B的添加、删除是同步且应该被视为一个操作时,这种机制还是认为是两个操作。

 

    上面介绍了两种常见的UndoRedo的方式和一种新的实现方式,算是抛砖引玉,帮助大家找到更适合自己的Undo Redo实现方式。

### 如何在 TypeScript 中实现撤销 (undo) 和重做 (redo) 功能 为了实现在 TypeScript 中的撤销和重做功能,可以利用 `use-undo` 这一库。此库不仅维护了一个状态的历史记录——即过去的(past)、现在的(present)以及未来的(future)堆栈,还提供了诸如设置(set)、重置(reset)、撤销(undo)与重做(redo)的操作函数[^2]。 #### 使用 use-undo 实现 Undo/Redo 的基本方法 首先安装依赖: ```bash npm install @hookform/resolvers use-undo react-hook-form zod ``` 接着,在 React 组件内导入并使用 `useUndo` hook 来管理状态变化: ```typescript import { useState } from 'react'; import { useUndo } from 'use-undo'; function TextEditor() { const [state, { past, present, future, undo, redo, set }] = useUndo<string>(''); function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) { set(e.target.value); } return ( <div> <textarea value={present} onChange={handleChange}></textarea> <button onClick={undo} disabled={!past.length}>Undo</button> <button onClick={redo} disabled={!future.length}>Redo</button> </div> ); } ``` 这段代码展示了如何通过监听文本框的变化来触发新的历史条目加入,并允许用户点击按钮来回溯或前进至不同的编辑版本[^3]。 对于更复杂的应用场景,比如图形绘制工具或是表格数据录入界面,开发者可以根据实际需求调整逻辑,例如增加自定义事件处理器以响应用户的交互行为,从而更好地适应具体业务流程的要求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值