Si tengo lo siguiente:
<script type="module" src="one.js"></script> <script type="module" src="two.js"></script> <script type="module" src="three.js"></script>three.js se ejecutará DESPUÉS one.js y two.js ?Sin embargo, si tengo:
<script type="module"> import 'one.js' import 'two.js' import 'three.js' </script>three.js se ejecutará DESPUÉS one.js y two.js ? (esto es importante)Sé que parece una pregunta duplicada, pero tenga en cuenta que el objetivo de esta pregunta es confirmar el comportamiento muy diferente de importar a través de HTML y JavaScript.
¿Tengo razón al decir que no puede estar 100% seguro de que three.js se ejecutará DESPUÉS de one.js y two.js?
Sí, porque, por ejemplo, es posible que three.js ya se haya importado en one.js, y los módulos se evalúan solo una vez.
¿Tengo razón al decir que puedo estar seguro de que three.js se ejecutará DESPUÉS de one.js y two.js? (esto es importante)
No, por la misma razón que la anterior.
En ambas formas de importar un módulo, si ninguno de los módulos se ha importado previamente, se evaluarán en el mismo orden en que aparecen en el marcado o código.
En la especificación de ECMAScript, consulte el método ModuleE Evaluation que itera a través de RequestedModules de un registro de módulo de texto de origen:
Una lista de todas las cadenas de ModuleSpecifier utilizadas por el módulo representado por este registro para solicitar la importación de un módulo. La lista es una ocurrencia de código fuente ordenada.
Al importar un módulo utilizando una etiqueta de secuencia de comandos con el atributo src, si el orden de evaluación no es importante, se puede utilizar el atributo async para ejecutarlo tan pronto como se descargue.
En general, si todos los módulos no tienen importaciones mutuas, en ambos casos los módulos se ejecutan en las mismas órdenes.
En el primer caso, el module de tipo funciona como un script defer . El código se ejecuta en el orden correcto después de cargar DOM. Dijo en la documentación de defer https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer (amarillo el cuadro y el siguiente párrafo).
En el segundo caso, las importaciones, como es de esperar, se ejecutan en el orden en que se definen en el archivo.
No, no se garantiza que se ejecute en el mismo orden. Depende de todos los demás archivos e importaciones.
Los módulos de Es6 se evalúan solo una vez. Significa que una declaración de importación no significa una evaluación. Cuando se ejecuta el primer módulo host (módulo que importa Òne.js o Two.js ), se evalúan los módulos importados. Y se proporcionará la misma instancia para futuras importaciones.
Digamos A.js importa Two.js y se ejecuta primero y B.js se ejecuta después y B.js importa tanto One.js como Two.js (suponiendo que solo estos dos archivos importen estos módulos). luego, con el tiempo B.js se ejecuta Two.js ya evaluado, pero One.js debe evaluarse ahora.
https://262.ecma-international.org/6.0/#sec-hostresolveimportedmodule