本文介绍如何在嵌套 dom 结构中安全、独立地管理多个层级的 loading 状态，避免样式冲突与逻辑覆盖，通过唯一标识（`loading` 属性）实现精准控制。
在 Web 应用中，常需对不同区域（如主容器、子模块、弹窗、上传组件等）独立展示 loading 状态。但当多个 loading 共存于嵌套结构中（例如 #upload 在 #main 内部），若仅依赖 CSS 类名（如 .webAppModal__loading）进行查找与操作，极易因 querySelector 返回首个匹配项而造成误显/误隐——即点击“上传 loading”时，可能意外激活了父级的 loading 层。
原方案的问题根源在于：
- showLoading() 仅根据传入的选择器查找 .webAppModal__loading，未区分作用域；
- 子元素中的 loading 被父元素的 .webAppModal__loading 查询逻辑“捕获”，导致层级错乱；
- 缺乏唯一性标识，无法保证每个 loading 实例与其触发目标严格绑定。
✅ 解决方案：引入语义化唯一标识 loading 属性
不再依赖类名定位，而是为每个 loading 容器添加自定义属性 loading="xxx"（如 loading="main"、loading="upload"），并在 JS 中通过属性选择器精准定位：
// 查找指定 name 的 loading 元素（全局唯一）
$(`[loading="${name}"]`).get()[0]该方式天然支持嵌套结构：即使 #upload 内部存在 loading，其 loading="upload" 属性也确保它不会被 loading="main" 的操作影响。
以下是优化后的核心逻辑（含完整可运行示例）：
<script>
function fadeIn(el, duration = 300) {
$(el).fadeIn(duration);
}
function showLoading(name, element, time = 450) {
// 1. 优先尝试复用已存在的同名 loading
const existing = document.querySelector(`[loading="${name}"]`);
if (existing) {
fadeIn(existing, time);
return;
}
// 2. 否则创建新 loading 并挂载到目标元素
const $target = typeof element === 'string'
? document.querySelector(element)
: element;
const loadingDiv = document.createElement('div');
const img = document.createElement('img');
img.src = 'https://minecart.com.br/assets/img/loading.gif';
loadingDiv.setAttribute('loading', name); // ✅ 关键：唯一作用域标识
loadingDiv.className = 'webApp-shopDefaultModalLoading webAppModal__loading';
loadingDiv.appendChild(img);
$target.appendChild(loadingDiv);
fadeIn(loadingDiv, time);
}
</script>? 关键实践建议：
- 命名规范：name 应语义清晰且全局唯一（推荐使用 kebab-case，如 "user-profile-edit"）；
- 销毁机制（补充增强）：实际项目中建议配套 hideLoading(name) 方法，通过 document.querySelector([loading="${name}"]).fadeOut() 隐藏，并在动画结束后 remove() 释放内存；
- CSS 隔离：当前样式已使用 position: absolute + z-index 保障层叠顺序，但若需更高隔离性，可为不同 loading 添加 scoped class（如 .loading-main, .loading-upload）并配合属性选择器细化样式；
- 无障碍友好：为 loading 容器添加 role="status" 和 aria-live="polite"，提升屏幕阅读器体验。
通过赋予每个 loading 明确的业务上下文标识（而非仅依赖 DOM 位置或类名），我们实现了真正解耦、可预测、可维护的动态加载管理——无论元素嵌套多深，都能精准响应、互不干扰。
