目录

大体介绍

具体思路

代码实现

大体介绍

撤销：当移动或者引入组件发生错误的时候能够实现回溯的效果。

重做：当撤销的操作发生错误的时候能过实现撤销“撤销”的效果

在这一篇文章中我们就是打算实现这个功能，我打算用一个容器来存储所有已经进行的操作，我们通过对这个栈的压栈等操作来实现撤销和重做的功能。

具体思路

这一部分可能比较难以理解，就是我每次进行一次操作，就给这个操作进行一次命名，并将这一次操作压入栈中，并且给这个栈添加一个指针，在没有进行撤销和重做操作的时候，指针一直指向栈低的元素，当进行撤销操作的时候，我们就将指针向前移动一个单位，让它指向我上一次已经执行的操作，同时删除此次的操作，这样就实现的撤销的功能，同理，重做操作是我们将指针向后移动一个单位，让它指向我们的下一个操作，同时加载下一次操作要实现的效果，这样我们就完成了重做的功能。（注意：重做也是一个操作，也需要压入栈中）

代码实现

 const registry = (command) => {
state.commandArray.push(command);
state.commands[command.name] = () => {
const {redo, undo} = command.execute();
redo();
if (!command.pushQueue) {
return
}
let {queue, current} = state;
// console.log('ahh')
if (queue.length > 0) {
queue = queue.slice(0, current + 1);
state.queue = queue;
}
queue.push({redo, undo});
state.current = current + 1;
// console.log(queue)
}
}
registry({
name: 'redo',
keyboard: 'ctrl+y',
execute() {
return {
redo() {
let item = state.queue[state.current + 1];
if (item) {
item.redo && item.redo();
state.current++;
}
}
}
}
})
registry({
name: 'undo',
keyboard: 'ctrl+z',
execute() {
return {
redo() {
if (state.current === -1) return;
let item = state.queue[state.current];
if (item) {
item.undo && item.undo();
state.current--;
}
}
}
}
})

大致效果不好展示，这里就不给予展示了，大体的思路就是这样了，代码可能还是需要改善的。

最后

以上就是光亮学姐为你收集整理的从零搭建低代码平台（十）编辑区中撤销和重做功能的实现大体介绍具体思路代码实现的全部内容，希望文章能够帮你解决从零搭建低代码平台（十）编辑区中撤销和重做功能的实现大体介绍具体思路代码实现所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。