web前端项目经验范文

去年秋天，端项我接手了一个医疗预约系统的目经重构项目。老系统用jQuery堆了三年，验范代码里藏着十几个定时器，端项页面切换时经常出现重复请求。目经最要命的验范是，医生排班表在IE11下会错位——那可是端项医院门诊部还在用的浏览器。

重构的目经第一周，我砍掉了所有jQuery依赖，验范用Vue3重写了组件树。端项但真正让我头疼的目经不是框架切换，而是验范数据同步。医生临时停诊、端项患者改约、目经号源释放，验范这些操作要在三个页面间实时联动。我试过EventBus，试过Vuex，最后选了Pinia加localStorage持久化。每次状态变更都写日志，这样患者刷新页面后还能恢复操作流程。

有个细节我记得很清楚。排班表组件里，每个时段格子要显示剩余号源和已约患者姓名。原本后端返回全量数据，前端自己过滤。改成按日期懒加载后，首屏时间从4.2秒降到1.1秒。但代价是，快速切换日期时会出现白屏闪烁。我加了一个简单的骨架屏，用CSS动画填充占位色块，用户体验一下子顺滑了。

样式这块也踩过坑。医院UI规范要求所有按钮必须带图标，但设计稿里没给hover状态。我干脆自己定义了一套交互反馈：主操作按钮用深蓝色渐变，悬停时亮度提升10%，点击时缩放0.98。这种微动效在医疗场景里其实有讲究——医生手指可能戴着手套，触控精度不如鼠标，所以点击区域至少44像素，按钮间距也不能太密。

项目上线前两周，医院信息科突然要求兼容国产化浏览器。我花了一个通宵测试，发现主要问题出在CSS Grid的gap属性上。最后用flex布局重写了排班表，顺便把老代码里所有flex-basis单位从百分比改成rem，适配不同屏幕缩放。那晚我边改边骂，但第二天看到测试报告里“兼容性通过”几个字，又觉得值了。

这个项目给我的最大教训是：前端不只是写页面，还得理解业务场景。比如患者取消预约后，号源不是简单加回池子，要区分“爽约释放”和“主动取消”——前者会限制该患者未来三天的预约权限。这个逻辑最初写在后端，但交互上需要前端同步展示提示。我为此加了一个全局消息推送器，用WebSocket实时通知用户状态变化。

现在回想起来，技术选型反而是最不重要的部分。真正考验人的是，如何在混乱的医院网络环境里调试接口，如何让六十岁的主任医生觉得新系统比老系统更好用。我后来给所有操作都加了键盘快捷键，还做了语音播报的辅助功能。这些不在需求文档里，但我觉得值得做。

项目交付那天，门诊部的护士长跟我说：“小伙子，你们这个新系统，排班表看着舒服多了。”那一刻我才意识到，前端工程师的成就感，往往来自这些具体而微的瞬间，而不是代码仓库里的commit记录。