code-cube
2023-04-01 16:18:41 0 举报AI智能生成
《代码多维数据集》项目设计简章（持续更新）
作者其他创作
大纲/内容
个人技能
学习 VC 扩展插件相关知识
Angular 源码
输出文章
需求驱动学习
技术学习驱动项目开发
项目开发反馈于阅读与学习
实现闭环
LSP（Language Server Protocol）
结合 LSP 中实现数据通信格式
或可降低后期语言识别复杂度的问题
文件读写
后端能力，比如 Node
json ？
可行性阶段
需求
我们面临怎样的问题
屎山的维护与重构大于重写
对于复杂页面复杂项目难以阅读
人脑的瞬时记忆不支持短暂
发挥右脑识图能力
配合左脑处理文字语言信息
可视化查看项目结构、逻辑
快速掌握...
技术难度较高的项目不易阅读
例：各框架源码
调研与分析
Angular 15 + ECharts 5 实现「关系可视化」框图
介入数据、封装可行性
实现
可视化方式
ECharts
配置项数据
手动录入
操作交互
本地启动
界面
简单的操作配置列表
支持下载（charts 功能暴露 可选项）
支持设置可视化区域大小
支持自定义配置项（动态渲染表单）
线条粗细
线条颜色
渐变色
label 展示配置
其他可以暴露的
……
……
其他
可视化渲染区域
缩放与滚动
多端兼容
数据分析
疑难点
Demo 终版
展示代码结构可视化
不支持读写文件
需求手动填写配置项
可能会在实现阶段做一些减少人工的配置项整合操作
可以展示一个简单的页面结构的作用域关系视图
类似：朋友圈
依托于框架
技术选型
Vue3 趋势
Angular
React 18
需求导论
读取代码块
Node.js
调研其他
语言模型
TypeScript
基于 TypeScript 的语言功能
参考点：VScode 插件格式化识别插件的代码实现
JavaScript
JavaScript 的语言功能
Angular（基于 TypeScript + Angular Class 的语言模型）
变量
函数
引用读取
社区实现
VScode 插件实现机制
底层
断点实现（可借鉴）
React（基于 JavaScript + Hooks 的读取）
其他
Java
C / C# / C艹
Python
Go
维护方式
说明：基于上述需求导论
第一阶段个人开发者
后期其他语言功能的接入可以由社区提交的 pr 来制定代码规则
开发阶段
框架
Vue 3 或者 React
说明：迎合当前编程环境
依托于框架的展示项目，无关乎语言与技术
设计
配置模块
渲染模块
用户系统（可以提供轻量的历史记录以及数据存储等）
渲染机制
ECharts
自定义渲染
Canvas || SVG
基于社区的渲染框架
封装实现 + 开源
自定义渲染组件库
缩放
实现
暂无（参见 demo 实现）
维护
服务器部署
运营
开发配套官网（提供 本项目 api 可供调用展示）
数据源
实现文件读取
识别文件
处理引用
闭包的实现机制？
谷歌代码断点调试机制？
部署
依托于 VC 插件
实现方式
VS code
基本的插件发布集成
学习代码编辑器插件机制
扩展程序
调研
渲染机制
子主题
调研
略
结果
掘金开设专题
做完了→有结果→可交付→可复制
产出一个社区
文档
维护机制
后续规划
官方文档
学习 Angular 源码
设计模式 => 提升自我认知
可视化工具辅助阅读
设计并开发可视化
0 条评论
下一页
