Quiero llamar a una función del módulo importado cuando se representa DOM. Lo que me hace dudar de la seguridad de esto es el hecho de que los archivos del módulo se recuperan de forma asíncrona. Por lo tanto, mi preocupación es: ¿es posible que se obtenga el archivo del módulo requerido después de que el documento esté listo?
import someModule from '../someModule.js' $( document ).ready(function() { someModule.hello(); });¿Es seguro este código?
Ese código es seguro.
Si estaba usando DOMContentLoaded y no $(document).ready , puede ser algo de qué preocuparse. Los módulos se cargan de forma asíncrona y todo lo que importa un módulo en sí mismo se carga antes de que se ejecute el cuerpo del módulo. Eso es:
import someModule from '../someModule.js' primero se resolverá a un valor de la exportación someModule , y solo entonces se ejecutará el resto del módulo:
$( document ).ready(function() { someModule.hello(); });Es posible que el resto del documento haya terminado de cargarse en ese momento, especialmente si hay más cadenas de importación más arriba en el árbol de dependencias y el código fuente HTML es corto.
Pero $(document).ready no solo ejecutará su devolución de llamada cuando el documento esté listo, sino que también ejecutará su devolución de llamada si el documento ya está listo, lo que se puede verificar con document.readyState .
Ejemplo:
setTimeout(() => { // the document will have been fully loaded for ages now, // but the callback will still run: $(() => { console.log('running'); }); }, 5000); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Si estuviera usando DOMContentLoaded en su lugar, para estar seguro, necesitaría usar
if (document.readyState === 'complete') { someModule.hello(); } else { window.addEventListener('DOMContentLoaded', () => someModule.hello()); } También tenga en cuenta que en jQuery, la forma moderna preferida de programar una devolución de llamada cuando el documento está listo es simplemente pasar la devolución de llamada a $ :
$(() => { someModule.hello(); });