cargando archivos js y otros archivos dependientes js de forma asíncrona

Question

Estoy buscando una manera limpia de cargar asincrónicamente los siguientes tipos de archivos javascript: un archivo js "core" (hmm, vamos a llamarlo, oh no lo sé , "jquery!" jaja), x cantidad de archivos js que dependen del archivo "core" js que se está cargando, y número y de otros archivos js no relacionados. Tengo algunas ideas de cómo hacerlo, pero no estoy seguro de cuál es la mejor manera. Me gustaría evitar cargar guiones en el cuerpo del documento.

Así, por ejemplo, quiero los siguientes 4 archivos javascript para cargar de forma asíncrona, apropiado nombre:

/js/my-contact-page-js-functions.js // unrelated/independent script 
/js/jquery-1.3.2.min.js // the "core" script 
/js/jquery.color.min.js // dependent on jquery being loaded 
http://thirdparty.com/js/third-party-tracking-script.js // another unrelated/independent script 

Pero esto no va a funcionar porque no está garantizado que jQuery se carga antes de que el plug-in de color ...

(function() { 
    var a=[ 
     '/js/my-contact-page-functions.js', 
     '/js/jquery-1.4.2.min.js', '/js/jquery.color.js', 
     'http://cdn.thirdparty.com/third-party-tracking-script.js', 
    ], 
    d=document, 
    h=d.getElementsByTagName('head')[0], 
    s, 
    i, 
    l=a.length; 
    for(i=0;i<l;i++){ 
     s=d.createElement('script'); 
     s.type='text/javascript'; 
     s.async=true; 
     s.src=a[i]; 
     h.appendChild(s); 
    } 
})(); 

¿No es posible cargar jquery y el complemento de color de forma asíncrona? (Dado que el complemento de color requiere que jQuery se cargue primero.)

El primer método que estaba considerando es simplemente combinar el script del plugin de color con la fuente jQuery en un archivo.

Entonces otra idea que tenía era al cargar el complemento del color de este modo:

$(window).ready(function() { 
    $.getScript("/js/jquery.color.js"); 
}); 

Alguien tiene alguna idea sobre cómo te gustaría ir sobre esto? ¡Gracias!

Answer 1

LabJS y RequireJS son dos opciones populares en este momento. Ambos trabajan con jQuery pero adoptan enfoques ligeramente diferentes, por lo que deberías mirar ambos.

Answer 2

Puede aprovechar el YUI Loader en register your own modules and dependencies y luego cargarlos.

Obtiene ganchos completos para el éxito, el fracaso e incluso el progreso, por lo que puede conectar cualquier acción asincrónica que desee.

Answer 3

No podrá lograr una carga completamente asíncrona por el mismo motivo que usted menciona; dependencia.

Para mi 10p, seguiría la ruta $ .getScript(). Básicamente es solo un contenedor para $ .ajax(), por lo que cargar sus scripts de esta manera le dará la carga asíncrona que está buscando.

Answer 4

LABjs está hecho específicamente para este problema.

<script src="lab.js"></script> 
<script> 
    $LAB 
    .script("jquery.js") 
    .wait() 
    .script("jquery.color.js") 
    .script("jquery.otherplugin.js") 
    .script("mylib.js") 
    .wait() 
    .script("unrelated1.js") 
    .script("unrelated2.js"); 
</script> 

También puede poner los scripts no relacionados en su propio $LAB cadena, si es que realmente no tienen necesidad de esperar a jQuery y sus otros scripts.

Última pregunta

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Cuestiones relacionadas

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.