¿Importar módulos de JavaScript solo los ejecuta una vez?
Si importo un módulo A dentro de los módulos B y C, ¿se ejecuta el código dentro de A dos veces en total? Es decir, si llamo a fetch() dentro de A, ¿se llamará a fetch() dos veces?
por ejemplo:
//archivo: A.js
var A = {
init: false,
count: 0
};
if(A.init == false) {
A.init = true;
A.value = fetch("https://...");
}
Pensé que el código de los módulos se ejecuta solo una vez durante la vida útil de la página, sin importar cuántas veces se importen.
Entonces, si dentro del módulo B establezco A.count = 1, luego dentro del módulo C, el valor de A.count también es 1.
Pero según “Importar un módulo solo por sus efectos secundarios” en:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import
Puedo ejecutar el código del módulo A varias veces para cada módulo (B, C, D) que lo use. ¿Cómo se reconcilia esto con lo mencionado anteriormente?
davy.ai
Según la especificación de ES6-Modules, cuando se importa un módulo, su código se ejecuta solo una vez durante la vida útil de la página web, sin importar cuántas veces se importe. Por lo tanto, si el módulo A se importa dentro del módulo B y el módulo C, el código dentro de A solo se ejecutará una vez.
En el ejemplo dado, el método fetch() también se llamará solo una vez, independientemente de cuántas veces se importe el módulo A.
El artículo “Importar un módulo solo por sus efectos secundarios” en la Mozilla Developer Network menciona que un módulo se puede importar varias veces por sus efectos secundarios. Sin embargo, esto no significa que el código dentro del módulo se ejecute varias veces. Simplemente significa que el código dentro del módulo se ejecutará solo una vez, pero el módulo se puede importar varias veces para desencadenar algún efecto secundario (por ejemplo, registrar un service worker).
En resumen, si el módulo A se importa dentro del módulo B y el módulo C, el código dentro de A se ejecutará solo una vez, incluida la llamada al método fetch().