DOMContentLoaded 永远不会在模块内触发

Question

我对在特定 ES6 模块加载场景中未触发的事件感到困惑。这是一个支持我的示例的 Codepen 项目： https://codepen.io/fchristant/project/editor/AYQkGJ

考虑这个非常简单的模块app.js：

console.log('in module');
document.addEventListener('DOMContentLoaded', (event) => {
  console.log('DCL:2');
});

我正在使用来自文档头部脚本标签的动态 ES6 导入：

<script>
  (async () => {
    const module = await import("./js/app.js");
    console.log('async done');
   })();
</script>

所以，这个调用代码是一个非模块（同步脚本）动态加载一个模块。因为它在文档的头部而不是异步或延迟，所以我希望它立即运行，并以阻塞的方式运行。

这是我的期望，但不是正在发生的事情。特别是，问题是模块中的事件永远不会被触发。看起来是因为来不及听了，事件已经发生了。鉴于文档头部的阻止脚本，这怎么可能？它看起来是非阻塞的，但我不明白为什么。

要清楚，讨论不是这是否是一个好主意，我最感兴趣的是为什么这不起作用的概念性答案。或者换个说法：非模块脚本如何以同步方式动态加载模块？

Answer 1

等待domcontentloaded 事件在您的index.html 文件中发生。在事件的回调中导入您想要在事件触发时运行的模块。

// app.js
export function start() {
  console.log('in module');
  console.log('DCL:2');
}

<!-- index.html -->
<script>
  (async () => {
    document.addEventListener('DOMContentLoaded', (event) => {
      const module = await import("./js/app.js");
      module.start();
      console.log('async done');
    });
  })();
</script>

或者，如果您不需要任何模块，并且只想在渲染 DOM 之前依次加载所有内容，则只需使用传统的阻止渲染的 <script> 标签。

<script src="./js/app.js"></script>
<script>
  console.log('module loaded');
</script>

Answer 2

您可以使用辅助函数检查document.readyState，然后检查addEventListener 或立即运行代码。

• onDCL1() 可以与回调 fn (A.1) 一起使用
• onDCL2() 基于 Promise
  • …传统的.then()链（B.1）
  • ... 或 await (C.1)

我们可以“伪造”并发送我们自己的DOMContentLoaded 事件并验证else 块是否有效（A.2.、B.2.、C.2.）

class App {
  static onDCL1(callback) {
    if (document.readyState !== 'loading')
      callback(`onDCL1 ➜ readyState: '${document.readyState}'`);
    else
      document.addEventListener('DOMContentLoaded',
        e => callback(`onDCL1 ➜ ... waited readyState: '${document.readyState}'`));
  }

  static onDCL2() {
    return new Promise(resolve => {
      if (document.readyState !== 'loading')
        resolve(`onDCL2 ➜ readyState: '${document.readyState}'`);
      else
        document.addEventListener('DOMContentLoaded',
          e => resolve(`onDCL2 ➜ ... waited readyState: '${document.readyState}'`));
    });
  }
}

(async() => {
  console.log(`readyState: '${document.readyState}'`);

  // A.1
  App.onDCL1(payload => console.log(`A.1.| ${payload}`)); // run callback
  // B.1
  App.onDCL2().then(payload => console.log(`B.1.| ${payload}`)); // Promise chain
  // C.1
  let payload = await App.onDCL2(); // await  for Promise. Hint: no 'async' required, since we already return a Promise
  console.log(`C.1.| ${payload}`);


  // have to wait for C.1. (`await`) ....
  // ... comment 2 lines of "C.1" will show 'END' bevor Promise B.1. gets resolved async (~1ms)
  console.log('END 1');

  setTimeout(async() => {
    // dispatch "fake" event in 100ms, (we need to addEventListeners first
    // ... since C.2 has `await` we do this here
    setTimeout(() => {
      window.document.dispatchEvent(new Event("DOMContentLoaded", {
        bubbles: true,
        cancelable: true
      }));
    }, 100);

    // A.2
    App.onDCL1(payload => console.log(`A.2.| ${payload}`)); // run callback
    // B.2
    App.onDCL2().then(payload => console.log(`B.2.| ${payload}`)); // Promise chain
    // C.2
    let payload = await App.onDCL2(); // await  for Promise
    console.log(`C.2.| ${payload}`);

    console.log('END 2');
  }, 300);
})();