Supongamos que un bloque de código carga un módulo a pedido como este:

 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); }); }

Imagine que hay algunos de ellos en secuencia; difieren en qué etiqueta/clase buscan, y qué módulo cargan, y quizás algún paso adicional en la inicialización, pero en general son iguales y son independientes.

Ahora suponga que necesita introducir un nuevo bloque que puede depender de otros módulos . Es decir:

1. cargue el módulo magic-table.js si div.magic-table está presente
2. cargue el módulo magic-form.js si div.magic-form está presente
3. cargue el módulo magic-para.js si p.magic está presente
4. cargue el módulo magic-anchor.js si a.magic está presente:
   • pero antes de hacerlo, espera a:
     • forma mágica para cargar e inicializar (si se usa)
     • magic-para para cargar e inicializar (si se usa)

Sé muy poco sobre javascript y prácticamente nada sobre javascript asíncrono, por lo que no tengo idea de cómo se podría hacer esto. Lo que estoy imaginando es algo como:

Antes de cualquiera de los bloques de carga del módulo, cree una matriz llamada promises . Cada vez que se activa un módulo que es una dependencia, crea una promesa que agrega a la lista de promises . Una vez que se completa ese módulo, "activa" la promesa (no tengo idea de cómo se hace esto, pero conceptualmente):

 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(); }) }

Justo antes del módulo que depende de otros módulos opcionales, se hace algo como esto para crear una barrera en la que todos los módulos anteriores deben completar su inicialización:

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

¿Existe algún mecanismo listo para usar para lograr esto en javascript ya? Si no, ¿funcionaría lo que estoy imaginando?

No puedo cargar el módulo dependiente en el then() de otro bloque, porque el bloque dependiente puede depender de varios otros módulos (si se usan).

También: Javascript simple; sin marcos.