L’incontournable méthode jQuery.extend()

Salut,

Je voudrais ici vous montrer la méthode de jQuery, extend().
[cc lang= »javascript »]
jQuery.extends(obj1, obj2);
[/cc]
http://jquery.com
Cette méthode vous permettra d’étendre l’objet « obj1 » avec les propriétés de l’objet « obj2 ». En cas de propriétés communes celles de « obj2 » écraseront celles de « obj1 ».

Jusque là, on est d’accord, cette fonction n’a rien d’extraordinaire et n’est absolument pas nouvelle dans les standards de la programmation (cf. autres équivalents dans d’autres langages).
Ceci dit nous verrons comment l’utiliser comme « Best Practice » au sein de votre code Javascript.

Cette méthode s’avérera particulièrement utile pour manipuler plus aisément vos objets. Ici nous étudierons 2 cas de figure :
– Gérer proprement les options par défaut de votre plugin jQuery.
– Faire facilement de l’héritage / multi-héritage sur vos classes Javascript

Options de vos plugins jQuery

En effet si votre plugin accepte n options, tel que
[cc lang= »javascript »]
// Déclaration
$.fn.MyPlugin = function(options){
// dome some stuff with my options
}

// Appel
$(« .really_good_class »).MyPlugin({
opt1:value1,
opt2:value2,
….
})
[/cc]
Le développeur qui utilisera votre plugin ne renseignera que très rarement la totalité des options possibles. Au sein de votre code vous serez alors régulièrement amené à tester l’existence de telle ou telle option.
Pour résoudre ce problème proprement, il faut envisager d’avoir d’un coté, un lot d’options par défaut, de l’autre coté, les options saisies par l’utilisateur. Enfin, les unifier pour ne former qu’un seul lot d’options qui sera plus facile à manipuler.

Je vous propose des explications directement dans le code ci-dessous.

[cc lang= »javascript »]
// Ici on déclare notre objet qui contiendra
// toutes les options par défaut de notre plugin
function defaultOptions() {
this.width = 200;
this.height = 100;
};

// Appels du plug-in
$(function(){

$(« .really_good_class »).MyPlugin({
width:300
});

$(« .really_good_class »).MyPlugin({
height:400
});
})

// Déclaration du plug-in
// dans laquelle la gestion des options interviendra
$.fn.MyPlugin = function(options){

// C’est ici qu’intervient avec brio la méthode jQuery.extend().

// On instancie un lot d’options par défaut
// et on le « merge » avec celui de l’utilisateur.
// jQuery nous retournera avec brio l’objet résultant.
var finalOptions = jQuery.extend(new defaultOptions(), options);
// Pourquoi on fait un new defaultOption() ?
// Parce que sans cela les propriété par défaut seront écrasés
// et donc plus utilisables.

// Maintenant je peux manipuler facilement les options
// sans avoir à jongler entre les deux lots

// Ici la propriété height est celle par défaut
console.log(finalOptions.height);

// Ici la propriété width est celle de l’utilisateur
console.log(finalOptions.width);
};
[/cc]

Autre possibilité intéressante avec la méthode jQuery.extend(), la gestion de l’héritage de classes et donc plus largement la structure objet de vos applications Javascript.

Faire de l’héritage en Javascript

L’héritage en javascript fait sourir plus d’un développeur.
Toujours est-il pour ceux que ça interesse, que l’on peut très facilement et rapidement mettre en place une architecture objet en javascript, cela engendrant du code plus clair, plus simple, plus maintenable…

L’héritage en javascript n’est pas nouveau. Plusieurs techniques sont possibles, allant du plus ou moins sexy. Je vous invite à aller étudier les techniques déjà connues… quelques unes à titre d’exemple :
– La recopie des méthodes de la classe Mère vers la classe fille
– La copie du prototype
– …
Vous trouverez de l’info sur ce tuto, entre autre.

Dans notre exemple nous allons adapter la méthode de recopie du prototype en utilisant la fonction jQuery.extend().

Le fonctionnement est très simple :
– On déclare et définie une classe Mère
– On déclare et définie une classe Fille
– On étend le prototype de la classe Fille avec une instance de la classe Mère

… Hyper simple à mettre en oeuvre, donc un exemple vaudra plus que des lignes de blabla.

[cc lang= »javascript »]
// On définie une classe Mère
function MaClasseMere(){

// La maman fait du bon café
this.FaitLeCafe = function(){
console.log(« La maman fait le café »);
};

// Elle fait également du bon thé
this.FaitLeThe = function(){
console.log(« La maman fait le thé »);
}

}

// On définie une classe fille
function MaClasseFille(){

// La fille fait du meilleur café que sa mère (… mais ça faut pas le dire à la mère …)
// Une fois l’héritage établie, cette fonction écrasera celle de sa mère
this.FaitLeCafe = function(){
console.log(« La fille fait du meilleur café que sa maman ! »);
}

// Ceci dit elle, ne sait pas faire de thé !
}

// Une fois nos classes définies
// la classe fille va maintenant hériter de sa mère
jQuery.extend(MaClasseFille.prototype, new MaClasseMere())
// Et hop le tour est joué

// Pour tester :

var Mere = new MaClasseMere()
, Fille = new MaClasseFille();

Mere.FaitLeCafe(); // écrit « La maman fait le café »
Fille.FaitLeCafe(); // écrit « La fille fait du meilleur café que sa maman ! »

Mere.FaitLeThe(); // écrit « La maman fait le thé »
Fille.FaitLeThe(); // écrit « La maman fait le thé »
[/cc]

Au final, l’objectif de cette démonstration était de vous présenter la fonction extend() de jQuery, et d’aborder ensemble les possibilités qu’elle offrira au sein de vos applications Web.

Sur ce, bon code et surtout restez Fun !
A+