简介：在前端可视化的可视化领域中，“重复”和“撤销”的两个函数在标准中已经是标准的。毕竟，只要有用户，可能会出现错误。提供“遗憾医学”。目前，有各种视觉施工平台。本文在编辑历史功能时介绍了物联网工作室可视化构建平台的设计和反思。
在前端可视化领域，“重做”和“撤销”的两个函数在标准中已经是标准的。毕竟，只要有用户，可能会出现错误。这两个功能无疑为用户提供了用户提供的用户。“遗憾”。目前，有各种视觉构造平台。本文在编辑历史功能时介绍了物联网工作室可视化构建平台的设计和反思。
在IoT Studio可视化构建平台中，我们通过页面的抽象语法树保持页面的状态。页面信息和组件信息记录在相应的节点上：
保存页面时，页面配置将作为JSON文件上传到OSS。
快照
每次编辑编辑器页面时，该页面上的信息都会复制到历史记录中。在重新记录和取消时，请从历史记录中删除相应的快照，并用快照替换当前页面状态以完成历史记录手术。
这样，通常使用指针指向当前页面状态。如下所示：
后off操作后，指针指向以前的某个快照，并且该页面恢复为p3：
再次编辑时，指针指向新状态P5：
快照方法的特征：
操作说明
物联网工作室使用此方法。
我们为每个操作定义了两种方法：执行和撤消，然后抽象“操作”进行操作。
在执行中执行此操作的正面操作，并在UNDO中实现反向操作。
每个编辑操作实际上都是创建一个操作并执行其执行方法的，然后如果需要，则执行其撤消方法。
指令方法的功能：
IoT Studio上面使用。
转型
在实际的业务开发中，许多方案将涉及一个时间编辑的多个组件，即涉及多个操作实例。因此，在操作的基础上，有一个交易概念。在交易中，维护操作实例列表。每当有执行或撤消执行时，操作列表中的操作实例都会执行其执行或撤消方法。
双链接列表
IoT Studio中的操作历史记录基于两条链接列表。每个链接列表节点都维护一个事务实例。链接列表节点末尾的执行结果是最新的操作记录。
在链接列表之前，节点状态已通过前向电流和后源性汇率进行切换。
每当操作新的编辑器操作时，都会通过AddafterCurrent插入新节点。
操作是实现和撤销的最低指令实例。通过操作通过不同的子类实现不同的执行和撤消方法，以实现重新设计和撤销的特定逻辑。
事务维护操作实例数组。当我们在业务逻辑开发中设置组件的属性设置时，我们将交易实例用作业务逻辑开发的单位。
维护一个两条链接的列表来管理交易实例，从而实现了可视化操作的历史功能。
在实施思想时，我们提到了“快照方法”和“指令方法”。与两者的优点和缺点相比，不难发现主要矛盾是在数量和维护成本方面。一些想法：
不变的JS +快照方法
在JS中，对象被引用为分配。保存对象时，它通常会使用深层副本法规来避免此问题，但这会导致CPU和内存浪费。这也是快照方法的缺点。
不变的使用耐用的数据结构。当使用旧数据创建新数据时，它将确保可以同时可用且没有变化的旧数据。同时，为了避免深层复制和复制所有节点的性能损失。目标树的节点变化，仅修改该节点和受他影响的父节点，并共享其他节点。
在实施操作的历史功能时，请使用不变来存储数据来解决数据重用的问题。immutable.js +快照方法可以组合使用。据我所知，该公司的@ali/visualengine，使用此解决方案。
每次我们运行Git add and Git Commit命令时，Git所做的工作都是将重写文件保存到数据对象，更新临时存储区域并记录树对象。
当我们使用GIT维护项目时，从理论上讲，随着GIT提交的数量的增加，文件对象将越来越大，但实际上，该量并没有发生很大变化。空间。较早的版本将节省差异，而较新的版本将保存完整的数据对象。
Git如何执行此操作？当Git包装对象时，它将找到类似命名和类似尺寸的文件，并且仅保存不同版本的文件之间的差异。您可以查看包装文件并观察其如何节省空间。相同的有趣内容。是第二版完全保存在文件内容中，并且原始版本以不同的方式保存 - 这是因为大多数情况需要快速访问文件的最新版本。最好的是您可以重新访问 -随时打包它们。git通常会重新包装仓库以节省空间。当然，您还可以随时手动执行GIT GC命令。
作者|托萨卡来源|阿里技术公共帐户