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