很遗憾这个周报欠了两个星期，所以这次会连着发两份周报（下一份也在写了）。
项目进度
截止本周报应该发布的时间，我已经完成了项目的 React 重构，并且初步确定了 UI 编辑模块的组成。
重构
在项目开始一个月，已经写了一半的情况下面重构，的确不是一个很容易做出的确定，但是原先的技术选型确实不能支持这个项目的继续开发了——倒不说说技术上不可行，但是需要更多的时间，而且复杂度会超出掌控。
原先的技术选型受到了 Rapid 项目的影响，这个项目采用了原生 ESM 来进行开发，而不是使用流行的前端框架。因为我这个项目也使用 PIXI.js 来进行地图的渲染，很多实现和设计都参考了 Rapid ，所以一开始也很自然的学起了它的技术选型。
但是在准备 UI 模块的时候，面对需要拓展的状态管理相关的逻辑，这个项目的复杂度开始了指数增长，我需要保证 PIXI.js 的组件和 DOM 的 UI 都去跟踪同一份数据的变更来进行渲染和重绘，这样的逻辑会很复杂，需要我对状态管理的逻辑进行拓展，因为还需要 undo 和 redo 功能。原先的 Action List 的模型还是不足以撑起这么复杂的需求，如果要拓展到能用的程度就会需要很大的工作量——Rapid 项目，或者 iD 项目，在实现编辑系统和相关部分的时候应该写了上千行代码，而且只是一个框架。而如果我打算这么写的话，后续的开发进度就很难保证。
这时候我开始向导师求助，导师代询问了几位活跃在一线的前端开发者，并且得到了一些状态管理方面的建议。另外，不止一人对不用框架硬写表示怀疑，建议引入现代前端框架，比如 React 或者 Vue，“我觉得想清楚是自己想要造轮子，还是想用轮子实现一个应用，最好只二选一”。
在综合了各方建议之后，我决定引入 React 框架，使用 zustand 作为全局状态管理，同时 PIXI.js 有一个官方的 React 绑定，这也方便了我的迁移工作。
迁移的过程还算顺利，毕竟我其实也更熟悉用框架来开发，当初选取原生 JS 纯粹是抱着试试看的心态。显然这次尝试不是很成功。
重构之后，原来的 Action 抽象被彻底废弃，转入用 zustand 实现的 model 模块，原先所需的功能变成了 zustand 的 store 中的函数。这些以 Action 为名字结尾的函数应该是这个模块最后的痕迹了。 PIXI 模块使用了 React 绑定，现在看上去就像普通的 React JSX 了。原先的 stateMachine 被保留了下来，除了已经废弃的 ActionList 的接口和被大改的 PIXI 模块的接口部分做了一点改动。其他的代码没有太多大改，只是被我接着重构的机会迁移到了 Typescript, 相比 JSDoc 纯粹在注释上的类型标注自然是更加严格而且便捷了。
UI 部分
在重构之后，我开始了 UI 模块的开发工作。对于原先计划的 Outline 和 Property 页面大致写下了一些简单的静态组件来进行占位。目前测试良好，能够获取全局状态并且展示。这部分的开发可能会更加偏向传统前端项目。所以应该会比较平稳。
更新计划
这次的更新计划，由于没有太多功能上的推进，会继续在上一份双周报中提到的目标的基础上继续推进。
需要补充的是接下来会在大纲视图中对当前的元素分类，并且会写出 filter 来筛选数据，因为这个编辑器中可能目前只需要展示 highway=* 和 public transport v2 的数据，所以接下来的编辑界面应该会清爽很多。
评论