不行，库存数量不能直接写死在HTML里；真实业务中必须从后端动态获取，否则会导致超卖，应通过data-stock属性+JS渲染，并配合轮询或事件更新。
库存数量直接写死在 HTML 里行不行？
不行，但可以临时用——比如静态宣传页、原型演示。真实业务中，库存数量 必须从后端动态获取，否则用户看到的永远是过期数据。浏览器里硬编码 库存：12 看似简单，一旦商品被下单、退款、补货，前端完全不知情，极易超卖。
怎么让 HTML 显示实时库存？关键靠 data 属性 + JS 渲染
最轻量、兼容性最好的做法：后端在生成 HTML 时，把库存值塞进某个元素的 data-stock 属性，前端用 JS 读取并插入到对应位置。不需要框架，原生 JS 就够用。
示例结构：
<div class="product">
<h2>无线耳机</h2>
<span class="stock-display"></span>
<button class="buy-btn">立即购买</button>
</div>
<script>
const el = document.querySelector('.stock-display');
const stock = parseInt(document.querySelector('.product').dataset.stock, 10);
if (!isNaN(stock)) {
el.textContent = `库存：${stock} 件`;
// 库存为 0 时禁用按钮
if (stock === 0) {
document.querySelector('.buy-btn').disabled = true;
el.style.color = '#999';
}
}
</script>
注意点：
-
dataset.stock对应 HTML 中的data-stock="23"，不是data-stock-value - 务必用
parseInt(..., 10)，避免八进制解析（如"010"变成 8） - 后端输出
data-stock值前必须做校验，不能是负数或非数字字符串
库存变化后，HTML 怎么自动更新？
纯 HTML 无法自动更新，必须配合后端接口和前端轮询或事件通知。基础场景推荐轮询，简单可控：
每隔 30 秒调一次 /api/product/123/stock，返回 JSON：{"stock": 7}，然后更新 .stock-display 文本和按钮状态。
轮询要注意：
- 别用太短的间隔（如 2 秒），会压垮后端
- 用户离开页面（
visibilitychange）时暂停轮询，回来再恢复 - 库存归零后，可停止轮询，除非用户点了“到货提醒”
为什么不用 innerHTML 拼接整个商品区块？
因为容易 XSS 和结构失控。如果后端返回的是带 HTML 的库存描述（比如“仅剩 3 件！”），直接插 innerHTML 危险；更稳妥的是只更新文本内容，用 textContent，样式统一由 CSS 控制。
另外，库存字段可能参与计算（比如限购 2 件，当前库存 1 → 提示“限购已满”），这些逻辑放在 JS 里比塞在 HTML 模板里更清晰、易测、好调试。
真正麻烦的从来不是“怎么显示”，而是“什么时候该重新读库存”——比如用户打开页面时、加购成功后、支付失败回退时，这些节点漏掉一个，库存感知就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
