johanBleuzen

Quand on développe du code jQuery, on fait souvent des erreurs qui peuvent faire perdre soit peu de temps (le cas d’un point virgule) ou énormément de temps quand l’erreur est difficile à trouver. Avec le temps j’ai repéré que certaines erreurs revenaient assez fréquemment, au début cela pouvait faire perdre du temps, mais maintenant des que j’ai un problème difficile à résoudre je vérifie toujours les points suivants.

1. Erreur sur les éléments ciblés : C'est la cause de problème la plus fréquente. Par exemple vous pensez faire un traitement sur tous les <li> d'une liste qui ont pour classe "expanded", mais dans votre code vous avez écris cela : ``` javascript$('.expandd', '#myList').toggleClass('expanded');``` Il est difficile de contourner ce genre de bug, mais un moyen facile de le détecter est de vérifier l'object jQuery récupéré par le sélecteur n'est pas vide : ``` javascriptconsole.log($('.expandd', '#myList').length);```
2. Erreur avec le namespace des méthodes : Vous avez développé deux plugins testables qui ont un comportement bien différents mais qui ont tous les deux une méthode qui a le même prototype, par exemple $.fn.refreshContent(). Pour éviter les conflits sur l'appel des méthodes, il est grandement recommander d'utiliser un namespace avant le nom de la fonction en rapport avec le plugin. Par exemple pour nos deux plugins "premierPlugin" et "secondPlugin", il est recommandé de déclarer la méthode refresh tel que : ``` javascript// Dans le premier plugin $.fn.premierPlugin.refresh = function(){ // Implementation... }``` Ainsi dans ce premier plugin, il faut remplacer les appels à $.fn.refreshContent(), il faut également modifier le second plugin tel que : ``` javascript// Dans le second plugin $.fn.secondPlugin.refresh = function(){ // Implementation... }``` Ainsi il n'y aura plus de conflits possible entre les plugins et de comportements aléatoire ou erratiques puisque vous préciserez bien quelle fonction de quel plugin vous souhaitez appeler.
3. Erreur avec des méthodes asynchrones : Par exemple, quand on utilise des animations, certaines actions peuvent se produire avant que l'animation soit terminée. Par exemple, voici un extrait de code qui fait un fadeOut sur un élément, pour remplacer son contenu puis fait un fadeIn pour faire apparaitre la modification : ``` javascriptvar monElement = $('#element'); monElement.fadeOut("fast"); monElement.text("Nouveau contenu de l'élément"); monElement.fadeIn("fast");``` Si vous exécutez ce code, vous verrez que le contenu de l'élément sera mis à jour alors que l'animation ne sera pas encore terminée. Pour passer outre ce petit problème, les fonctions fadeOut et fadeIn (liste incomplète) peuvent prendre en paramètre une fonction qui sera exécutée lorsque l'animation sera terminée. Ainsi, on peut résoudre le problème avec le code suivant : ``` javascriptvar monElement = $('#element'); monElement.fadeOut("fast", function(){ monElement.text("Nouveau contenu de l'élement"); monElement.fadeIn("fast"); });``` Cette "astuce" est également très utile pour les fonctionnalités d'Ajax par exemple.
4. Problèmes avec les guillemets : Dès que l'on génère du contenu HTML dans un plugin jQuery, il faut faire attention aux normes de codages. Par exemple, il est préférable d'utiliser les singles quotes lorsque l'on écrit du code javascript et préférer les doubles quotes lorsque l'on écrit du HTML. Par exemple, l'extrait suivant est invalide et ne suit pas une norme de codage : ``` javascript//Mauvais exemple de code $("#maListe li").html("Titre"); //Meilleur code, plus lisible et source de moins d'erreurs $('#maListe li').html('Titre');```
5. Erreur sur l'initialisation des plugins : Cette erreur, très bête, m'arrive encore parfois lorsque je souhaite initialiser mes plugins... J'utilise le $('document').ready();, mais il arrive encore que j'oublis la parenthèse finale ou l'accolade de la fonction. Une autre erreur similaire qui peut se produire consiste à avoir des problèmes à l'initialisation d'un plugin, par la faute d'une erreur sur un autre plugin. J'ai donc pris l'habitude de mettre un point virgule au début de chaque plugin. ``` javascript;(function($) { // Implementation du plugin });``` Ainsi, on s'assure que le plugin précédent ne va pas interférer avec le plugin actuel.

Voila, j’espère que cette petite présentation vous aura appris comment contourner certains problèmes que l’on peut rencontrer lorsque l’on développe du javascript avec jQuery.

Petite précision : Par plugin testable, je veux dire que les différentes méthodes du plugins sont déclaré avec le préfix $.fn., ce qui les rendent accessibles à l’extérieur du plugin pour être exécutée par des tests unitaires.