Lorsque l'on code en JavaScript (et dans bien d'autres langages), on se retrouve parfois avec des tartines de code qui utilisent plusieurs méthodes d'un même objet. Par exemple :

document.getElementById("infozone").className = "affiche";
document.getElementById("infozone").innerHTML = "Hello";
document.getElementById("infozone").style.display = "block";
(Exemple fictif, on ne devrait surtout pas utiliser .style.display et .innerHTML)
L'exemple est explicite, on va ajouter la classe affiche, insérer le texte "Hello" (et remplacer le HTML existant) et modifier la propriété CSS display de l'élément "infozone".
Ce genre de code est assez répétitif, mais heureusement les grandes librairies javascript nous permettent de gagner du temps grâce au chaînage de méthodes.
Comme son nom l'indique cela consiste à enchaîner les méhodes sur un même objet.

Pratique


Pour plus de clarté on va voir des exemples avec les bibliothèques Jquery, Mootools et Prototype pour réduire le code utilisé en exemple et le rendre plus propre.

1. Prototype


Inutile de présenter prototype, la bibliothèque utilisée par rails et une des plus mises en avant.
$() est un raccourci vers document.getElementById(), en plus d'étendre l'élément sélectionné en lui ajoutant des méthodes assez utiles (on peut également lui passer un élément html quelconque en argument pour profiter des méthodes étendues de prototype).

$("infozone").addClassName('affiche').update("Hello").show();

Quelques améliorations : addClassName nous permet de conserver les classes deja existantes de l'élément et update permet de nettoyer le html inséré.

2. Mootools


Mootools est une librairie pas tellement connue mais rapide et légère et est assez puissante au niveau des effets que l'on peut utiliser. On peut également choisir de télécharger seulement quelques éléments de la lib pour encore alléger le tout.

$("infozone").addClass("affiche").setText("Hello").setStyle('display', 'block');

La méthode d'ajout d'une classe est plus claire que pour prototype, par contre il n'y a pas de méthodes du genre show() ou hide() (c'est un choix des développeurs qui estiment que setStyle fait son boulot).

3. Jquery


Jquery est une bibliothèque assez à la mode en ce moment et qui a justement popularisé le concept de chaînage de méthodes car il repose essentiellement sur ce concept comme le montre le site et les démos.

$("#infozone").addClass("affiche").text("Hello").show();

La grande différence est visible dans la fonction $ qui contrairement aux autres libs est utilisé avec des sélecteurs (ici on utilise le sélecteur CSS "#" qui identifie l'id d'un élément). On peut également utiliser des sélecteurs CSS3 ou XPath. Prototype et Mootools utilisent tous deux la fonction $$() pour cet usage.
La fonction text est aussi assez différente car elle est utilisée de deux manières : appelée avec un argument elle se comporte comme update() ou setText(), mais si on l'appelle sans argument elle renverra le texte de l'élément (auquel sera retiré les balises HTML).

Comment ca marche ?


Le principe est en fait très simple.
Chacune des méthodes que l'on a vu renvoie l'élément sur lequel elle a été appliquée.
Voici par exemple le code de la méthode Element.hide de prototype :

hide: function(element) {
 $(element).style.display = 'none';
 return element; // <-- la magic touch
},


C'est donc sur cet élément que l'on va appliquer la prochaine méthode de notre chaîne de fonction.

Pour aller plus loin, vous pouvez également lire mon précédent article "
Des sous-menus déroulants non obstrusifs avec Jquery" ou l'on peut voir l'utilisation du chaînage de méthode pour gagner en clarté et en taille dans un script non-obstrusif, en plus de se déplacer dans le DOM :
$(this).parent().parent().children("li").find("ul.montre").slideToggle("").removeClass("montre").addClass("matched");

PS : J'espère que cet article vous aura donné envie d'utiliser une des nombreuses bibliothèques Javascript mises à disposition, sinon, voici 6 raisons pour le faire.