给游戏 行动代号 写的整理词汇描述的小工具，主要功能是用自定义的描述词给待猜词打标签，并整理在屏幕下方，其余小功能还有：

• 输入描述词时自动检查是否“爆字”（即描述词里出现了待猜词里面的字）
• 给描述词自定义主题色，关联了该描述词的待猜词按钮上面就会显示这个颜色
• 同时支持队长和队员使用，会自动标注已知的词语颜色
• ...

虽然有写触屏支持，但碍于移动端浏览器对于触屏手势的各种占用，整体使用起来肯定是PC端鼠标操作体验更佳

PS: 很开心深夜还能和群友们一起玩: )

---

碎碎念：

在玩这个游戏的时候，这个程序的功能需求设计几乎是一下子就从脑子里面蹦出来了，并且非常“一步到位”，从开始写代码到最终完成这个小脚本，需求几乎没有怎么改过。实际使用起来，也确实发挥出了一开始设想中整理词语、厘清思路的作用，可谓是清晰得不能再清晰的需求。

所以从一开始我就没想过这是一个多么难写的程序。

但是就是这么一个天时地利人和的编程任务，实际写起来也遇到了不少意料之外的困难。比如：

• 程序内部事件的广播订阅机制的设计实现
• 在页面本身结构变动较大且不规律的情况下，如何进行程序自身元素的定位
• 同上情况下，如何从页面中检索数据、跟随页面变动更新数据
• 等等

很多东西也是一边学，一边写，比如：

• AbortController和AbortSignal，以及它们在addEventListener中的应用
• 以前不怎么常用的监视页面变动的神器MutationObserver，以及其强大的功能和页面性能上的取舍
• 利用outline制作元素双重边框
• 等等

这对于我而言是意料之外的。我本以为写个这种程度的小插件，自身编程知识储备完全够用；现在看来，在js前端技术（哪怕是仅限于原生js）上，我还差得很远。

编写这个小插件的过程中我学到的，还有很重要的一点，就是在编程效率和代码可维护性之间的取舍。为了让自己至少能读懂自己在写啥，我试着给程序整体写了需求设计，每个函数、每个类都写了注释，其中很多注释不仅写了函数参数，还解释了函数内部运行的主要任务。即便如此，在编写过程中仍然遇到了不少卡点，让我反复停笔，重新思考代码设计。我难以想象，如果我当时偷懒没有写这么详细的注释，没有以文字的形式解释清楚我的设计是什么，在我写代码的时候，又会是如何的混乱。所以，我学到的很重要的一点，就是不要偷懒；自己脑子内存没多大，好记性不如烂笔头，写成文字形式的需求才是真正的需求。

同时我也感受到了静态类型检查的必要性。以前听说js开发现在都流行用typescript时，我不能理解：javascript一个变量能表示各种类型的数据，为何要自废修为，让每个变量只能表示一种类型？终于，在熟悉且依赖了一年多的python的类型提示以后，回到没有静态类型检查的javascript，我第一次确切地感受到了类型标注的重要性。IDE提供的静态类型检查能够帮我避免绝大多数的错误，所带来的开发效率提升是不可忽视的。

写了这么多，我估计也没几个人看；如果有人读到这里，还是很感谢你愿意看我讲这么一大堆牢骚话。更多地，我希望这些感受能够印在我心里，而不是写在这里，过几天就忘干净了。如果对你也有启发，那真是意料之外的惊喜了。