Ayant récemment porté warpklondike sur le framework jQuery vers le framework Prototype pour la version webOS du jeu, j’ai pensé que c’était une bonne idée de partager mon expérience… Voici donc un petit article présentant les principales différences entre ces deux frameworks.

Introduction
La principale différence entre jQuery et Prototype est que jQuery n’étend ni le JavaScript, ni le DOM: jQuery est un simple wrapper autour des éléments du DOM. Les méthodes sont donc disponibles sur les objets/collections jQuery et non sur les éléments du DOM.

$('.maClasse').each(function()
{
    // $() nous avons à faire à l'objet jQuery ici
    $(this).addClass('selected');
 
    // this est l'objet DOM (non étendu)
    this.addClass('selected'); // error: addClass() is not a function
}

Prototype, à l’inverse, étend le DOM (notamment l’objet Element) avec ses propres méthodes. De même, l’objet Array se voit étendu. Outre le côté implémentation galère: chaque navigateur change à chaque mise à jour, implémentant de nouvelles méthodes: que se passe-t’il lorsque le navigateur implémente la méthode document.getElementByClassName() ensuite étendue par le framework ? Une grosse collision Une fois le framework fixé, il faut aussi fixer tout le code utilisant cette méthode…

var monDiv = new Element('div');
monDiv.addClassName('selected');  // fonctionne, puisque l'objet Element a été étendu par Prototype

Il semblerait donc que l’approche utilisée par jQuery soit bien meilleure. Il est à noter que la version 2.0 de Prototype n’étendra d’ailleurs pas le DOM comme cela avait été le cas jusqu’à maintenant: Ajaxian: prototype 2.0 will not extend the dom.
1. le sélecteur $
$ est surement la première chose que l’on découvre en se lançant dans jQuery, et la fonctionne existe aussi dans Prototype, mais les deux fonctionnent différemment. Dans jQuery, $ fait office de sélecteur universel:

var $maCollection = $('.maClass');
var $mesInput = $('form input');
var $monSubmit = $('#monSubmit');

Avec Prototype, $ est en fait un raccourci vers document.getElementById(). Pour obtenir un sélecteur universel comme sur jQuery il faudra utiliser le $$:
deviendra:

var $maCollection = $$('.maClass');
var $mesInput = $$('form input');
var $monSubmit = $$('#monSubmit');

Note: l’appel d’une méthode sur une collection d’éléments jQuery appellera automatiquement la méthode sur chaque élément. Par exemple $(’.maClasse’).addClass(’selected’) appliquera la classe selected à chaque élément. A l’inverse, Prototype étendant le DOM, les méthodes sont accessibles sur chaque élément et non pas sur la collection d’éléments: $$(’.maClass’).addClassName(’selected’) ne fonctionnera pas. Il faudrait parcourir la collection avec each().

2. document.ready()
Le JavaScript a accès au DOM avant même qu’il soit finit d’être chargé. Pour être sûr qu’il le soit, et que nos modifications puissent donc fonctionner, jQuery fournit la méthode $(document).ready(), automatiquement appelée lorsque le DOM est prêt:

$(document).ready(function()
{
   alert('prêt !');
});

L’équivalent Prototype (1.6) serait:

document.observe('contentloaded', function()
{
   alert('prêt !');
});

3. itération
jQuery utilise la méthode each() pour itérer sur une collection d’éléments. A l’intérieur de la fonction each, this correspond à l’objet DOM (non étendu), et $(this) permet d’accéder à l’objet jQuery. Enfin, each passe l’index de l’élément en cours à la fonction callback (optionnel):

$('.maClasse').each(function(i)
{
   $(this).addClass('selected');
});

Prototype fournit une méthode each() équivalente, à la différence prêt que le this n’est pas assigné, comme par magie dans jQuery (beaucoup de choses se font par magie dans jQuery ) à l’objet courant. Dans Prototype la fonction callback se voit passer comme paramètres l’élément courant, et l’index:

$$('.maClasse').each(function(elt, i)
{
   elt.addClassName('selected');
});

4. modification de contenu
Pour modifier le contenu d’un élément avec jQuery, il existe principalement deux manières. On veut écraser tout le contenu d’un élément:

<p id="monParagraphe">
   Ancien contenu.
</p>

$('#monParagraphe').html('nouveau contenu :)');

Ce qui donnera:

<p id="monParagraphe">
   nouveau contenu :)
