放弃重型框架，用原生 JS 构建 ADHD 筛查工具的实操心得

最近在研究轻量化工具时，关注到了一个名为 EduScreen 的开源项目（GitHub 仓库名：Not-Weak-Mind）。这个项目最让我惊喜的地方在于它极其克制的开发栈：完全基于 Vanilla JS、HTML 和 CSS，没有任何 React 或 Vue 等现代框架的冗余，直接托管在 GitHub Pages 上。在追求“全栈复杂化”的今天，这种极简主义的实现方式反而给很多开发者提供了极高的参考价值。

我想深挖这个工具的核心逻辑，因为这种“权重打分系统”其实是很多轻量化评估类产品的通用底层方案。

从技术实现来看，该工具的核心逻辑非常纯粹，本质上是一个基于 JSON 映射的累加器。开发者并没有将题目硬编码在 HTML 中，而是通过一个 JSON 数组存储问题集，每个对象包含一个唯一的 id、题目文本 text 以及对应的权重 weight。

在 JS 逻辑层，程序通过监听用户的选择事件，实时调用一个累加函数。例如，当用户点击“是”时，代码会执行 totalScore += currentQuestion.weight。这种设计的精妙之处在于，它将“评估逻辑”与“界面展示”彻底解耦。如果未来需要调整筛查标准的权重（比如将某个症状的权重从 1 分改为 2 分），开发者只需要修改 JSON 配置文件，而无需触碰任何 DOM 操作代码。最终，程序将总分与预设的分数区间进行映射，直接在前端输出评估结论。

这种纯前端实现的方案在隐私保护上具有天然优势。由于不需要后端数据库存储，用户的所有选择和得分仅存在于本地内存中，页面刷新即消失，极大地降低了医疗类筛查工具对用户隐私泄露的担忧。

对于想要复刻此类工具的开发者，部署过程几乎是零成本的。你只需要将 index.html、style.css 和 script.js 这三个静态文件上传至 GitHub 仓库，然后在 Settings 选项卡的 Pages 模块中，将 Source 设置为 main 分支。几分钟后，GitHub 就会分配一个公开的静态访问地址。这种部署链路比配置 Docker 或 K8s 要高效得多，非常适合快速验证产品原型。

不过，在实操过程中，有一个极易被忽视但至关重要的细节，那就是针对特定人群的 A11y（可访问性）优化。既然是为 ADHD 或阅读障碍（Dyslexia）人群设计的工具，UI 层的细节直接决定了工具的可用性。

一个常见的坑是过度依赖像素（px）单位。在处理此类工具时，建议在 CSS 中全面采用 rem 单位。这样用户在浏览器端通过缩放字体大小时，页面的布局能够保持相对比例，不会因为字体增大而导致内容溢出或重叠。此外，对比度和间距的控制至关重要，应避免使用过于复杂的装饰性字体，尽量选择无衬线体，并增加行高（line-height），以减轻阅读障碍者的视觉压力。

总结来说，这个项目的核心启示是：不要为了使用框架而使用框架。在不需要复杂状态管理和服务器端交互的场景下，原生 JS 的响应速度和部署便捷度才是最优解。