轻松实现一个可视化数据转换的小工具-详解

前端开发过程中，经常有两个不同的组件、或者两个不同的业务模块需要对接，但是双方提供的数据结构又不一致的场景。这个时候就需要一个转换器来实现两个模块无缝对接，通过这个转换器的处理达到数据结构一致的目的。

基本需求梳理

• 场景中两个相同或者不同数据结构对象，对象是任意数据结构的，对接场景下数据结构是固定的
• 针对当前场景下转换器处理是相同的
• 尽量图形化操作就可以换成配置以及预览效果

设计基本思路

实现思路

• 两个不同的数据结构可以通过字段映射的方式来取值和设置值，实现数据的对接
• 取值路径和设置值的路径规则最好一条一条保存下来，作为转换器的规则描述
• 取值路径和设置值路径可以通过lodash的get和set实现
• 可视化操作可以通过json树的渲染及操作来实现

设计实现思路草图

我根据自己的想法大致设计一下交互方式如下：

实现步骤

json树操作

我找了一下josn树操作的组件，发现react-json-view挺不错的；可以实现值的复制、选择；但是选择是针对叶子节点的，所以这里我使用复制功能来实现，无论是叶子节点还是非叶子节点都可以复制到，（enableClipboard）复制的时候获取当前的path信息即可。另外path多了一层根路径默认是'root',如果不想要操作保存的时候去掉即可。

如下图所示，鼠标悬浮点击这个icon图标来选中key，取其路径值保存起来

// 复制的操作
const enableClipboard = (copy) => {
    const { namespace } = copy;
    if (namespace?.length === 1) { // 复制的根元素
      setSourceKeyPath([])
    } else {
      const curNamespace = namespace.splice(1, namespace.length - 1);
      setSourceKeyPath(curNamespace)
    }
}

路径保存

路径映射保存在数组里。

转换器处理

转换器只需要根据规则数组map处理一下每条规则进行对原数据和目标数据进行取值设置值操作就可以了

// dataSource 是规则数组
// targetData 是目标数据
// sourceData 是源数据
dataSource.map((item) => {
  set(targetData, item.targetKeyPath, get(sourceData, item.sourceKeyPath))
  return item
});

效果预览