低开开发笔记(八): 低代码编辑器实现撤销回退（命令模式,防抖处理）
好家伙，
0.代码已开源
https://github.com/Fattiger4399/ph_questionnaire-.git
1.事件触发
我们先从事件的触发开始讲起
大致上我们有两个思路可以选择
1.监控用户行为
2.监控数据变化
两种选择都会有较难处理的部分,这里我们先选第二个选项
关于监控数据,首先你会想到什么?
没错,watch
watch: {
formTemplate: {
handler: function (oldVal, newVal) {
if (!this.ischange) {
// debugger
console.log(oldVal, newVal)
}
},
deep: true,
immediate: true,
}
},
但是,这会出现一些问题
深度监视
来看看我们数据的样子
如果我们从数据的角度出发观察变化,在拖拽的过程中,
数据由
{
"list": [],
"config": {
"labelPosition": "top",
"labelWidth": 80,
"size": "mini",
"outputHidden": true,
"hideRequiredMark": false,
"syncLabelRequired": false,
"labelSuffix": "",
"customStyle": ""
}
}
变成了
{
"list": [
{
"type": "input",
"options": {
"defaultValue": "",
"type": "text",
"prepend": "",
"append": "",
"placeholder": "请输入",
"maxLength": 0,
"clearable": false,
"hidden": false,
"disabled": false
},
"label": "输入框",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "input_17211185804812",
"key": "input_17211185804812",
"rules": [
{
"required": false,
"message": "必填项",
"trigger": [
"blur"
]
}
],
"dynamicLabel": false
}
],
"config": {
"labelPosition": "top",
"labelWidth": 80,
"size": "mini",
"outputHidden": true,
"hideRequiredMark": false,
"syncLabelRequired": false,
"labelSuffix": "",
"customStyle": ""
}
}
由于监控的是一个复杂对象,这会导致watch多次触发
2.防抖
function debounce(func, wait) {
let timeout;
return function () {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
watch: {
formTemplate: {
handler: debounce(function (oldVal, newVal) {
if (!this.ischange) {
this.undoStack.push(deepClone(oldVal))
}
}, 300),
deep: true,
immediate: true,
}
},
3.栈实现撤回
这里我们使用栈去做状态记录的保存
handleUndo() {
this.ischange = true
if (this.undoStack.length > 1) {
let laststate = this.undoStack[this.undoStack.length - 2]
this.formTemplate = deepClone(laststate)
let redostate = this.undoStack.pop()
this.redoStack.push(redostate)
} else {
alert("撤回栈已空，无法撤回")
}
setTimeout(() => {
this.ischange = false
}, 400)
},
handleRedo() {
if (this.redoStack.length > 0) {
this.formTemplate = this.redoStack.pop()
} else {
alert("无法重做")
}
},
-
撤销操作:
- 将当前状态保存到重做栈中。
- 从撤销栈中取出最后一个状态，并将其设为当前状态。
- 从撤销栈中移除最后一个状态。
-
重做操作:
- 将当前状态保存到撤销栈中。
- 从重做栈中取出最后一个状态，并将其设为当前状态。
- 从重做栈中移除最后一个状态。
逻辑图
过程解释
-
初始状态:
- 空白的工作区。
- 撤销栈是空的。
- 重做栈是空的。
-
用户进行第一个操作:
- 用户在工作区添加了“元素一”。
- 撤销栈中保存了操作前的状态（空白）。
- 重做栈依然是空的。
-
用户进行第二个操作:
- 用户在工作区添加了“元素二”。
- 撤销栈中保存了操作前的状态（元素一）。
- 撤销栈现在有两个状态（元素一和空白）。
- 重做栈依然是空的。
-
用户点击撤回:
- 撤回上一步操作，恢复到上一个状态（元素一）。
- 撤销栈中移除最后一个状态（元素二），撤销栈现在只有一个状态（空白）。
- 重做栈中保存被撤销的状态（元素二）。
-
用户点击重做:
- 重做上一步撤销的操作，恢复到上一个状态（元素一）。
- 撤销栈中保存恢复前的状态（空白）。
- 重做栈移除最后一个状态（元素一），现在只有一个状态（元素二）。
4.使用命令模式思想封装
最后,我们对代码进行封装
//命令类
class Command {
constructor(execute, undo) {
this.execute = execute;
this.undo = undo;
}
}
class UndoCommand extends Command {
constructor(context) {
super(
() => {
if (context.undoStack.length > 1) {
let laststate = context.undoStack[context.undoStack.length - 2];
context.formTemplate = deepClone(laststate);
let redostate = context.undoStack.pop();
context.redoStack.push(redostate);
} else {
alert("撤回栈已空，无法撤回");
}
setTimeout(() => {
context.ischange = false;
}, 400);
},
() => {
if (context.redoStack.length > 0) {
context.formTemplate = context.redoStack.pop();
} else {
alert("无法重做");
}
}
);
}
}
class RedoCommand extends Command {
constructor(context) {
super(
() => {
if (context.redoStack.length > 0) {
context.formTemplate = context.redoStack.pop();
} else {
alert("无法重做");
}
},
() => {
// 这里可以实现撤销 redo 的逻辑，但我们暂时不需要
}
);
}
}
//methods
//撤销重做
handleUndo() {
this.ischange = true;
const undoCommand = new UndoCommand(this);
undoCommand.execute();
},
handleRedo() {
const redoCommand = new RedoCommand(this);
redoCommand.execute();
},
