购物车 DOM 为空时应直接检查 document.querySelectorAll('.cart-item').length === 0，优先于等待数据加载；空状态文案需带动作指引，样式须与真实购物车一致；HTML 中写死空状态并用 CSS 控制显隐，确保 JS 关闭时仍可用。
购物车 DOM 为空时怎么判断
直接检查 document.querySelectorAll('.cart-item').length === 0 是最可靠的方式。别依赖“有没有渲染完”这种模糊状态，DOM 节点数为零就是空——哪怕数据还没加载完，只要界面上没 .cart-item 元素，就该显示空提示。
常见错误是等 fetch 完再判断：如果接口失败或超时，用户看到的是空白页面，而不是“购物车还是空的”。应该在初始化阶段就做一次 DOM 检查，再配合 loading 状态做分层反馈。
- 用
document.querySelector('.cart-list')获取容器，再查子元素更稳妥（避免误判其他区域的.cart-item） - 服务端渲染（SSR）场景下，需在
DOMContentLoaded后检查，否则可能拿到未 hydrate 的静态 HTML - Vue/React 项目里，不要在
mounted或useEffect里才首次判断——组件挂载时 DOM 已存在，应立即读取
空状态文案和按钮怎么写才不违和
“购物车为空”太干巴，用户此刻真正需要的是下一步动作。按钮文案必须带动词、有指向，比如 去逛一逛 比 返回首页 更贴合购物路径；继续选购 比 添加商品 更自然——没人会“添加商品”，只会“选中后加进购物车”。
空状态区域要和真实购物车保持一致的容器宽度、内边距、字体大小，否则视觉上像“拼上去的”。别用 position: absolute 单独盖一层，容易遮挡滚动条或被其他绝对定位元素干扰。
立即学习“前端免费学习笔记（深入）”；
- 按钮
href推荐设为/products或带品类参数的路径（如/products?category=hot），别用#或javascript:void(0) - 图标建议用 inline SVG，避免额外 HTTP 请求；尺寸统一设为
24px，和文字行高对齐 - 若支持搜索，空状态下方可加一行小字：
试试搜「耳机」「T恤」？，触发搜索框自动聚焦
怎么让空状态在 JS 关闭时也正常显示
关键不是“兼容无 JS”，而是保证语义结构本身就能表达状态。把空状态 HTML 写死在模板里，用 CSS 控制显隐，而不是靠 JS 插入 DOM。
例如：初始 HTML 中同时存在 .cart-list 和 .cart-empty，默认 .cart-empty { display: block; }，JS 加载后根据实际项数切换 display 值。这样即使 JS 报错或被禁用，用户仍能看到友好提示。
- 用
aria-hidden="true"配合display: none双保险，防止屏幕阅读器读到隐藏内容 - 不要用
opacity: 0或visibility: hidden隐藏空状态——它们仍占布局空间，可能导致底部留白异常 - 服务端若已知购物车为空（如登录态查 Redis 返回空数组），可直接输出
class="cart-empty active"，减少客户端判断
React/Vue 里空状态要不要单独抽成组件
要，但别过度封装。一个 CartEmpty 组件只需接收 onBrowse 回调和可选的 description 字符串，其余样式和结构固化即可。传一堆 props（比如 iconColor、buttonSize）反而增加维护成本。
注意 SSR 和 hydration 一致性：Vue 的 v-if、React 的条件渲染必须和初始 HTML 匹配，否则会出现闪烁或 React 警告 Text content did not match。
- Vue 中用
v-show替代v-if可避免 SSR/hydration 冲突，但仅适用于简单显隐 - React 中若用
useEffect判断空状态，首次渲染必须 fallback 到服务端传递的isCartEmptyprop，不能全靠客户端计算 - 别在空状态组件里发请求——它只负责展示，数据逻辑交给父组件或全局 store
