依赖分析可视化
2020-03-19 09:35:18 0 举报AI智能生成
依赖分析可视化思路, 从目标, 数据收集, 可视化思路方向展现如何进行可视分析
作者其他创作
大纲/内容
app与微服务
目标
展现前端 app 与后端微服务对应关系
展现以app一一对应后端微服务为目标的拆分前后的两者对应关系
数据收集
方式
收集 app 访问服务的日志
运行 app, 访问当前 app 中所有页面, 操作所有交互
程序化收集
解析日志
可视化
以桑基图展现两者的对应关系
app 与 cmp
目标
要改动(重构, 修改bug)一个公共组件， 可以快速看到受影响的 app
要改动一个公共组件， 可以快速找到被依赖使用(直接/间接)的子组件
数据收集
app 与 cmp 的直接依赖
cmp 自身
数组
一个组件对外暴露的不只是组件，还有一些工具方法
组件内部存在引用
数据结构
module
组件名
exports
实际对外暴露的能力(组件，工具方法)
exportType
export 类型
deps
数组
未去重，比如如果引入相同的能力， 并没有去重
元素数据结构
module
组件名
imports
引入的能力(组件、工具方法)
type
引入的方式
file
引入文件的文件位置
source
引入的源码
可视化
采用同心圆布局
被依赖最严重的位于最里面
位于相同层次的依赖程度相同
定义不同节点类型
模块: star
组件: diamond
app: circle
边
采用渐进色表示边, 颜色越来越集中的地方, 表示依赖程度最深
箭头方向也是依赖方向
辅助筛选
包含间接依赖
搜索某个节点
高亮或动画, 让人肉眼快速识别
聚焦当前点击的节点, 把节点放到视口中心
分组
依赖程度
被依赖程度
全依赖程度
节点类型
交互
hover节点
高亮关联节点与连线
显示被依赖
蓝色边
依赖
黄色边, 暗示一旦依赖改动, 可能会收到影响
双击通用组件
展开/折叠子组件，在展开情况下，依赖关系转移到具体的节点
可自由拖拽位置
点击节点
右侧面板显示详情
依赖数据
类型: 数组
数组条目字段
依赖名称
依赖类型
app
cmp
依赖方向
依赖
被依赖
依赖相关性
间接
直接
依赖程度
引用的次数
详情
imports
源码
引用的源码
文件
引用的文件
依赖方式
star/default/解构
支持筛选和排序
总览
总依赖
相关性维度
依赖方向维度
可视化建议
app 与 组件略有不同
0 条评论
下一页
