0
239
VistasJquery no está definido cuando se elimina el atributo "text/javascript"
Escenario que funciona:
Tengo un archivo
APP_FRAMEWORK.JSque se generó a través de unWEBPACK, que incluyeBOOTSTRAP AND JQUERYdentro.<script type="text/javascript" src="{{ asset('js/app_framework.js') }}" defer></script> @if(!empty($assets['js'])) @foreach ($assets['js'] as $js) <script type="text/javascript" src="{{ asset($js) }}"></script> @endforeach @endif
Si cargo la página como en el ejemplo, funciona perfectamente, sin ningún error en los scripts que se cargan dentro de ese bucle a continuación.
Mi pregunta:
- ¿Por qué, si elimino el "text/javascript" al cargar el
MAIN SCRIPT (APP_FRAMEWORK.JS)comienza a aparecer el error$ is not defined? - Recordando que este
TYPEya no es obligatorio, los scripts se cargan en el orden correcto y hay unDEFER!!!
1 Respuestas
Responde la pregunta0
Obligar al navegador a no cargar scripts desde el caché ( SHIFT + RELOAD en Mac)
Con solo hacer eso, ya vemos que APP_FRAMEWORK.JSse está cargando después de los demás.Otro punto,
deferno impide que se carguen otros scripts hasta que los que lo tienen definido realicen su proceso. La definición del atributodeferva más allá, siendo:El atributo
deferle dice al navegador que ejecute el script solo cuando finalice el análisis de HTML. El script se solicitará de forma asíncrona, se completará su descarga y, solo cuando finalice el análisis del documento HTML, se ejecutará. Incluso si la descarga del script completo ocurre antes del análisis HTML completo, no se ejecutará hasta más tarde. Si tiene varios elementos de secuencia de comandos con el atributodefer, se solicitarán en paralelo y se ejecutarán en la secuencia indicada.Como los scripts se encuentran en la parte inferior de la página, no es necesario usar
defer, ya que nunca dejará de interpretar el HTML para descargar cualquier JS.El problema en sí no tiene nada que ver con
type="text/javascript", todo está relacionado con el tamaño de los scripts cargados, tiempo de descarga, en vista del orden de dependencia y ejecución.Si realmente necesita seguir un orden de carga de JS,
deferdebe usarse en todos los<script defer>, para que siga la secuencia declarada, por lo tanto:
<script defer src="{{ asset('js/app_framework.js') }}" defer></script> <script defer src="{{ asset('js/app.js') }}"> others ...</script> @if(!empty($assets['js'])) @foreach ($assets['js'] as $js) <script defer src="{{ asset($js) }}"></script> @endforeach @endif 
Enlace de referencia: https://www.braziljs.org/p/diferencas-entre-async-e-defer
Y ahora viene la pregunta que no quiere callar... ¿Por qué, aun cargando los archivos de la caché en el orden correcto, el navegador mostraba el mensaje?
¿Alguien ha oído hablar de error cache del navegador basada en esos archivos? Como, ¿ves que los scripts son los mismos, que la última ejecución de esos scripts dio un error y ya muestra el error automáticamente?