数据可视化大屏设计器开发-重大变更控制

数据可视化大屏设计器开发-重大变更控制

开头

本文是数据可视化开始的开发细节第八章。关于大屏中重大变更控制的逻辑。

重大变更，也就是Breaking Change。
当版本更新中出现了和之前版本不兼容的情况，需要我们自己手动做兼容。

比如上一个版本的配置的一个数据类型是数组，而现在的数据类型变成了对象，就需要手动将数据进行修正。

开始

版本控制

首先是关于版本的控制。
1.20.1

序号 格式 说明
1 非负整数 主版本号
20 非负整数 次版本号
1 非负整数 修订号

按照上面的规则，我们就可以使用semver来对版本进行比较。

1
2
3
4
5
6
7
8
9
import semver from 'semver'

function compare(versionA, versionB) {
  // 判断 versionA 版本是否高于 versionB
  return semver.gt(versionA, versionB)
}

compare('1.0.1', '1.1.1') // false

统一变更控制

根据版本的判断，接下来就要针对需要兼容的版本以及需要兼容的数据格式做一下特殊处理。

统一在指定文件夹下按照版本进行分类，并在每一个兼容文件夹下记录版本更迭的描述文字。

整体的流程就是：

  1. 接口请求大屏数据
  2. 预处理大屏数据
  3. 版本判断
  4. 个别配置处理
  5. 返回最终大屏数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

async function steps() {

  // 请求大屏数据
  const response = await requestScreenData()
  const { version, config } = response
  // 判断 当前版本 是否大于 大屏数据版本
  if(compare(currentVersion, version)) {
    const { needToBreakingChangeConfig, ...nextConfig } = config
    // 版本兼容
    return merge({}, nextConfig, transformConfig(needToBreakingChangeConfig)) 
  }else {
    return response 
  }

}

这样既方便了别人继续开发，也方便自己后续查看及整理。

其他想说的

针对配置的变动，可以在大屏当中增加一个tooltip的提示功能，用于提示用户配置发生的变更。
tooltip中添加我已知晓按钮，方便在用户点击知晓后隐藏该提示。

基于上面的说明，提示功能的文案信息直接放置在前端的代码当中，同样按照版本的类目放置在一起，增加README。

具体的配置格式如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
type VersionChangeTooltipItem = {
  [configId: string]: {
    // 是否已读，当用户点击知晓时，更改为已读  
    read: boolean;
  };
};

type VersionChangeTooltip = {
  [version: string]: VersionChangeTooltipItem;
}

// 为每一个配置增加配置id，当然没有必要一次性全部加上。
// 后面有做变更的配置再增加即可。  
const configTooltip = {
  '1.21': {
    'object-to-array': {
      read: false 
    }
  }
}

当然也存在多个版本存在变更一个配置，且用户多个版本未使用的数据，对多个配置做分页即可。

结束

以上逻辑均为本人自己的想法，如有问题或错误可指正🙏🏻 。

结束🔚。

顺便在下面附上相关的链接。

试用地址
试用账号
静态版试用地址
操作文档
代码地址

参考资料

语义化版本命名通行规则_笔记