用html+js实现“经常一起买”需js动态注入推荐数据，优先采用内联json或轻量api获取关联关系；fetch失败时用abortcontroller设超时并降级至fallback列表；渲染用语义化标签和批量dom操作提升性能与体验。
怎么用 HTML + 简单 JS 实现“经常一起买”推荐模块
纯 HTML 无法实现“经常一起买”逻辑，必须配合 JavaScript（哪怕只是模拟）和少量数据支撑。浏览器端不连后端时，推荐只能基于预设规则或本地行为模拟，比如：用户加购 商品A 后，自动展示曾被共同加购的 商品B 和 商品C —— 这需要你提前准备好关联关系。
推荐数据从哪来：别硬写死在 HTML 里
常见错误是把推荐商品直接写进 <div class="also-bought"> 里，导致每次改商品都要改 HTML。应该用 JS 动态注入，数据源优先考虑：
<ul>
<li>内联 JSON：在页面底部放一个 <code><script type="application/json" id="co-purchase-data"></script>，内容如 {"item-101": ["item-205", "item-318"]}
/api/co-buy?sku=item-101 的接口，前端 fetch 即可（注意 CORS 和缓存）不建议用 data- 属性存整组推荐，既难维护又影响 HTML 可读性。
fetch() 请求失败时怎么兜底
网络抖动或接口超时会导致推荐区空白，用户会觉得功能“坏了”。必须设置降级策略：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 加
timeout控制：用AbortController限制请求不超过 1.5 秒 - fallback 列表：在 JS 里内置一个默认推荐数组，比如
const fallback = ["item-999", "item-888"]，请求 reject 后直接渲染它 - 避免空状态：DOM 插入前检查数据长度，
if (recs.length === 0) return;，否则留白比乱填更可信
别依赖 catch() 之后只打 console，用户看不见日志。
渲染时注意 DOM 性能和语义化
“经常一起买”通常是横向滚动卡片流，容易误用 <div> 堆砌。正确做法：
<ul>
<li>用 <code><section aria-label="经常一起买的商品"></section> 包裹，提升无障碍体验
<article></article> 或带 role="group" 的 <div>，每张卡含图片、标题、价格、加购按钮
<li>避免每次重新 innerHTML 整个区域：先清空容器，再用 <code>document.createElement() 批量创建节点，最后 append() —— 比字符串拼接快且安全overflow-x: auto：iOS Safari 对 touch 滚动支持不稳定，建议加 -webkit-overflow-scrolling: touch
真实场景中，“一起买”可能涉及库存状态、价格变动、促销角标，这些字段必须随推荐数据一起返回，不能靠前端临时拼接。
