Pour prolonger la série des tutorials et conseils sur JQuery, je propose un article pour livrer quelques astuces que j’ai découvert par moi-même ou glanées sur le web dans le but de mieux coder et d’optimiser le code JQuery.

En effet, si celui-ci n’est pas bien optimisé, les perfomances peuvent être détérioriées en fonction des capacités de la machine de visiteur. Le JavaScript est un langage côté client, il ne faut pas négliger les visiteurs ayant une machine de moindre puissance !

1 – Optimisation des sélecteurs

Pour commencer, un petit rappel de l’ordre des sélecteurs de JQuery en fonction de leurs vitesses d’interprétation (la liste n’est pas exhaustive) :

$(" #monbloc")
 
$("p")
 
$(".laclasse")

Quelques explications s’imposent. Le plus rapide reste d’utiliser directement l’ID de ce que l’on recherche, la fonction étant basé sur la fonction getElementById() de JavaScript. La fonction recherche un objet du DOM unique et s’arrête dès qu’elle l’a trouvé !

Le deuxième sélecteur est basé sur la fonction JavaScript getElementByTagName(). Le nombre d’éléments à parcourir est moindre par rapport à simplement « .laclasse ». Avec un sélecteur composé simplement d’un nom de classe, tout le DOM est parcouru ! C’est ce qu’il y a de pire !

Dernier petit conseil concernant les sélecteurs, il est toujours mieux de donner un contexte au sélecteur si l’on doit utiliser une classe :

$(« #monID .maclasse ») est plus rapide que $(« .maclasse »)

2 – Utilisation des objets JQuery et des variables JavaScript

Si tu dois utiliser plusieurs fois le même sélecteur, il faut utiliser les objets JQuery et enregistrer celui-ci dans une variable.

Regardons ce bout de code (ceci est bien entendu un exemple à ne pas reproduire !) :

$("a#monLien").click( function(e) { // quand on clique sur le lien ayant l'id monLien
     if( $("#monBloc").is(":visible") ) // si le bloc "monBloc" est visible
     {
          $("#monBloc").slideUp("slow"); // on l'enroule
          $("#monBloc").addClass("ferme"); // et on y ajoute la classe "ferme"
     }
     e.preventDefault(); // pour empecher le navigateur de suivre le lien
});

Le sélecteur $(« #monBloc ») est utilisé 3 fois. Le DOM est donc parcouru autant de fois pour toujours avoir le même résultat.

$("a#monLien").click( function(e) {
     // on affecte à la variable monBloc l'objet JQuery correspondant :
     var monBloc = $("#monBloc");
     if( monBloc.is(":visible") ) // si le bloc "monBloc" est visible
     {
          monBloc.slideUp("slow"); // on enroule le bloc
          monBloc.addClass("ferme"); // et on y ajoute la classe "ferme"
     }
     e.preventDefault();
});

Le simple fait de mettre dans une variable le résultat de $(« #monBloc ») permet de n’utiliser le sélecteur qu’une seule fois. On peut appliquer n’importe quelle fonction JQuery à la variable monBloc qui contient l’objet JQuery retourné par le sélecteur !

3 – La chainabilité

L’un des avantages de JQuery est la possibilité d’utiliser la « chainabilité » pour écrire son code. Un exemple vaudra toute les explications.

Reprenons le bout de code précédent :

$("a#monLien").click( function(e) {
     var monBloc = $("#monBloc");
     if( monBloc.is(":visible") )
     {
          monBloc.slideUp("slow");
          monBloc.addClass("ferme");
     }
     e.preventDefault();
});

On constate que dans la condition if (monBloc… il y a 2 actions à effectuer sur « monBloc ». La chainabilité permet de raccourcir l’écriture du code :

$("a#monLien").click( function(e) {
     var monBloc = $("#monBloc");
     if( monBloc.is(":visible") )
     {
          // on enroule le bloc et on y ajoute la classe "ferme" :
          monBloc.slideUp("slow").addClass("ferme");
     }
     e.preventDefault();
});

Par la suite, il est donc possible de faire des choses comme ceci :

$("a")
   .filter(".class1") // si un lien à la classe .class1
     .click(function(e){ // et qu'on clique dessus
       alert("Un clique sur le lien .class1"); // on alert
       e.preventDefault(); // et on empeche le navigateur de suivre le lien
     })
   .end() // on retire le sélecteur ajouté avec filter()
   .not("#superId") // si un lien n'a pas pour id superId
     .click(function(){ // et qu'on clique dessus
       $(this).hide(); // on cache le lien
       e.preventDefault(); // et on empeche le navigateur de suivre le lien
     })
   .end(); // et on retire le sélecteur
   ... // on peut continuer trèèèèès longtemps comme ça.

La chainabilité est possible grâce au fait que chaque fonction JQuery retourne l’objet auquel est appliqué la méthode (ou fonction pour rester dans des termes compréhensibles ). La fonction end() permet de « retirer » le dernier sélecteur de « Traversing » (je vois pas trop le mot à utiliser pour le traduire). Pour voir la liste de ces sélecteurs, n’hésite pas à faire un tour sur la Doc JQuery !

4 – Utiliser le fonctions de toggle

Une petite astuce toute simple et pourtant très utile. Je ne vois pas très souvent les fonctions de « toggle » utilisées… Or ces fonctions permettent d’inverser un état d’un élément. Il y en a plusieurs, mais je parle notamment de :

• toggle() qui rend visible un élément non visible ou qui cache l’élément si celui-ci est visible
• slideToggle() qui slideDown (déroule) un élément non visible ou qui slideUp (enroule) l’élément si celui-ci est visible
• toggleClass(« maClass ») ajoute la classe à l’élément si celui-ci ne l’a pas ou supprime la classe à l’élément si celui-ci l’a déjà

Par exemple :

if($("#monTest").is(":visible") ) // si le bloc ayant pour id "monTest" est visible
{
     $("#monTest").hide(); // on le cache
}
else // sinon
{
     $("#monTest").show(); // on le montre
}

Tout ce bloc peut être réduit (et donc optimisé) à 1 seule ligne de code :

$("#monTest").toggle(); // !!

5 – Utiliser la fonction data() de JQuery

Chose que j’ai découverte il y a peu (en refaisant mon portfolio), il est possible avec JQuery d’attacher des données à un élément.  Cette fonction est très utiliser par certans plugins (comme par exemple JQueryUI). La fonction data() s’utilise comme ceci :

$("#id").data('color', $("#id").css('color'));  // On enregistre la couleur du bloc à ce moment
[...]
$("#autreId").css('color', $("#id").data('color') );  // On affecte la couleur enregistré à un autre élément
[...]
$("#id").removeData('color'); //Et on n'oublie pas de vider le data quand on a fini

J’espère avoir appris au moins une astuce à une personne, comme ça je n’aurai rien perdu !

[image : JQuery Rock Star by tsinilas]

Pas encore de billet sur le même sujet !