使用双端队列实现一个撤销重做功能的类,要求使用JS来实现
时间: 2024-04-14 15:25:29 浏览: 31
下面是使用双端队列实现撤销重做功能的类的示例代码:
```javascript
class UndoRedo {
constructor() {
this.undoStack = []; // 撤销栈
this.redoStack = []; // 重做栈
}
// 执行操作并将操作添加到撤销栈中
doAction(action) {
this.undoStack.push(action);
this.redoStack = []; // 清空重做栈
action.execute();
}
// 撤销操作
undo() {
const action = this.undoStack.pop();
if (action) {
this.redoStack.push(action);
action.undo();
}
}
// 重做操作
redo() {
const action = this.redoStack.pop();
if (action) {
this.undoStack.push(action);
action.redo();
}
}
}
// 示例使用
// 创建一个操作类
class Action {
constructor(value) {
this.value = value;
}
execute() {
console.log('执行操作:', this.value);
}
undo() {
console.log('撤销操作:', this.value);
}
redo() {
console.log('重做操作:', this.value);
}
}
const undoRedo = new UndoRedo();
// 执行操作并撤销
undoRedo.doAction(new Action('操作1'));
undoRedo.doAction(new Action('操作2'));
undoRedo.undo(); // 撤销操作2
// 重做操作
undoRedo.redo(); // 重做操作2
```
在上述示例中,我们定义了一个UndoRedo类,其中包含两个栈,undoStack用于存储执行的操作,redoStack用于存储被撤销的操作。doAction方法用于执行操作并将其添加到撤销栈中,undo方法用于撤销最近的操作,redo方法用于重做最近被撤销的操作。
我们还创建了一个Action类作为示例操作,其中包含execute方法用于执行操作,undo方法用于撤销操作,redo方法用于重做操作。
在示例使用部分,我们创建了UndoRedo实例,并通过doAction方法执行两个操作。然后调用undo方法进行撤销操作,并调用redo方法进行重做操作。
你可以根据你的需求来定义自己的操作类和具体的操作逻辑。这个类可以帮助你实现撤销和重做功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)