html按钮不能直接关联多规格，需靠javascript读取selectedspecs（如{color:"red",size:"m"}）组合sku；按钮须含data-product-id和data-action="add-to-cart"，规格项用data-spec/data-value结构化标识，禁用无效选项用aria-disabled，点击前校验sku库存并动态提示。
HTML 本身不能“关联”多规格，按钮只是触发点；真正绑定靠 JavaScript 读取已选规格并组合成有效 SKU，再传给后端或本地购物车逻辑。
按钮必须带 data-product-id，但不能只靠它
单靠 data-product-id 只能识别主商品，无法区分“红-M”和“蓝-L”这种库存/价格不同的变体。用户点击时，你得知道他到底要哪个 SKU。
- 必须同步收集当前已选的全部规格项，例如：
selectedSpecs = { color: "red", size: "M" } - 按钮本身不存规格，但应有明确上下文：比如它在某个规格弹窗内，或父容器带
data-sku-context="true" - 推荐在按钮上加
data-action="add-to-cart"，避免和普通按钮混淆，JS 用document.querySelectorAll('[data-action="add-to-cart"]')统一绑定
规格选择 DOM 必须结构化，不能靠文本匹配
用中文文本（如“红色”）做 JS 判断是典型坑——空格、全角/半角、翻译变动都会崩。所有规格项必须带机器可读的键值对。
- 每个选项用
<button type="button" data-spec="color" data-value="red">红色</button>，不用<select></select>或纯文本 - 已选状态靠 JS 维护一个对象（如
selectedSpecs），而不是仅靠class="active" - 禁用无效选项时，用
aria-disabled="true"+ CSS 控制样式，别用disabled——它会让元素跳过表单遍历，且无法通过键盘聚焦
点击按钮前，必须校验组合是否可售
用户点了“红”，又点了“XL”，但红+XL 已售罄，按钮却没变灰、没提示，这是电商最常被投诉的问题。
- 预加载所有有效 SKU 映射表，结构类似：
{ "red_XL": { skuId: "1001", stock: 0, price: 299 } } - 拼 key 时按固定顺序（如
color_size），避免size_color混乱 - 点击按钮瞬间调用
getStockStatus(selectedSpecs)，只在返回{ available: true }时才发请求 - 失败时显示具体原因（如 “红色 XL 暂无库存”），而不是笼统的 “添加失败”
移动端和无障碍细节容易被跳过
按钮禁用态、触控区、屏幕阅读器反馈，不是“锦上添花”，而是影响功能可用性的硬性节点。
- 按钮最小尺寸必须 ≥ 44×44px，用
min-width/min-height+padding保证，别只靠字体大小撑开 - 点击后立刻设
btn.disabled = true和btn.setAttribute('aria-busy', 'true')，防止连点 - 恢复状态时，优先用
btn.disabled = false，而不是删 class 或改 innerHTML——DOM 属性比样式更可靠 - 错误提示要用
aria-live="polite"区域动态插入，确保屏幕阅读器能读到
真正难的不是把颜色和尺码“连起来”，而是每次用户点一下，你都得重新算一遍：这个组合存在吗？有货吗？价格变了吗？按钮还能点吗？这些判断必须快、必须准、必须可测——HTML 只负责让 JS 能拿到干净的数据，别的它真干不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
