前端用于低代码平台以及编辑器类项目的开发场景逐渐增多,对于这类项目除去复制粘贴功能以外 ,一般还需要有撤销与恢复的功能。本片文章大致内容就是如何设计一个用户历史操作记录的队列,去便于更好的实现用户编辑的前进后退。
假设用户进行添加数据操作
![](https://i-blog.csdnimg.cn/blog_migrate/3121c59c4a8bfcf8cfae7902266f1d7b.png)
我们创建用户历史操作记录的队列可以有以下两种创建方式:
方式1:['a', 'ab' , 'abc']
方式2:['a', 'b' , 'c']
方式3:[ {type: 'add" value: 'a'}, {type: 'add" value: 'b'}, {type: 'add" value: 'c'} ]
对于这三种方式的选择:
首先我们要考虑这个项目的具体类型,用户操作是否是单一的操作类型、数据量是否庞大。
方式一适用于操作类型单一且数据量小。
方式二适用于操作类型单一且数据量大。
方式三适用于操作类型复杂且数据量大。
在我运营到的项目中、操作类型不单一且数据量大。以下我们考虑方式3如何去实现。
首先根据项目的操作自定义操作类型:撤销、复原、恢复等等。在用户后退或前进时,我们可以根据上一步修改的数据,进行对应的恢复,或者逆向修改。
历史队列具体实现思路:
首先我们创建一个历史记录类,用一个数组保存数据,用一个变量为指针,指向用户当前的最新操作。
指针默认指向用户最新操作
![](https://i-blog.csdnimg.cn/blog_migrate/baf8d9839d2f13c80636e9bca37759ff.png)
用户后退,指针后退
![](https://i-blog.csdnimg.cn/blog_migrate/2e7cf3d2a962ce5c576383f935fe3265.png)
用户前进,指针前进
![](https://i-blog.csdnimg.cn/blog_migrate/baf8d9839d2f13c80636e9bca37759ff.png)
后退后再添加记录,删除当前指针后面的元素,再添加新的记录
![](https://i-blog.csdnimg.cn/blog_migrate/421efd0c3e614ed1b1cbc027c6c5bc3e.png)
我是在vuex进行创建,代码具体实现如下:
//store.js
let state = {
/* 资源&数据 */
historyStore:[], //撤销之前的操作
historyIndex:-1,
};
//action.js
// 新增记录
addItem(context,d) {
// 撤销后重新添加记录 删除撤销的记录
let arr = JSON.parse(JSON.stringify(context.state.historyStore))
if (context.state.historyIndex != JSON.parse(JSON.stringify(context.state.historyStore)).length - 1) {
context.commit("spliceHistoryStore",arr);
}
// 新增记录
context.state.historyStore.push(JSON.parse(JSON.stringify(d)))
context.state.historyIndex++;
},
// 后退
back(context) {
if (context.state.historyStore.length == 0 || context.state.historyIndex <= 0) return;
context.state.historyIndex--;
let currentPage = context.state.historyStore[context.state.historyIndex]
if (currentPage.baseWidth !== undefined) {
return;
}
currentPage.menuList.forEach((menu) => {
if (!menu.id) {
menu.id = $util.uuid();
}
});
return new Promise((resolve, reject) => {
$http.ajax({
type: "post",
url: baseUrl + "/edit/batchSaveOrUpdatePageInfo",
contentType: "application/json; charset=UTF-8",
data: JSON.stringify(currentPage),
dataType: "json",
success: function (data) {
if (data.result) {
// context.dispatch('getPageList')
context.commit("setPageInfo", data.data);
resolve();
} else {
layer.msg(data.desc);
reject();
}
},
error: function (data) {
console.info(data);
reject();
},
});
});
},
// 前进
go(context) {
if (context.state.historyStore.length == 0 || context.state.historyIndex >= context.state.historyStore.length - 1) return;
context.state.historyIndex++;
let currentPage = context.state.historyStore[context.state.historyIndex]
if (currentPage.baseWidth !== undefined) {
return;
}
currentPage.menuList.forEach((menu) => {
if (!menu.id) {
menu.id = $util.uuid();
}
});
return new Promise((resolve, reject) => {
$http.ajax({
type: "post",
url: baseUrl + "/edit/batchSaveOrUpdatePageInfo",
contentType: "application/json; charset=UTF-8",
data: JSON.stringify(currentPage),
dataType: "json",
success: function (data) {
if (data.result) {
// context.dispatch('getPageList')
context.commit("setPageInfo", data.data);
resolve();
} else {
layer.msg(data.desc);
reject();
}
},
error: function (data) {
console.info(data);
reject();
},
});
});
},
具体业务逻辑自己替换。