一、前言
在传统的代码开发中，研发人员可以通过 Git 的 diff 功能清晰地掌握代码的变更情况。然而，在低代码平台中，开发的产物通常以 Schema JSON 的形式呈现，这意味着变更并不是通过逐行比较文本代码来识别的，而是需要对 Schema JSON 文件进行差异分析。因此，如何基于 JSON 内容进行变更对比展示，使之更加清晰和直观，成为了我们面临的一项挑战，本文将深入探讨在低代码场景下进行变更对比的 3 种技术方案，Schema JSON 对比、内容预览快照对比和 Schema 模块化对比。
二、技术方案
根据开发成本和直观清晰程度的不同，我们主要考虑以下 3 种解决方案：Schema JSON 对比 、内容预览快照对比 和Schema 模块化对比。
2.1 Schema JSON 对比
Schema JSON 对比是一种将前后对比的全量 Schema JSON 直接放入代码 Diff 编辑器中进行对比的方法。它简单直接，能够迅速展示 JSON 结构的变化。但这种方法也存在明显缺陷：
- 可读性差：全量对比可能产生大量变更，导致重要变更被琐碎信息淹没；
- 性能问题：对于内容繁多的大型 Schema JSON，直接全量对比可能引发性能瓶颈；
- 理解难度：直接阅读 Schema JSON 对于不熟悉低代码协议的用户来说存在一定难度；
2.2 内容预览快照对比
考虑到 Schema JSON 的最终呈现是页面，我们可以通过 Schema 直接渲染页面内容展示进行对比。这种方法对于简单展示页面较为实用，能够直观看出变更内容是否符合预期。但对于注重逻辑和交互的 B 端页面，许多内容并非直观展示，需要特定交互才能触发，因此可能无法从预览快照中直观看出变更前后的区别。
2.3 Schema 模块化对比
Schema JSON 文件包含应用的配置和页面内容结构等信息，其变更可能涉及组件的添加、删除、移动以及属性的修改等，这些变更对于理解内容变化至关重要。我们需要解析 Schema JSON，以模块化的方式进行展示，以实现更直观、更清晰的结构呈现。模块化解析面临的挑战包括：
- 结构复杂性：Schema 中包含嵌套的对象和数组等数据结构，使得直接比较变得复杂；
- 变更粒度：需要考虑Schema对比的粒度，如模块粒度、组件粒度、属性粒度等；
- 性能考虑：随着应用规模增长，Schema可能变得庞大，对比需要保持高效处理能力；
- 可视化展示：为了让非技术用户也能理解变更内容，我们需要一种可视化的展示方式。
针对上述问题，我们设计了适用于 Schema JSON 的对比算法，并将内容解析为 9 大模块：组件树、方法、生命周期、数据源、变量、全局样式、全局常量、组件映射和物料版本，同时基于 Monaco Diff Editor 来展现对比。其中，组件树模块作为核心，提供了 3 种不同形式的视图展示：组件视图、大纲树视图和 DOM 树视图。
整个组件视图是以组件为粒度进行对比，其中以组件在大纲树中的路径作为组件名，组件所属属性作为对比值。每个组件都由唯一的 id 进行确定，当 id 在变更动后的组件树中不存在时则视为删除，当 id 仅在变动后的组件树中存在时则视为新增，当相同 id 的组件的属性在变动前后发生变化则视为更新。该对比算法存在的问题是：组件的新增、删除和属性变更都能够对比出来，但是当组件仅发生移动时，此时对比算法得到的结果是空。因此，我们继续引入大纲树视图。
利用 microdiff 和 deep-object-diff 等库我们能够轻易识别出两个对象之间的三种主要变化：属性的增加、属性的删除以及属性值的更新。但是在比较树形对象时，除了属性值的变化，我们更关注的是节点级别的变化，包括节点的增加、删除、更新，以及一个更为特殊的情况------节点的移动，即节点在树中的位置发生了变化。受 Vue3 虚拟 DOM Diff 算法启发，我们提出了 Tree Object Diff 算法用于对比节点的添加、删除、移动和值更新，不仅支持同层级移动对比，还支持跨层级移动对比。
更多内容请阅读：前端 JS 如何高效对比两个"树形对象"？增删改，还有移！
DOM 视图是另一种展现方式，其将组件树组合成前端开发人员最熟悉的 HTML 的形式，将组件的属性作为 HTML 元素的属性进行展示，通过一整个完整的 DOM 树进行对比，相较于 JSON 格式的对比更加直观，例如 Retool 就采用了这种方案。
三、总结
在传统的代码开发中，我们能够通过 Git Diff 实时了解自己编辑了哪些内容。然而，在低代码开发中，我们往往处于一个黑盒状态，难以实时了解变更情况。当需求内容的功能点较多或开发周期较长时，开发者可能会遗忘或不清楚已经编辑过的内容。因此，低代码开发平台也是需要专属的可视化变更对比方案来查看变更，本文详细介绍了 Schema JSON 对比、内容预览快照对比和 Schema 模块化对比等 3 种方案及优缺点，可以根据实际情况选择合适的方案应用。