Je vous ai déjà présenté prototype et ses fonctions utilitaires précédemment. Voici quelques bonnes pratiques pour utiliser au mieux la puissance de prototype.

Associer une fonction à un événement sur un élément

Prototype permet de manière simple de s’abonner à un événement grâce à la méthode observe. Elle prend 2 paramètreS en entrée : le type d’événement (click, focus, hover, …) et la méthode à appeler.

$('myContainer').observe('click', doSomeMagic);

On appellera la méthode init lors du chargement de la page de la manière suivante :

document.observe('load', init);

Appeler la même méthode pour plusieurs éléments

Dans certains cas, vous pouvez à être amener à appeler une même méthode sur plusieurs élément comme cacher ou afficher certains éléments d’un seul coup. La méthode invoke permet de ne faire cette opération en une seule ligne de code.

$$('div.hidden').invoke('show')

ou

$('item1', 'item2', 'item3').invoke('hide');

Enchaîner plusieurs fonctions

Dans le même ordre d’idée, vous pouvez être amené à appelez plusieurs méthodes sur un même objet. Au lieu de récupérer votre élément à chaque appel de fonction, vous pouvez les enchaînez. Vous gagnerez en légèreté et en rapidité (pas besoin de récupérer l’élément à chaque appel).

$('comments').addClassName('active').show();

Effectuer des remplacements de chaines

Prototype intègre également la notion de template. Un template est une chaîne de caractère modèle contenant des variables (#{maVar}), variables qui seront remplacés par les valeurs fournies lors l’appel à evaluate. Cela est très utile lors de lors de la concaténation d’une même chaîne dans une boucle par exemple.

var myTemplate = new Template('The TV show #{title} was created by #{author}.');
var show = {title: 'The Simpsons', author: 'Matt Groening' };
myTemplate.evaluate(show);

Remplacer le contenu d’un élément

Pour mettre à jour un élément HTML, on utilisera  update (à la place de innerHTML)

$('maDiv').update('je suis mis à jour');

Insertion d’éléments

Il vous arrive peut être de devoir créer dynamiquement des éléments dans vos pages. Prototype permet l’insertion d’élément de manière très aisée grâce à la fonction insert. Elle prend en paramètre la position d’insertion (top, bottom, before ou after), par rapport à un élément de référence, et l’élément à rajouter.

var titre = new Element('h3', { 'class': 'maClasse' }).update('Mon Titre'); /* nouvel element */
$('header').insert( {bottom : titre }); /* Insertion */

On peut également noter que la position par défaut est bottom. On peut donc simplifier par :

$('header').insert(titre);

Et voila!! c’est tout pour cette fois 😉