</p>

Le code Prototype correspondant serait:

$('monParagraphe').update('nouveau contenu :)');

Pour ajouter un élément, ou du texte à autre élément, jQuery fournit les méthodes: append() et prepend() qui rajoutent respectivement du contenu en fin, et en début d’élément:

<p id="monParagraphe">
   Ancien contenu.
</p>

var $span1 = $('<span/>').html('avant');
var $span2 = $('<span/>').html('apres');
$('#monParagraphe').prepend($span1);
$('#monParagraphe').append($span2);

Ce qui donnera:

<p id="monParagraphe">
   <span>avant</span>
   nouveau contenu :)
   <span>apres</span>
</p>

Prototype fournit une méthode « tout-en-un » insert qui permet de rajouter du contenu en début et fin d’élément en un seul appel. Le code Prototype correspondant serait:

var $span1 = new Element('span').update('avant');
var $span2 = new Element('span').update('apres');
$('monParagraphe').insert({
   top: $span1,
   bottom: $span2
});

5. Modification CSS
Pour modifier l’aspect d’un élément à l’aide des CSS, rien de plus simple avec jQuery: la méthode css() permet de modifier un ou plusieurs attributs CSS:

$('#monParagraphe').css({
  border: '1px solid red',
  'background-color': 'green'
});

Ce qui donnera:

<p id="monParagraphe" style="border:1px solid red; background-color:green;">
   <span>avant</span>
   nouveau contenu :)
   <span>apres</span>
</p>

Note: La méthode CSS reconnait à la fois les noms d’attributs CSS et leur variante Camel Case. Pour modifier le « background-color », on aurait donc aussi pu utiliser: backgroundColor: ‘green’.

Prototype fournit la méthode équivalente setStyle:

$('monParagraphe').setStyle({
  border: '1px solid red',
  backgroundColor: 'green'
});

Note: Prototype ne reconnait que du Camel Case. Il n’est donc pas possible de modifier l’attribut background-color en utilisant: ‘background-color’: ‘green’ et il faut impérativement utiliser du Camel Case comme dans l’exemple précédent.

6. Cacher/Afficher des éléments
Pour cacher ou afficher un élément avec jQuery, rien de plus simple:

$('#monParagraphe').hide();

aura pour effet de cacher le paragraphe:

<p id="monParagraphe" style="display:none;">
  Mon Paragraphe
</p>

Pour réafficher un paragraphe caché (par CSS ou bien par jQuery), il suffit de faire appel à la méthode show():

$('#monParagraphe').show();

Prototype fournit deux méthodes équivalentes: show et hide mais attention ! Prototype n’est pas capable d’afficher un élément qui aurait été caché au niveau CSS (ayant la propriété display settée à none). Exemple:

#monParagraphe{
  display:none;
}

L’appel à show() n’aura aucun effet dans ce cas:

$('#monParagraphe').show();

Il sera nécessaire dans ce cas de modifier directement la propriété CSS display en écrivant par exemple:

$('#monParagraphe').style.display = 'block';

7. Pour aller plus loin
jQuery permet d’assigner des données à chaque élément du DOM à l’aide de la méthode data:

var mesDonnees = {test: 'yep !'};
$('#monParagraphe').data(mesDonnees);

Pour récupérer ces mêmes données, il suffit alors d’appeler data sans paramètre:

var mesDonnees = $('#monParagraphe').data(); // { test: 'yop !' }

Là encore, Prototype fournit les méthodes store et retrieve équivalentes:

$('monParagraphe').store('test', 'yep !'); // { test: 'yop !' }
var test = $('monParagraphe').retrieve('test');  // test == 'yop !'

Quelques liens
Pour finir, et pour en savoir plus, voici quelques liens utiles:

• Documentation officielle de jQuery: api.jquery.com
• Documentation officielle de Prototype: http://api.prototypejs.org/

SleepySun  [ Rock spychiadélique ]
Ambiance: Rock Psychiadélique
Albums: Fever Art
A écouter: Open Eyes