1

Hola Reformulo la pregunta como me lo solicitaron, ademas con un ejemplo el código utilizado:

html principal: index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>
        <h1 id="mensaje1">mensaje desde: {{ mensaje }}</h1>
    </div>
    <br>
    <div w3-include-html="template1.html"></div>
    
<script type="text/javascript" src="https://www.w3schools.com/lib/w3data.js"></script> 
<script> w3IncludeHTML();</script>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="mivue.js"></script>

</body>

</html>

template1.html

<h1 id="mensaje2">mensaje desde: {{ mensaje }}</h1>
<br>
<div w3-include-html="template2.html"></div>

template2.html

<h1 id="mensaje3">mensaje desde: {{ mensaje }}</h1>

mi javascript: mivue.js

new Vue({
  el: '#mensaje1',
  data: {
    mensaje: 'index.html'
  }
});
new Vue({
  el: '#mensaje2',
  data: {
    mensaje: 'templete1'
  }
});
new Vue({
  el: '#mensaje3',
  data: {
    mensaje: 'template2'
  }
});

en este pequeño ejemplo las librerías js son llamadas desde sus CDN y funcionan correctamente pero luego de sustituir estos mismos archivos por sus archivos locales .js deja de funcionar la pagina, para descartar hago el reverso y funciona, es decir, que vuelvo a poner el CDN y quito los archivos locales y vuelve a funcionar correctamente.

Alguien sabrá que tengo que hacer para regularizar este error?? que otra herramientas puedo utilizar para revisar la ejecución de los archivos JS, algo así como un paso a paso como existe en VBA??

revisando como se ejecuta los archivos js con el CDN obtengo esto donde si funciona:

Funciona

revisando como se ejecuta los archivos js sin el CDN obtengo esto donde no funciona:

introducir la descripción de la imagen aquí

pareciera que el error esta en el tiempo de carga de los archivos, pero no entiendo que tiene que ver si los archivos se están ejecutando en el mismo orden que están en la pagina html.

muchas gracias por la ayuda que puedan brindarme.

saludos,

7
  • Podrías comentar tu código seria mas fácil ayudarte.
    – simon
    el 13 mar. 2017 a las 1:14
  • Hola. En vez de imágenes, fragmentos del código y la url del cdn que usas serían más útiles. En este caso las imágenes sobra. Si es posible edita la pregunta poniendo algo del código y quitando las imágenes.
    – A. Cedano
    el 13 mar. 2017 a las 1:29
  • Muéstranos cómo tienes dispuesta la carga de esos archivos en tu header o donde sea que los llamas en tu documento. Revisa también si las versiones de jQuery son iguales
    – ffflabs
    el 13 mar. 2017 a las 11:10
  • hola @gilberto-quintero, muchas gracias por su interés, reformule la pregunta para hacerme entender y agregue un ejemplo para que puedan ayudarme y hacer pruebas, este ejemplo funciona perfectamente pero una vez que sustituyes los CDN por archivos locales deja de funcionar. Donde esta el error?? el 13 mar. 2017 a las 12:11
  • hola @a-cedano muchas gracias por su interés, reformule la pregunta para hacerme entender y agregue un ejemplo para que puedan ayudarme y hacer pruebas, este ejemplo funciona perfectamente pero una vez que sustituyes los CDN por archivos locales deja de funcionar. Donde esta el error?? el 13 mar. 2017 a las 12:12

2 respuestas 2

1

Efectivamente a Javascript no es que le importe mucho el orden de los archivos, sino cuánto tarda en interpretar cada uno de los scripts que mandes.

Si estás utilizando jQuery, te recomiendo que englobes todas tus funciones dentro de .ready:

$(document).ready(function(){
    ...
});

Esta se asegura que todos los archivos estén completamente cargados antes de ejecutar lo que tiene en su interior.

EDIT

A lo que me refiero es que tu script final puedes englobarlo en jQuery esperando a que termine de cargarse el DOM:

