技术债Technical Debt
你可能会说
五页各自有一份按钮样式，改颜色时漏了一页，这说明了什么？
当前可用的实现方式留下了会增加后续改动负担的结构问题五个页面各自保存了一份登录按钮样式时，想统一改颜色就得改五处，漏掉一处会让页面看起来不一致。这类重复会让后续改动更容易遗漏；将样式收进一个共享组件后，还要逐页检查按钮外观。技术债描述的是需要权衡的维护负担，不代表每种重复都必须立刻重写，也不保证拖久一定更贵。
先知道
也常被叫作技术债Technical Debt代码债
从五份重复样式到共享组件：改动怎样避免漏一页
home.css .login { background: var(--text-3); }
pricing.css .login { background: var(--text-3); }
blog.css .login { background: var(--text-3); }
docs.css .login { background: var(--text-3); }
app.css .login { background: var(--text-3); }
| 首页 | 登录 |
| 价格页 | 登录 |
| 博客 | 登录 |
| 文档页 | 登录 |
| 应用页 | 登录 |
示例：同一种按钮样式重复在五个文件里。要统一改颜色，需要找到并更新每一份。
重复实现带来什么改动负担
失败前：五个文件分别保存样式：要统一改按钮颜色，就得找到五处定义；漏掉文档页时，那里的按钮仍是灰色。
改动来源：共享组件：按项目现有结构把按钮样式放在一个共享组件，五个页面都从这里取得样式。
反馈与边界：改完重新打开五个页面，确认按钮都变蓝且没有其它显示回归；是否继续整理，要看实际改动负担，不是所有重复代码都要立刻重写。
你可以这样告诉 AI Agent
示例里同一个登录按钮样式在五页重复，而且文档页漏改。请按项目现有结构收进共享组件，再逐页确认按钮都变蓝、其他页面内容没有意外变化，并告诉我该在哪里继续改样式。
接下来学什么
延伸阅读 · 权威出处
快速练习