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