caricamento js file e altri file js dipendenti in modo asincrono

Question

Sto cercando un modo pulito per caricare in modo asincrono i seguenti tipi di file javascript: un file js "core" (hmm, chiamiamolo, oh non lo so , "jquery!" haha), x numero di file js che dipendono dal file js "principale" in fase di caricamento, e numero y di altri file js non correlati. Ho un paio di idee su come procedere, ma non sono sicuro di quale sia il modo migliore. Mi piacerebbe evitare di caricare script nel corpo del documento.

Così, per esempio, voglio i seguenti 4 file JavaScript per caricare in modo asincrono, nome appropriato:

/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 

Ma questo non funziona perché non è garantito che jQuery è caricato prima che il plug-in di colore ...

(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); 
    } 
})(); 

È praticamente impossibile caricare jquery e il plug-in in modo asincrono? (Poiché il plug-color richiede che jQuery sia caricato per primo.)

Il primo metodo che stavo considerando è quello di combinare lo script del plug-in del colore con il sorgente jQuery in un unico file.

Poi un'altra idea che avevo stava caricando il plugin colore in questo modo:

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

Qualcuno ha qualche idea su come devi andare su questo? Grazie!

Answer 1

LabJS e RequireJS sono due scelte popolari in questo momento. Entrambi funzionano con jQuery ma adottano approcci leggermente diversi, quindi dovresti esaminare entrambi.

Answer 2

È possibile utilizzare lo YUI Loader in register your own modules and dependencies e quindi caricarli.

Ottieni i ganci completi per il successo, l'insuccesso e persino il progresso, in modo da poter agganciare qualsiasi azione asincrona che ti piace.

Answer 3

Non sarai in grado di ottenere un carico completamente asincrono proprio per la ragione che hai menzionato; dipendenza.

Per il mio 10p, seguirei la rotta $ .getScript(). È fondamentalmente solo un wrapper per $ .ajax(), quindi caricare gli script in questo modo ti darà il caricamento asincrono che stai cercando.

Answer 4

LABjs creato appositamente per questo 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> 

si potrebbe anche mettere gli script estranei nella propria $LAB catena, se davvero non hanno bisogno di aspettare per jQuery e gli altri script.

Ultima domanda

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

 Problemi correlati

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