chargement asynchrone de fichiers js et d'autres fichiers js dépendants

Question

Je recherche un moyen propre de charger de manière asynchrone les types de fichiers javascript suivants: un fichier js "core" (hmm, appelons-le, oh je ne sais pas , "jquery!" haha), x nombre de fichiers js qui dépendent du fichier js "core" en cours de chargement, et y nombre d'autres fichiers js non liés. J'ai quelques idées sur la façon de s'y prendre, mais je ne suis pas sûr de la meilleure façon de procéder. Je voudrais éviter de charger des scripts dans le corps du document.

Ainsi, par exemple, je veux que les 4 fichiers javascript suivants pour charger de manière asynchrone, bien nommé:

/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 

Mais cela ne fonctionnera pas parce qu'il est pas garanti que jQuery est chargé avant le plugin couleur ...

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

Est-il à peu près pas possible de charger jquery et la couleur du plugin de manière asynchrone? (Puisque le plugin de couleur nécessite que jQuery soit chargé en premier.)

La première méthode que je considérais est de combiner simplement le script de plugin de couleur avec la source jQuery dans un seul fichier.

Puis une autre idée que j'avais chargeait le plugin couleur comme ceci:

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

Quelqu'un a des idées sur la façon dont vous iriez à ce sujet? Merci!

Answer 1

LabJS et RequireJS sont deux choix populaires en ce moment. Ils travaillent tous les deux avec jQuery mais adoptent des approches légèrement différentes, vous devriez donc regarder les deux.

Answer 2

Vous pouvez utiliser le YUI Loader pour le register your own modules and dependencies, puis les charger.

Vous obtenez des crochets complets pour le succès, l'échec, et même la progression, de sorte que vous pouvez accrocher toute action asynchrone que vous aimez.

Answer 3

Vous ne pourrez pas obtenir une charge complètement asynchrone pour la raison que vous venez de mentionner; dépendance.

Pour mon 10p, je suivrais l'itinéraire $ .getScript(). C'est simplement un wrapper pour $ .ajax(), donc charger vos scripts de cette façon vous donnera le chargement asynchrone que vous recherchez.

Answer 4

LABjs est faite spécifiquement pour ce problème.

<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> 

Vous pouvez aussi mettre les scripts non reliés dans leur propre chaîne $LAB, si elles ont vraiment pas besoin d'attendre pour jQuery et vos autres scripts.

Dernière question

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

 Questions connexes

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