button不写type属性时在form内默认为submit，会触发表单提交导致页面刷新，购物车请求无法发出；必须显式声明type="button"并配合data-product-id等规范属性确保交互安全可靠。
button必须显式声明 type="button"
不写 type 属性时，button 在 <form></form> 内默认行为是提交表单，页面会刷新或跳转，购物车请求根本发不出去。哪怕没套 form，也别依赖浏览器“默认不做事”——它默认就是 type="submit"。
常见错误：<button>加入购物车</button> 放在表单里，一点就刷新；或者用 <a href="#"></a> 模拟按钮，结果触发锚点滚动或 history push。
- 正确写法始终是：
<button type="button" data-product-id="1057">加入购物车</button> - 如果真要配合数量输入框走表单流，必须加
event.preventDefault()+ fetch，但没必要增加复杂度 - 服务端渲染时，确保
data-product-id的值与后端/cart/add接口要求的product_id字段类型一致（字符串 or 数字）
data-product-id 是唯一可靠的商品标识传递方式
别把 ID 拼在 href 或 id 属性里，前者让按钮变成跳转链接，后者语义错乱（id 是全局唯一 DOM 标识，不是业务 ID）；也别靠 class 名或 DOM 位置推断商品 ID，结构一变逻辑就崩。
data-product-id 是专为这类场景设计的，JS 可直接用 btn.dataset.productId 安全读取，且不会污染样式或交互逻辑。
- 有 SKU 变体（如颜色/尺寸）时，额外加
data-sku-id，避免只传主商品 ID 导致库存单位混淆 - 移动端需确保触控区 ≥ 44×44px：用 padding + min-width/min-height 控制，别依赖 inline-block 的换行间隙（会产生不可控空白）
- 若按钮是服务端渲染，注意模板引擎是否自动转义引号，导致
data-product-id="1057"渲染成data-product-id="1057"——现代浏览器能识别，但旧版 IE 可能出问题
点击后必须同步控制 disabled 和 aria-busy
光加个 .loading 类或改文字为“添加中”远远不够。用户连点、网络延迟、接口重试都会导致重复请求，而 DOM 状态比 CSS 类更可信。
真正有效的防重复逻辑是：点击瞬间执行 btn.disabled = true + btn.setAttribute('aria-busy', 'true')；无论请求成功或失败，回调里都必须执行 btn.disabled = false + btn.removeAttribute('aria-busy')。
- 失败后不要禁用按钮，而是恢复可用并显示具体提示（如 “库存不足”，而非 “请求失败”）
- 别用
btn.classList.remove('loading')代替状态重置——类名可能被其他逻辑误加，disabled属性才是真实阻断点击的开关 - 屏幕阅读器依赖
aria-busy判断交互状态，仅靠视觉反馈不符合 WCAG 要求
抛物线动画不能只靠 CSS transition
想实现商品图飞入购物车的抛物线效果，transition: transform 只能做直线位移，无法控制中点高度。必须用 JavaScript 实时算坐标 + 动态生成轨迹。
关键步骤：用 getBoundingClientRect() 获取商品按钮和购物车图标的屏幕坐标；用 element.animate() 或 requestAnimationFrame 更新 transform、scale、opacity；动画结束立刻移除克隆节点和监听器。
- 推荐 keyframes 数组：0% 起点，50% 设最高点（
y偏移 ≈(startY - endY) * 0.3 + startY），100% 终点 - Safari 16.4 以下需降级为手动
requestAnimationFrame更新style.transform - 每个动画都新建一个
fly-img克隆元素，连点多次不清理会导致 DOM 泄漏和卡顿
最易被忽略的是：所有状态变更（禁用、加载、动画、数据更新）必须以 DOM 属性为第一信源，而不是样式类或局部变量。前端购物车逻辑越往后走，越依赖这些细节能否稳住边界条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
