第一卷：初入江湖 第一章：深夜的键盘声

ithromantic
207 阅读5分钟

凌晨三点十七分。

林晨盯着屏幕上那个红色的错误提示，已经看了整整两个小时。控制台里不断跳出的警告信息像一串串嘲讽，每一个都在告诉他：你错了，你的代码有问题。

他揉了揉酸涩的眼睛，端起桌上已经凉透的咖啡，抿了一口。苦涩的味道在舌尖蔓延，但至少能让他保持清醒。
“为什么就是不行呢？”他自言自语，声音在安静的房间里显得格外清晰。

这是一个关于组件状态管理的bug。明明逻辑看起来没问题，数据流也清晰，但就是无法正常工作。用户点击按钮后，状态更新了，但UI没有响应。这种问题最让人头疼——不是完全报错，而是静默失败。

林晨重新审视代码。这是一个Vue 3组件，使用了Composition API。他喜欢这种写法，代码组织更清晰，逻辑复用方便。但有时候，清晰的结构反而会掩盖问题。

const handleClick = (button, e, forceEmit = false) => {
  trackBtnClick(button.label?.toLowerCase() || 'buy now')
  
  if ((props.shouldPopEvent && NEED_REACTIVE_LABEL_TYPE.includes(button.labelType))) {
    e.preventDefault()
    e.stopPropagation()
    emit('click', button)
  }
  
  if (forceEmit) {
    emit('click', button)
  }
}

他盯着这段代码，突然意识到问题所在。两个独立的if语句都会调用emit('click', button)，而第一个if里阻止了事件冒泡，这可能导致某些情况下事件处理不正确。更重要的是，当shouldPopEvent为true且forceEmit也为true时，会触发两次emit，虽然不会导致bug，但确实不够优雅。

林晨开始重构代码，提取条件变量，合并emit调用，添加空值检查，逻辑更清晰统一：

const handleClick = (button, e, forceEmit = false) => {
  trackBtnClick(button.label?.toLowerCase() || 'buy now')
  
  const shouldPopEvent = props.shouldPopEvent && NEED_REACTIVE_LABEL_TYPE.includes(button.labelType)
  const shouldEmit = shouldPopEvent || forceEmit
  
  if (shouldPopEvent && e) {
    e.preventDefault()
    e.stopPropagation()
  }
  
  if (shouldEmit) {
    emit('click', button)
  }
}

运行测试，bug消失了。问题解决了，但林晨并没有感到兴奋，反而有些疲惫。小问题往往最耗时间——看起来简单，但需要仔细思考才能找到根源。

他保存代码，提交到git，然后关掉编辑器。窗外的城市依然安静，只有偶尔经过的车辆打破宁静。

林晨走到窗边，看着远处那栋还亮着灯的写字楼。不知道是哪个同行也在加班，也许正在解决类似的问题。程序员的生活就是这样：白天写代码，晚上修bug，周末学习新技术。永远有解决不完的问题，永远有学不完的知识。

他回到电脑前，打开邮箱。一封未读邮件来自项目经理张明，时间是晚上十一点。

“林晨，明天早上有个新项目要讨论，关于一个小说阅读器组件。客户需求比较复杂，需要支持自定义字体、夜间模式、进度保存等功能。你技术能力强，我想让你来负责这个项目。明天上午十点，会议室A，我们详细讨论。”

小说阅读器？林晨有些意外。他们公司主要做企业级应用，突然做阅读器组件确实不常见。但转念一想，这或许是个机会：他最近在学习Vue 3的新特性，正好可以实践。

他回复邮件，表示愿意接手项目，然后关掉电脑准备休息。躺在床上，他还在想那个bug。虽然解决了，但总觉得还有更好的方法。程序员的职业病——永远不满足现状，永远想优化。

想着前辈的话：“写代码容易，写好代码难。但最难的是，在时间压力和完美主义之间找到平衡。”林晨渐渐睡着了。梦里，他还在写代码，但这次运行完美，没有bug。

第二天早上，林晨比平时早到办公室。九点四十五分，他走进会议室。里面已经有人：产品经理苏雨，UI设计师王雪，技术总监陈浩，以及张明。

苏雨打开投影仪，介绍项目：“客户是一家在线教育公司，希望提供阅读平台，支持自定义字体、夜间模式、进度保存、章节导航等功能。要求响应式设计，长章节也要流畅。”

林晨认真记录，同时提出技术问题：

  • 章节内容格式：HTML

  • 进度存储：localStorage还是后端？

  • 上线时间：一个月

张明答复：数据为HTML格式，进度先存localStorage，客户希望一个月上线。

林晨心里计算：设计一周，开发两周，测试和优化一周，时间紧迫但可行。他提出几点支持需求：

  1. UI设计尽快确定

  2. 测试环境需模拟大量数据

  3. 技术难题可寻求团队支持

陈浩点头：“林晨，项目你全权负责。遇到问题找我或团队，都会支持。”

会议结束后，林晨回到工位，开始规划组件架构：

  1. 主组件：NovelReader.vue

  2. 设置面板：NovelReaderSettings.vue

  3. 章节列表：NovelChapterList.vue

  4. Composable：useNovelReader.js

他在纸上画架构图，思考模块职责和接口，喜欢从零开始设计的感觉，就像建筑师设计房子。

苏雨过来，递给他详细需求文档和参考案例：“有什么问题随时找我，我就在你对面工位。”

林晨接过，点头。苏雨笑了笑：“这个项目可能需求多变，提前沟通避免返工。”

他微微一笑，回到电脑，搭建项目框架，写基础composable，定义数据接口。

// useNovelReader.js
export function useNovelReader() {
  const currentChapterIndex = ref(0)
  const readingSettings = ref({
    fontSize: 18,
    lineHeight: 1.8,
    backgroundColor: '#f5f5dc',
    // ...
  })
}

晚上七点，林晨保存代码提交到git，关掉电脑，走出公司大楼。晚风带着一丝凉意，他在回家的路上思考这个充满挑战的阅读器项目。回到家，他简单吃了点东西，然后学习Vue 3的新特性，准备第二天继续开发。

avatar
文章
阅读
粉丝