介绍
history-undo 是一款前端 JavaScript 库，它可以帮助我们在页面中实现历史记录管理和撤销和重做操作。这个库具有很强的兼容性和灵活性，能够适用于各种场景的前端应用开发中。
安装
使用 npm 安装：
npm install history-undo --save
在脚本中引入 history-undo:
import {createHistory, createUndoManager} from 'history-undo';使用
创建历史记录对象
在使用 history-undo 进行历史记录管理之前，我们需要先创建一个历史记录对象，这个对象将会保存我们所有操作的历史。
const history = createHistory(5);
这里我们设置了历史记录的最大数量为 5，当我们进行大于 5 次操作后，最早的一条历史记录将会被丢弃。
创建撤销与重做管理器
完成历史记录对象的创建之后，我们需要创建一个撤销与重做管理器，这个管理器将会负责管理我们的历史记录，使我们可以进行撤销与重做操作。
const undoManager = createUndoManager(history, {
undo: undoAction,
redo: redoAction,
ignore: ignoreAction,
});这里我们传递了 history 对象，同时传递了对应的撤销、重做、忽略操作的回调函数。在这些回调函数中，我们需要编写对应的撤销、重做、忽略操作的代码。
添加历史记录
通过使用我们创建出来的历史记录对象，我们可以在需要使用的地方，添加历史记录。
history.add({
undo: undoAction,
redo: redoAction
});撤销与重做
通过使用我们创建出来的撤销与重做管理器，我们可以在需要使用的地方，进行撤销与重做操作。
undoManager.undo(); // 撤销操作 undoManager.redo(); // 重做操作
示例代码
接下来，我们来展示具体的使用示例。
-- -------------------- ---- -------
------ --------------- ------------------ ---- ---------------
-- -------------------- -
----- ------- - -----------------
-- ------
-------- ------------------ -
----- --- - -----------
-------------
----- -------- -- -
---------------------------
--
----- -------- -- -
---------------------------
--
---
-
-- --------
-------- ------------------ -
--------------
-----------------------
-
-- --------
-------- ------------------ -
--------------
-----------------------
-
-- --------
-------- -------------------- -
-----------------------
-
-- ----------
----- ----------- - -------------------------- -
----- -----------
----- -----------
------- -------------
---
-- ------
-------------------
-------------------
-------------------
-- --------
-------------------
-- --------
-------------------结语
通过这篇文章，我们学习了如何使用 history-undo 库来进行前端应用开发中的历史记录管理和撤销重做操作。这个库十分实用，并且提供了很多灵活的配置项，能够适应各种场景的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067350890c4f727758390f