jQuery.loadScript

Chargez en Ajax des fichiers scripts déboguables

Marc Buils

Vous ne vous êtes jamais retrouvé avec un script impossible à déboguer parce qu'il avait été chargé en Ajax ?

Si oui, je vous propose de découvrir le plugin jQuery.loadScript !

Commentez

- Titre : jQuery.loadScript

- Auteur : Marc Buils

- Parution : 1 novembre 2012

- Mise à jour : 6 novembre 2012

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2012 Marc Buils. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Présentation

- II. Utilisation

- III. Exemples

- III-A. Exemple 1 : utilisation avec Deferred

- III-B. Exemple 2: utilisation avec une fonction de callback

- III-C. Exemple 3: chargement de plusieurs scripts

- IV. Conclusion

- V. Remerciements

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:

Utilisation avec callback

1. $.loadScript( url [, callback()] )

Ou

Utilisation avec Deferred

1. $.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 :

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <meta charset="utf-8" />

5. <title>Example of jQuery.loadScript with deferred</title>

6. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

7. <script src="../jquery.loadscript.js"></script>

8. <script>

9. ;(function($){

10. $.loadScript('test.js').done(function(){

11. $('#test').test();

12. });

13. })(jQuery);

14. </script>

15. </head>

16. <body>

17. <div id="test"></div>

18. </body>

19. </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 :

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <meta charset="utf-8" />

5. <title>Example of loadScript with callback</title>

6. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

7. <script src="../jquery.loadscript.js"></script>

8. <script>

9. ;(function($){

10. $.loadScript('test.js', function(){

11. $('#test').test();

12. });

13. })(jQuery);

14. </script>

15. </head>

16. <body>

17. <div id="test">clique ici</div>

18. </body>

19. </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) :

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <meta charset="utf-8" />

5. <title>Example of multiple script loading</title>

6. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

7. <script src="../jquery.loadscript.js"></script>

8. <script>

9. ;(function($){

10. $.when( $.loadScript('test.js'), $.loadScript('test2.js') ).done(function(){

11. $('#test').test();

12. $('#test2').test2();

13. });

14. })(jQuery);

15. </script>

16. </head>

17. <body>

18. <div id="test">clique ici</div>

19. <div id="test2">clique ici</div>

20. </body>

21. </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.