Discussion :

[grunk]

Bonjour à tous,
j'ai décidé de me mettre à jQuery après un long moment passé sous prototype. Il faut avouer que la communauté prototype ne semble malheuresement pas en mesure de rivaliser avec celle de jQuery...

Bref,
Avec prototype quand j'avais besoin d'un "plugin" particulier je développais une class que j'appelais ensuite dans mon code avec un new.

Dans jquery si j'ai bien tout saisie l'idée est de passer par des closures pour développer son plugin.
En gros on à une "methode" publique qui en encapsule les privée. On appel ensuite le plugin via un élément du DOM :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#mondiv').monPlugin();

C'est à partir d'ici qu'arrive mes questions :

- N'est il pas possible d'appeler un plugin sans passer par un element du DOM ? (un plugin qui ne se baserais pas spécifiquement sur un élément par exemple)
- Existe t'il une construction plus classique comme on peut trouver avec prototype et son class.Create ? (j'avoue ne pas accrocher du tout au model jQuery)

Dans les nombreux tuto que j'ai pu parcourir , on utilise souvent

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).each(ma function)

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).each(function(){ // Code du plugin})

Cela veut il bien dire que la fonction contenu dans each sera appelé autant de fois qu'il y'a d'élément retourné par l'appel du plugin ?
$('.maclass') // retourne 5 élément
$('.maclass').monPlugin() // Appelera 5 fois la fonction défini dans le each ?

Merci

[danielhagnoul]

Bonsoir.

Beaucoup de gens créent un plugin comme ils écrivent une fonction. Ce n'est pas un acte anodin, il demande une bonne compréhension des mécanismes de jQuery. On trouve en quantité des plugins mal écrits. En ce qui me concerne je pense que plugin égal code important applicable à un array d'objets jQuery. Car en jQuery tout est array, $(this) n'est pas un élément, mais un array, on obtient l'élément par $(this)[0]

C'est pourquoi dans chaque plugin il doit y avoir un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

return this.each(function() {...})

et ici le this est un array d'objets jQuery.

Il existe un tutoriel : Créer un plugin jQuery : une liste déroulante personnalisée


Je vous recommande la lecture d'un article en anglais et déjà ancien, mais c'est lui qui m'a vraiment permis de comprendre ce qu'est un plugin : A Plugin Development Pattern by Mike Alsup

[grunk]

Merci,
L'article de Mike Alsup est en effet très instructif !

Cependant il me reste une question ,
Dans la doc jquery "Authoring" on peut voir qu'il préconise de retourner this (pour assurer le chainage des methode je présume) mais dans l'article de Mark il retourne this.each().

Cela fait il une différence ?

Ps : titre du topic modifié pour coller plus au sujet

[danielhagnoul]

Bonsoir.

Si vous parlez de l'exemple « Putting All Together » :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
this.each(function() {
   // element-specific code here
});
 
return this;

Sur le premier exemple de la même page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
jQuery.fn.debug = function() {
  return this.each(function(){
    alert(this);
  });
};

Cela revient au même, car on parle du this qui contient un array d'objets jQuery, mais nécessite deux lignes au lieu d'une au risque de se tromper de this. Car j'ai déjà vu des auteurs qui isolent un élément pour le traiter et puis qui le retournent, ou ne retourne rien, rompant la chaîne des appels jQuery.

Utiliser la première écriture vous assure de ne pas oublier le return et de retourner le bon this.

À cette écriture de Mike Alsup :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
// iterate and reformat each matched element
return this.each(function() {
   $this = $(this);
   .....
})

je préfère :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
return this.each(function(i, item) {
   // à la place de this on se sert de item, ce qui évite toute confusion avec le this de this.each
   ....
})

Si on a plusieurs each imbriqués je nomme les variables : (i, item) ; (j, jtem) ; (k, ktem) ; etc.

Dans 80 % des cas, on ne sert pas de « i » (il contient la numérotation des items de 0 à n) et dans 20 % des cas on est bien content de l'avoir, mais le premier paramètre doit toujours exister.