AngularJS的ng-cloak指令在jQuery/JavaScript中的等效替代方案是什么

ng-cloak的核心作用是在页面JS完成DOM渲染、数据绑定前，隐藏未编译的模板片段，避免用户看到原始模板表达式、未填充数据的空DOM结构，消除内容加载闪烁，本身没有复杂逻辑，通过少量CSS+JS即可完全复现等效能力。

第一步：添加前置隐藏样式 #

首先需要在页面<head>标签内加入如下内联CSS，确保在JS资源加载、解析完成前，需要 cloak 的元素默认处于隐藏状态：

[ng-cloak], .ng-cloak {
  display: none !important;
}

注意：这段样式不要放在外部CSS文件中引入，必须作为内联样式放在head最前部，否则外部CSS加载过程中还是会出现短暂的内容闪烁。

如果想要更平滑的显示体验，可以替换为带过渡的透明度过渡方案，避免元素显示生硬：

[ng-cloak], .ng-cloak {
  opacity: 0 !important;
  transition: opacity 0.2s ease;
}

第二步：编写移除cloak的JS逻辑 #

核心逻辑非常简单：等你所有DOM渲染、数据绑定操作全部执行完成后，移除对应元素上的ng-cloak属性或类名，元素就会自动显示，和AngularJS编译完成后移除cloak的逻辑完全一致。

原生JavaScript实现 #

/**
 * 移除所有cloak标记，显示渲染完成的内容
 */
function removeNgCloak() {
  const cloakNodes = document.querySelectorAll('[ng-cloak], .ng-cloak');
  cloakNodes.forEach(node => {
    // 用属性标记的场景用这行
    node.removeAttribute('ng-cloak');
    // 用类名标记的场景用这行
    // node.classList.remove('ng-cloak');
  });
}

// 场景1：所有内容在DOM加载完成后就同步渲染完成
document.addEventListener('DOMContentLoaded', () => {
  // 此处执行你所有的模板渲染、数据绑定逻辑
  // renderPageTemplates();
  // 全部渲染完成后移除cloak
  removeNgCloak();
});

// 场景2：存在异步拉取数据再渲染的逻辑，就在所有异步请求返回、DOM更新完毕后，手动调用removeNgCloak()即可

jQuery实现 #

/**
 * 移除所有cloak标记，显示渲染完成的内容
 */
function removeNgCloak() {
  const $cloakNodes = $('[ng-cloak], .ng-cloak');
  // 用属性标记的场景用这行
  $cloakNodes.removeAttr('ng-cloak');
  // 用类名标记的场景用这行
  // $cloakNodes.removeClass('ng-cloak');
}

// 场景1：所有内容在DOM加载完成后就同步渲染完成
$(function() {
  // 此处执行你所有的模板渲染、数据绑定逻辑
  // renderPageTemplates();
  // 全部渲染完成后移除cloak
  removeNgCloak();
});

// 场景2：存在异步拉取数据、懒加载模块渲染的逻辑，就在对应渲染流程全部完成后，手动调用removeNgCloak()即可

使用注意事项 #

• 不需要全局统一移除cloak：对于懒加载模块、分步渲染的组件，可以单独给对应模块加ng-cloak标记，等该模块渲染完成后单独移除它的cloak标记即可，不需要等全页面所有资源加载完成
• 不要在带ng-cloak的元素上写行内display样式，会被CSS的!important规则覆盖，导致cloak隐藏失效
• 不建议直接把ng-cloak加在<body>根节点上，建议按独立渲染模块拆分添加，避免静态非动态内容也被长时间隐藏，拉长首屏白屏时间

内容的提问来源于stack exchange，提问作者UserRA