如果你正在开发一个前端应用程序，需要维护多个状态或数据，并希望用户可以撤销和重做操作，那么你可能需要使用 conbo-changehistory 这个 npm 包。该包提供了一个易于使用的 API，用于跟踪对象的更改，并在必要时恢复它们。
安装
使用 npm 进行安装，命令如下：
npm install conbo-changehistory
如果您正在使用使用 yarn，命令如下：
yarn add conbo-changehistory
快速开始
在您的项目中导入 conbo-changehistory：
import { ChangeHistory } from 'conbo-changehistory';然后，实例化新的 ChangeHistory 对象：
const history = new ChangeHistory(myObject);
该构造函数接受一个对象作为参数，表示要跟踪其更改历史记录的对象。
要跟踪对象的更改，您应该使用 ChangeHistory 实例中的 trackChanges 方法。 例如：
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- -- -- ----- ------- - --- ---------------------- ----------------------------- ----------- - ------ ----------------- ------------------------------- -- ---- --------------- ------------------------- -- -----
在此示例中，我们创建了一个名为 person 的对象，并使用 ChangeHistory 对其进行了自定义跟踪。 我们更改其名称为 Bob，并使用 commit() 方法将此更改提交到更改历史记录中。最后，我们撤消了该更改，使用 undo() 方法让其回到 Alice。
API
以下是 ChangeHistory 实例的 API 列表：
constructor(target: object, options?: Options)
构造函数，接受一个要跟踪的对象和一些选项。选项是可选的，并允许更改一些跟踪设置，例如跟踪最大历史记录数量，采用全等比较等。
const history = new ChangeHistory(target, {
maxHistory: 10
});trackChanges(target: object)
将要跟踪更改的对象传递给 trackChanges 方法。
const history = new ChangeHistory(); history.trackChanges(myObject);
commit()
将当前更改提交到更改历史记录中。
const history = new ChangeHistory(); history.trackChanges(myObject); myObject.name = "Bob"; history.commit();
undo()
恢复上一步更改并移除更改历史中该更改。
const history = new ChangeHistory(); history.trackChanges(myObject); myObject.name = "Bob"; history.commit(); history.undo(); // restores name to previous value
redo()
重做上一步被撤销的更改。
const history = new ChangeHistory(); history.trackChanges(myObject); myObject.name = "Bob"; history.commit(); history.undo(); // restores name to previous value history.redo(); // sets name to "Bob" again
canUndo()
如果存在更改历史记录中的更改，则返回 true。
-- -------------------- ---- ------- ----- ------- - --- ---------------- ------------------------------- ------------------------------- -- ----- ------------- - ------ ----------------- ------------------------------- -- ----
canRedo()
如果存在可以重做的更改，则返回 true。
const history = new ChangeHistory(); history.trackChanges(myObject); myObject.name = "Bob"; history.commit(); history.undo(); console.log(history.canRedo()); // true
destroy()
销毁 ChangeHistory 实例，并将其与跟踪的对象分离。
const history = new ChangeHistory(); history.trackChanges(myObject); history.destroy();
深度跟踪
在某些情况下，您可能需要更深入地跟踪对象的更改，这意味着当对象的属性被更改时，对象本身的更改也应被记录下来。 在这种情况下，您可以使用 ChangeHistory 的深度跟踪选项：
const deepHistory = new ChangeHistory(myObject, { deep: true });此时，对象本身的更改也将被记录，并且每个属性的更改都将被记录。 然后，您将能够恢复更改：
myObject.name = "Bob"; myObject.age = 30; deepHistory.commit(); deepHistory.undo(); // restore name and age to previous values
结论
conbo-changehistory 是一个有用的 npm 包，它提供了一种跟踪对象更改历史记录的简单方法。 有了这个包，你可以轻松地实现撤消和重做操作，或者在您的应用程序中提供类似于浏览器历史记录的功能。 该包的使用非常简单，您只需要实例化 ChangeHistory 对象，然后跟踪您要跟踪历史记录的对象。 该包也提供了一些选项，以适应您的特定需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a581e8991b448dfe2f