创建动态异步屏障

Question

假设代码块按需加载模块，如下所示：

  let tbls = document.querySelectorAll("div.magic-table");
  if(tbls) {
    import('./magic-table.js')
      .then(module => {
        L.magictables = module.magictables;
        tbls.forEach(o => {
          L.magictables.init(o);
        });
      })
      .catch(err => {
        console.error("Unable to load magic-table.js: " + err.message);
      });
  }

想象一下，序列中有几个这样的人；它们在搜索什么标记/类、加载什么模块以及初始化过程中的一些额外步骤方面有所不同，但总体上它们是相同的，并且是独立的。

现在假设您需要引入一个可能依赖于其他模块的新块。i. e.

• 加载模块魔术表。js如果存在div.magic-table
• 加载模块魔法表单。js如果存在div.magic-form
• 加载模块魔术段落。如果p.magic在场，则为js
• 加载模块魔术锚。js如果存在a.magic：
  • 但在执行此操作之前，请等待：
    • 加载和初始化的魔法表单（如果使用）
    • 加载和初始化的magic para（如果使用）

    我对javascript知之甚少，对异步javascript几乎一无所知，所以我不知道如何做到这一点。我想象的是这样的：

    在任何模块加载块之前，创建一个名为promises的数组。每次激活作为依赖项的模块时，它都会创建一个promise，并将其添加到promise列表中。一旦该模块完成，它就会“触发”promise（我不知道如何做到这一点，但在概念上）：

      let tbls = document.querySelectorAll("div.magic-table");
      if(tbls) {
        let promise = new MyMagicPromise();
        promises.push(promise);
        import('./magic-table.js')
          .then(module => {
            L.magictables = module.magictables;
            tbls.forEach(o => {
              L.magictables.init(o);
            });
            promise.trigger();
          })
      }
    

    就在依赖于其他可选模块的模块之前，这样做是为了创建一个屏障，所有之前的模块都必须完成初始化：

    promises.forEach(p => {
       await p;
    });
    

    是否已经有一些现成的机制可以在javascript中实现这一点？如果不是的话，我的想象会起作用吗？

    我无法将依赖模块加载到另一个块的then（），因为依赖块可能依赖于多个其他模块（如果使用）。

    还有：纯javascript；没有框架。

Answer 1

我真的不明白你。。。但我想我知道你想要什么。您使外部函数异步

(async () => {

let module1 = (await import("...")).default

let module2 = (await import("...")).default



})()

这实际上是使用async按顺序导入模块的基本方法