I. Présentation▲
Jquery.loadScript est un plugin jQuery qui permet de charger vos fichiers scripts en Ajax tout en vous permettant de les déboguer via un débogueur JavaScript comme Firebug.
Vous pouvez complètement remplacer vos fonctions jQuery.getScript ou jQuery.ajax par jQuery.loadScript (sauf pour de très rares exceptions…).
Site Internet : http://marcbuils.github.com/jquery.loadscript/
Auteur : Marc Buils (marc.buils@marcbuils.fr)
Licence : LGPL v3 (http://www.gnu.org/licenses/lgpl-3.0.txt)
Version actuelle (à la date de l'article) : v0.1.0
Afin d'avoir une meilleure idée de ses possibilités, je vous propose de passer aux choses concrètes.
II. Utilisation▲
L'utilisation de jQuery.loadScript est très proche de la fonction jQuery.getScript.
Il y a un cependant un point qui différencie jQuery.getScript de jQuery.loadScript, la fonction callback de jQuery.loadScript est appelée sans paramètres alors que jQuery.getScript en possède trois.
Ça pourrait peut-être avoir un impact si vous souhaitez remplacer les fonctions getScript de votre code par loadScript.
Utilisation:
$.loadScript( url [, callback()] )
Ou
$.loadScript( url ).done( callback() );
Définition des paramètres :
url : URL du script à charger ;
callback : fonction appelée lorsque le script est chargé et exécuté.
Valeur de retour :
Cette fonction retourne un objet jQuery.Deferred().
III. Exemples▲
III-A. Exemple 1 : utilisation avec Deferred▲
Personnellement, je recommande chaudement d'utiliser cette fonction via l'objet Deferred car je trouve qu'il ajoute une grande modularité au code, comme nous pourrons le voir dans l'exemple 3. Utilisée ainsi, la fonction done est appelée une fois que le script est chargé et exécuté.
Voici un exemple d'utilisation grâce à l'objet jQuery.Deferred :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example of jQuery.loadScript with deferred</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="../jquery.loadscript.js"></script>
<script>
;(function($){
$.loadScript('test.js').done(function(){
$('#test').test();
});
})(jQuery);
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
III-B. Exemple 2: utilisation avec une fonction de callback▲
Une autre manière d'utiliser ce plugin est de lui fournir une fonction de callback. Bien que je trouve cette méthode moins flexible que la méthode précédente, elle a par contre l'avantage de rester complètement compatible avec la fonction jQuery.getScript.
Ça peut être un bon compromis si vous souhaitez remplacer vos fonctions $.getScript dans du code existant par exemple.
Voici un exemple d'utilisation avec une fonction de callback :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example of loadScript with callback</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="../jquery.loadscript.js"></script>
<script>
;(function($){
$.loadScript('test.js', function(){
$('#test').test();
});
})(jQuery);
</script>
</head>
<body>
<div id="test">clique ici</div>
</body>
</html>
III-C. Exemple 3: chargement de plusieurs scripts▲
Ce dernier exemple permet de mettre en avant la flexibilité du plugin dans le cas du chargement de plusieurs fichiers scripts.
Cet exemple attend que tous les scripts soient chargés avant d'appeler la fonction de callback (pour mettre fin au Deferred, plus exactement) :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example of multiple script loading</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="../jquery.loadscript.js"></script>
<script>
;(function($){
$.when( $.loadScript('test.js'), $.loadScript('test2.js') ).done(function(){
$('#test').test();
$('#test2').test2();
});
})(jQuery);
</script>
</head>
<body>
<div id="test">clique ici</div>
<div id="test2">clique ici</div>
</body>
</html>
IV. Conclusion▲
Je pense que ce script va vite faire partie des plugins intégrés de base dans mes nouveaux développements.
Au cas où je ne serais pas le seul dans cette situation, j'ai souhaité partager cette documentation avec vous, et en français.
Bon code !
V. Remerciements▲
Merci à Bovino, Ced et Claude Leloup pour leurs relectures et leurs corrections de ce tutoriel.