库存低于阈值时通过javascript读取data-stock和data-threshold属性，转数字后比对，用classlist切换.stock-low等css类实现可维护预警，封装checkstockwarning函数并在库存变更后调用，兼顾nan兜底与事件委托防重复绑定。
库存数值低于阈值时如何触发前端预警
直接在 HTML 页面里做库存预警，核心不是“显示”，而是“判断+响应”。HTML 本身不执行逻辑，得靠 JavaScript 拿到 data-stock 或 value 这类属性值，再比对预设的警戒线（比如 5 或 0）。常见错误是把预警逻辑写死在 innerHTML 里，结果库存变了页面不更新。
实操建议：
- 给商品元素加语义化属性，例如：
<div class="product" data-sku="A102" data-stock="3"> <li>用 <code>document.querySelectorAll('[data-stock]')批量获取，避免逐个写 ID - 阈值别硬编码进 JS，改起来太麻烦，建议从
data-threshold="5"动态读取 - 注意字符串转数字：
parseInt(el.dataset.stock, 10)，否则"10" 会返回 true - 定义清晰的类名，比如
.stock-low和.stock-out，分别对应“不足”和“缺货” - 用
el.classList.toggle('stock-low', stock 控制开关，比 if/else 更简洁 - 在 CSS 中用
::after伪元素加警示图标，不用额外 DOM 节点 - 如果要兼容老浏览器（IE11），避开
toggle(className, boolean)的第二个参数，改用add()/remove() - 把预警检查封装成独立函数，例如
checkStockWarning()，哪里需要就调它 - 在 AJAX 更新库存后（比如调完
updateStock()），立刻调用checkStockWarning() - 用事件委托代替为每个按钮单独绑定：监听
body上的click，再用event.target.matches('.btn-decrease')判断来源 - 别在循环里反复查 DOM，先
const stockEls = document.querySelectorAll('[data-stock]')存起来复用 - 用
Number(el.dataset.stock)替代parseInt，它对空字符串和null返回0，更符合业务直觉（没数据=没货） - 加一层兜底判断：
const stock = Number(el.dataset.stock) || 0 - 开发期用
console.warn输出异常值：if (isNaN(stock)) console.warn('Invalid stock value:', el.dataset.stock) - 如果后端可能返回字符串如
"out_of_stock"，提前正则过滤：el.dataset.stock.replace(/\D/g, '')
用 CSS 类控制预警样式而非内联 style
很多人一着急就用 el.style.color = 'red'，但这样后续想统一改红字成橙底白字、加图标、加动画，就得翻遍 JS 找所有 style 赋值。真正可维护的做法是切换 CSS 类名。
实操建议：
库存变化后如何避免重复绑定或漏更新
页面加载完跑一次预警检查很常见，但用户点击“加购”“减库存”按钮后，库存变了却没重新校验，预警就失效了。更糟的是，每次点击都重新绑定事件监听器，导致同一操作触发多次预警逻辑。
实操建议：
服务端返回库存为 null 或非数字时怎么防崩
前端拿到 data-stock="null" 或空字符串甚至 "--"，parseInt("null", 10) 会返回 NaN，接着 NaN 是 <code>false，表面看不报错，其实预警逻辑彻底失效，而且很难排查。
实操建议：
真正难的不是让“库存 2”变红，而是当库存从 6→3→0→重新上架→6，整个链路里每一步变化都能被准确捕获、样式即时同步、且不因异常值或重复操作失灵。这些细节堆在一起，才构成一个不骗人的预警。
