前言

2023年5月，在玩完《王国之泪》陷入贤者时间后，作为菜鸡程序员的我决定为我当时比较喜欢的桌游——《方舟动物园》写一款卡表。当时主要的动机是：

1. 我玩桌游喜欢轻度背板，因此有时候希望知道一些卡片的具体效果以及分布概率
2. 看到了一些新的前端技术想要尝试一下

因此项目很快就搭建起来了，最终在23年7月首次上线 (BGG宣传贴)，并经历了持续的维护与迭代，如今依然有着不错的数据：

• 近6月浏览量 129k
• 总评论数1240条
• 每日选卡累计超过 130 天

我对于我当时的行动力还是比较满意的。但是也正如同一位公司前辈说过的话：作为程序员新人，如果几个月后回头看自己之前写的代码，没感觉“这写的什么玩意”的话，就说明自己这几个月进步不大。如今回望这个项目，还是发现了很多值得改进的点。本文主要是从技术的角度记录一下。

优点

优点也简单提个几句，继续保持：

1. 前期数据结构的预定义。基于良好的数据结构，未来拓展模型计算、评分评论系统、卡牌diy、每日选卡都有着还算轻松的开发成本。
2. 前期 Python 批量自动化。用 Python 批量处理源 BGA 文件和 PDF 节约了不少重复繁琐的人力成本。

缺点

1. 数据结构的过度设计。当时有点太依赖于 TS 的类型提示支持，但忽略JS对象和DB的数据流转（序列号与反序列化）问题。实际上 DTO 应该是在项目初期就要设计好的。
2. 静态页面和API交互的耦合。实际上这个项目本身是个静态页面，后续才加入了评论等 API 交互。但是在新增功能的时候，应该将这种功能作为增量可插拔的插件以 HOC 的形式存在，而不是和静态页面耦合起来。这样会导致我后续在希望迁移到国内环境如微信小程序时有额外的开发成本。
3. Markdown 未支持。不知道为什么没提前预置好 Markdown 解析，这样 About 页面不用这么麻烦，同时可以实现攻略分享的功能。
4. 卡牌文本 i18n 解析。因为卡牌文本包含了特殊元素（如图标），这部分解析没对中文做额外支持，导致有时候解析异常，很不优雅的设计。
5. 性能优化。首页懒加载都没做，惨不忍睹。
6. 状态管理。实际上评论区和卡牌筛选是应该做状态管理的，现在的筛选实现很丑陋。我在今年中旬的 Vtuber Logo 项目中用了高阶函数以管道的方式做筛选，但实现依然不够让我自己满意。

总结

这个项目幽幽又默默，金玉其外败絮其中。要是能重来，我一定好好优化。但是现在是不可能重构滴。