网站开发时长：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /357a2958e65b.html
📄
网站开发时长：同一组件在不同页面表现不同时怎样构造验收样例
先把组件当成“有状态的独立单元”，而不是“某张页面上的装饰”。验收样例要覆盖组件在真实页面里会遇到的差异条件：容器宽度、内容长度、数据状态、加载顺序、主题变量和交互路径。做法是列出差异变量，为每个变量构造最小对照页，再用同一套断言在对照页上跑一遍。如果对照页结果不一致，先修组件或修页面的调用方式，而不是急着改样式覆盖。
先判断差异是组件问题还是页面问题
同一组件在不同页面表现不同，常见原因有四类，可以用排除法定位：
- 容器约束不同：父级宽度、内边距、栅格列数或 flex 分配导致组件可用空间变化。
- 内容数据不同：标题长度、图片比例、空状态、超长列表、错误态在样例页里没出现。
- 全局样式与主题不同：页面级字体、行高、颜色变量、圆角变量覆盖了组件默认值。
- 加载与交互时序不同：组件依赖的脚本、字体或异步数据在部分页面晚到，导致首屏与稳定态不一致。
排除顺序建议从容器和数据开始，因为它们最容易复现；主题变量和时序放在后面。若只在某个页面出问题，优先检查该页面是否传入了组件未声明的属性或包裹了额外的布局容器。
假设情境：三个页面共用一张卡片
以下为假设情境，用于说明构造方法，不代表任何真实项目。某站有三个页面共用同一张“内容卡片”组件：列表页、详情页侧栏、活动页。列表页卡片正常，侧栏卡片文字溢出，活动页卡片图片被裁切。团队最初的反应是分别给两个页面写样式补丁，结果组件版本开始分叉。
更稳的做法是先把差异变量写下来：列表页容器宽约 720px，侧栏约 280px，活动页约 960px 但图片区高度被固定。然后为每个变量建一个对照页，只改一个条件，其余保持不变。对照页跑完后，若侧栏溢出只在窄容器出现，说明组件缺少窄容器下的换行或截断策略；若活动页裁切只在固定高度下出现，说明组件需要把图片比例作为可配置项，而不是在页面里硬裁。
这一步的实际动作是：把差异变量写成对照页清单，并给每个对照页标注预期结果。结果会直接影响下一步——是修组件的内部规则，还是修页面的调用参数，避免用页面级覆盖把问题藏起来。
把差异变量转成可执行的验收样例
验收样例不是“看一眼觉得对”，而是有输入条件、有可观察输出、有判定标准。可以按下面的结构组织：
- 基线样例：组件在最常见容器和最常见数据下的表现，作为对照基准。
- 边界样例：容器最窄、内容最长、数据为空、图片缺失等极端条件。
- 组合样例：两个变量同时变化，例如窄容器加超长标题，验证规则是否互相冲突。
- 回归样例：修复后重跑基线样例，确认没有把原本正常的页面改坏。
每个样例至少记录三项：容器宽度或布局条件、传入的数据形态、可观察的输出（是否溢出、是否裁切、是否换行、交互是否可用）。判定标准要写成可复核的句子，例如“标题在 280px 容器内不产生横向滚动”，而不是“看起来正常”。
选择修组件还是修页面调用
两种做法都成立，但适用条件不同：
- 修组件：当差异来自组件自身缺少对窄容器、长内容或空状态的处理，且多个页面都会遇到同类条件时，应把规则收进组件，让调用方只传数据。
- 修页面调用：当差异来自某个页面确实需要不同的展示意图，例如侧栏本就要更紧凑、活动页本就要更大图，应把差异做成显式参数，而不是让组件猜测。
判断依据是：同一条件是否会在其他页面重复出现。会重复，就收进组件；只属于单个页面的展示意图，就留在调用方。无论选哪种，都要把决定写进验收样例，否则下次改版会重新踩同一个坑。
旧系统退出时，样例如何保留有效部分
当旧内容、旧系统或旧合作关系需要退出，组件验收样例的价值在于区分“必须保留的行为”和“可以随旧页面一起下线的行为”。做法是：先跑一遍现有样例，标记哪些样例仍然对应有效业务，哪些只服务于即将下线的页面。对仍然有效的样例，迁移到新组件或新页面的验收集；对只服务于旧页面的样例，记录其退出条件后再删除。
这个动作的结果会决定迁移范围：如果多数差异样例都对应仍在使用的内容形态，组件就需要保留这些分支；如果多数样例只服务于旧页面，就可以在新实现里简化，减少后续维护面。样例本身不是负担，前提是每个样例都能说清它保护的是什么行为。
