如何在普通JavaScript脚本中实现顶层await功能？

针对你需要在非模块脚本中实现异步操作后全局执行后续代码的需求，有两种实用方案：

方案1：异步自执行函数（async IIFE） #

通过自执行异步函数包裹逻辑，在await异步操作后直接编写后续代码，几乎等同于全局作用域执行：

(async function() {
  await renderLayout();
  
  // 后续代码直接写在这里，和全局作用域行为一致
  console.log('Done!');
  
  // 若后续代码是动态生成的字符串，可通过eval执行（注意安全风险，仅在代码可控时使用）
  // const dynamicCode = "console.log('Dynamic code executed');";
  // eval(dynamicCode);
})();

function renderLayout(){
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        }, 1000);
    });
}

注意点：

• 用let/const声明的变量会被限制在IIFE作用域内，如需全局访问，可挂载到window对象（如window.globalVar = 'value'）。
• 若动态代码不可控，避免使用eval，优先考虑方案2。

方案2：动态插入脚本标签（推荐用于模板预处理器场景） #

通过异步操作完成后动态创建<script>标签，将后续代码（包括动态生成的代码）注入其中，完全模拟普通脚本的全局执行环境：

function renderLayout(){
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        }, 1000);
    });
}

renderLayout().then(() => {
  const scriptEl = document.createElement('script');
  
  // 将动态生成的代码直接作为文本传入，执行逻辑与普通脚本完全一致
  scriptEl.textContent = `
    console.log('Done!');
    // 这里可以放入模板预处理器生成的任意代码
    const layoutElement = document.getElementById('layout');
    layoutElement.style.display = 'block';
  `;
  
  document.body.appendChild(scriptEl);
});

优势：

• 后续代码完全在全局作用域执行，无函数作用域限制，也不受任何return语句影响。
• 动态生成的代码执行行为与直接写入静态脚本标签的代码完全一致，符合标准执行逻辑，非常适合模板预处理器场景。

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