Tengo page1.html que usa blah.js. Una de las cosas que hace blah.js es ejecutar una función 1() cuando se carga la página. Me gustaría usar function2() de blah.js en page2.html sin blah.js ejecutando function1(). Pensé que podría agregar
export {function2}a blah.js y luego simplemente importe function2() agregando
<script type = "module"> import { function2 } from './blah.js' </script>a página2.html. Pero esto parece tener la misma funcionalidad que si hubiera importado el archivo normalmente:
<script defer src="blah.js"></script>es decir, function1() se ejecuta en la página 2 en ambos casos. ¿Cómo puedo obtener acceso a function2() sin ejecutar las otras partes de blah.js?
Si importa desde un módulo, se ejecutará todo el código de nivel superior de ese módulo. Es decir, dado
console.log('running'); export const foo = 5; No hay forma de importar foo sin registrar también el texto.
Un buen enfoque para este problema (y una muy buena práctica en general) es evitar los efectos secundarios en el nivel superior de los módulos. Si tiene algo que es un efecto secundario, colóquelo en una función y exporte esa función, de modo que solo se ejecute bajo demanda, en lugar de cada vez que se importe algo del archivo.
Entonces, probablemente quieras cambiar tu archivo a algo como:
export const runFunction1WhenPageLoads = () => { const fnToRun = () => { // insert code here }; if (document.readyState === 'complete') { fnToRun(); } else { window.addEventListener('DOMContentLoaded', fnToRun); } }; export const function2 = () => { // insert code here };