mardi 6 avril 2010

7 autres équivalences Prototype vs jQuery

Publié par Infinite Loop, à 20 h 42 1 commentaire

Dans le cadre d'un projet de migration d'une librairie construite sous Prototype vers jQuery, j'ai eu l'occasion d'apprendre à trouver des équivalences entre les deux frameworks JavaScript. J'ai pris le temps de les noter pour vous montrer de quelle façon on peut les remplacer lors de la réécriture du code. J'espère que ça sera aussi utile à vous qu'à moi.

1. strip() = trim()
Pour retirer les espaces au début et à la fin.

var str = '    code 18 est ici        ';

// Prototype
str.strip();

// jQuery
$.trim(str);

2. include() = inArray()
Pour savoir si un élément fait parti de la liste.

var arr = ['ebay', 'paypal', 'amazon'];

// Prototype
arr.include('facebook');

// jQuery
$.inArray('facebook', arr);

3. any() = inArray()
Un truc pratique avec inArray pour savoir si au moins une condition est respectée.

var price = 50;
var discount = 10;
var shipping = true;
var paid = true;

var conditions = [
   (price < 0),
   (discount > price),
   (!shipping),
   (!paid)
];

// Prototype
if(conditions.any()){
   // code
}

// jQuery
if($.inArray(true, conditions) != -1){
   // code
}

4. each()
Pour boucler sur les éléments du tableau.

//  Prototype
arr.each(
   function(index, context){
       // code
   }
);

// jQuery
$.each(arr,
   function(index, value){
       // code
   }
);

5. Sélecteur
Avec jQuery, le sélecteur retourne une collection. Le premier élément est à l'indice 0 même si on fait référence à son identificateur :

// Prototype
$('element_id');

// jQuery
var collection = $('#element_id').get();
var element = collection[0];

ou

var element = $('#element_id').get(0);

6. Pluck()
Cette fonction de Prototype n'existe pas nativement en jQuery. Mais on peut la coder facilement.

// Protoype
arr.pluck('value');

jQuery :
var arrPluck = [];        
$.each(arr,
   function(){
       arrPluck.push($(this).val());
   }
);

Comme dans l'exemple :

var arrInputs = $('input');

var arrPluck = [];
$.each(arrInputs,
   function(){
       arrPluck.push($(this).val());
   }
);

console.log(arrPluck);

7. uniq() != unique()
Sous jQuery, unique() fonctionne seulement avec des objets du DOM. Contrairement à ce qu'offre Prototype pour traiter un array, on doit trouver une solution alternative comme le plugin UNIQ.

Si vous voulez en apprendre plus sur le sujet, vous pouvez lire un ancien billet que j'ai écrit en février 2009 sur quelques équivalences Prototype et jQuery.