5 conseils pour developper avec JQuery

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 !

jQuery_Rock_Star_by_tsinilas

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]

http://jqueryui.com/
Cette entrée a été publiée dans JQuery, avec comme mot(s)-clef(s) , , . Vous pouvez la mettre en favoris avec ce permalien.

20 reponses a 5 conseils pour développer avec JQuery

  1. Syndrael dit :

    Quelques astuces que je ne connaissais pas.. le but de l’article est atteint.Merci
    S.

  2. doo dit :

    pareil d’autres trucs que j’apprends continue comme ça n_n

  3. arnaud dit :

    Content d’avoir atteint le but de l’article ! ;)

  4. olivvv dit :

    Pour identifier les objet jQuery, tu peut utiliser le prefix $ comme convention.
    Pour ton exemple 3 : $monBloc.

    Ainsi, des que tu voit un « $ », tu sait que tu peux y appliquer des methodes jQuery.

  5. nell dit :

    Yeah ! Grâce à toi et tes posts, je comprends enfin le javascript, il est comme dédramatisé. J’avoue, je faisais une sorte de blocage, mais là, je crois que je commence à aimer ça… ^_^
    Merci

  6. David dit :

    Et non tu n’as pas perdu ton temps je suivrai tes conseil a l’avenir.

    Article très intéressant ! ;-)

    Merci.

    @+

  7. Gilles dit :

    Salut
    Bonne initiative de donner des bonnes méthodes de développement en jquery. Parce que j’ai toujours tout appris tout seul et souvent je me demande si je vais au plus efficace.
    Tu m’as appris à optimiser l’utilisation des sélecteurs pour ne pas parcourir tout le DOM à chaque fois.
    Une petite remarque, tu dates ton post mais tu ne mets pas l’année
    a+

  8. Ping : ES-137.com

  9. Marc dit :

    Bravo !! Tout ce qui se conçoit clairement s’énonce clairement (c’est pas de moi) mais çà décrit assez bien ce qu’il se passe ici !! Continuez !! merci !

  10. El garch dit :

    Merci pour ces précieuses astuces, j’ai trop aimé tes explications, bon continuation ;-)

  11. Jérémie dit :

    Merci beaucoup pour ces conseils très utiles.

    Comme Gilles plus haut dans les commentaires, je n’utilisais pas les sélecteurs à bon escient (notamment les sélecteurs sur les classes).

  12. Jeune gay dit :

    Merci pour ses conseils, c’est pas facile d’utiliser jquery surtout quand on connait rien en javascript ^^

  13. Très intéressant en effet :) Merci pour le partage !

  14. Nbuis47 dit :

    Bravo et Merci pour ces conseils, pour ma part cela m’aide beaucoup et me fait avancer, c’est cela l’avantage du Web et des Gens ouvert comme toi ! Un grand merci et continu comme ça !

  15. Anthony dit :

    Merci pour ces conseils !

    Gain de temps de chargement et de temps de développement ( 1 ligne pour 4 ! ) c’est vrai que l’on ne pense pas toujours à la meilleur méthode a appliquer. Mais c’est grâce a des blogueurs comme toi que l’on pense a développer correctement et rapidement.

  16. Zakaria dit :

    Elles sont précieuses tes astuces :) Merci pour le partage ;)

  17. Gay David dit :

    Bonjour,

    Merci pour ce partage. Je suis pas un adorateur de jquery, mais on finira par arriver à me former, faut bien s’adapter à toutes les formes de programmation :)

    Cordialement,
    Dave

  18. KzrDt dit :

    Merci pour la petite astuce du toogle. En espérant m’en souvenir à l’avenir.

  19. C’est super ! Merci pour l’info !

  20. John dit :

    beaucoup d’infos ! bravo car c’est du boulot !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>