$(document).ready(function(){
    new Vue({
      el: '#mensaje1',
      data: {
        mensaje: 'index.html'
      }
    });
    ...
}

Sin embargo, como mencionan en este post (en inglés), puedes prescindir del jQuery y esperar al evento DOMContentLoaded de la siguiente manera:

if (document.addEventListener) { // Para Firefox y Chrome
    document.addEventListener("DOMContentLoaded", function(){
        new Vue({
          el: '#mensaje1',
          data: {
            mensaje: 'index.html'
          }
        });
        ...
    });
} else if (document.attachEvent) { // Para Internet Explorer
    document.attachEvent("onreadystatechange", function(){
        new Vue({
          el: '#mensaje1',
          data: {
            mensaje: 'index.html'
          }
        });
        ...
    });
}

Otra alternativa es que utilices las mismas funciones para esperar a llamar tu script mivue.js, solo tienes que hacer esto en la sección de scripts de tu html:

<script type="text/javascript">
    // En resumen
    document.addEventListener("DOMContentLoaded", function(){
        document.write('<script src="mivue.js"><\/script>'); // Con esta línea mandas llamar el script solo hasta que el resto del contenido se ha cargado.
    });
</script>
4
  • 2
    Hola @kroneaux-schneider gracias por responder, pero no tengo idea de como hacer lo que me indicas, es que soy un poco nuevo en esto y me gustaría que me orientes como hago para ingresar en el código .ready las siguientes librerías: - unpkg.com/vue - w3schools.com/lib/w3data.js - cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js - y un par de archivos js personales NOTA: estos CDN yo los descargo como archivos js, en si la ayuda seria como ejecuto los archivos: - vue.js - w3.js - jquery.js - miarchivo1.js - miarchivo2.js saludos y muchas gracias. el 13 mar. 2017 a las 10:51
  • Hola @kroneaux-schneider reformule la pregunta y agregue un ejemplo, para ver si con esta informacion me ayudas arreglar este error. saludos. el 13 mar. 2017 a las 12:14
  • @MiguelArias he actualizado mi respuesta. el 14 mar. 2017 a las 16:12
  • hola @kroneaux-schneider, gracias por responder, pero al aplicar la solución planteada al ejemplo no me funciona, creo q la solución seria q los archivos carguen antes del DOM y no después, como puedo hacer eso? tengo todo el día realizando pruebas y me doy cuenta que si uno de los archivos carga después del DOM da error y si carga antes corre bien, uso MAMP como Localhost y funciona a medias y me descargue "Web Server for Chrome" y no he tenido ese problema, realmente busco es una solución para todos los casos no puedo depender del tiempo de carga. avísame que otra cosa puedo hacer. gracias! el 15 mar. 2017 a las 0:16
0

Si tienes librerías donde cada una depende de la anterior, tienes un problema de sincronización. Ahora mismo imagino, dos posibles soluciones:

  1. Usando carga dinámica de scripts.
  2. Usando los atributos defer en cada script.

Cargando dinámicamente scripts

Esta opción es bastante práctica; la idea es la siguiente:

En cuanto termine de cargar una librería, hacer que se notifique para proceder con la siguiente.

Para lograr esto basta con crear un script:

function loadJS({ id, url }) {
  return new Promise((resolve) => {
    // verificas que no esté cargada
    if (!isAlreadyJSLoaded(id)) {
      let script = document.createElement('script');
      document.body.appendChild(script);

      script.id = id;
      script.defer = true;
      script.onload = () => resolve();
      script.src = url;
    }
  })
}

function removeJS(id, cb) {
  // verificas que esté cargada
  if (isAlreadyJSLoaded(id)) {
    let script = document.getElementById(id);
    document.body.removeChild(script);

    if (cb) { cb(); }
  }
}

function isAlreadyJSLoaded(id) {
  let scripts = document.body.querySelectorAll('script');
  return [].filter.call(scripts, s => s.id === id).length === 1;
}

El script anterior agrega y elimina un script. El modo de uso es muy sencillo:

loadJS('vue', '/js/vue.min.js')
  .then(() => {
    loadJS('w3data', '/js/w3data.js')
      then(() => {
        ... y todas las necesarias
      });

Ventajas

  • Permite adición y eliminación de scripts en demanda.
  • Optimiza el uso de ancho de banda

Cargado asíncrono de scripts vía defer

Esta manera es mucho más sencilla y directa. Basta con añadir el atributo defer a los scripts:

<script defer src="/js/vue.min.js"></script>
<script defer src="/js/w3data.js"></script>
<script defer src="/js/jquery.min.js"></script>
<script defer src="/js/mivue.js"></script>

¿Qué hace defer?

El atributo defer realiza una carga de scripts asíncrona pero respetando el orden en el que se definen los scripts en el documento HTML; es decir, se descargan todos en paralelo pero se ejecutan secuencialmente.

De esta manera, siempre te aseguras que los recursos sean cargados de manera asíncrona pero respetando el orden en el que los defines. Luego, te basta con window.onload para realizar el resto de tus actividades.

Ventajas

  • Funciona out-of-the-box, es decir, no tienes que hacer nada más.
3
  • hola @gustavo-garcía muchas gracias por responder, esta excelente tu explicación, pero cuando trato de aplicarlo a mi ejemplo no funciona, ya había probado la opción de defer y nada; en cuanto al código me da error el la linea 11 donde es la url no esta definida, el procedimiento que aplique fue eliminar todas los script del html y los sustituí por un único archivo que lo llame load.js luego dentro coloque tu código y al final de este coloque el loadJS donde especifico los archivos a cargar y no me funciono, no se si estoy haciendo algo mal. avísame si es correcto el procedimiento, gracias! el 14 mar. 2017 a las 23:30
  • @MiguelArias Hazme un favor y pégame el código que tienes en pastebin.
    – gugadev
    el 14 mar. 2017 a las 23:36
  • hola @gustavo-garcía me di de alta en pastebin pero no puedo pegar la carpeta con el mismo ejemplo que coloque aquí, solo usuarios con cuenta pro pueden hacerlo, y no vi la necesidad de repetir el código que ya esta aquí, no se si hay otra forma? por favor avísame y con gusto lo inserto donde tu digas. Mi pregunta esta compuesta por un archivo raíz donde están todos los html (index, template1 y 2) y una sub carpeta (js) donde coloco las librerías descargadas y creadas por mi; mas arriba coloco que contiene cada cosa. muchas gracias por tu interés y espero que puedas ayudarme. saludos. el 15 mar. 2017 a las 1:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.