Plusieurs instances de plugin

Version imprimable

14/03/2012, 18h42
FredoMkb

Plusieurs instances de plugin

Bonjour à tous :)

Ceci est mon tout premier message sur ce forum.

J'ai codé mon premier plugin jQuery, plutôt basique, qui sert à afficher une galerie d'images.

Ce petit plugin est installé sur un site dont les articles sont chargés dynamiquement par Ajax avec la fonction "load()" de jQuery.

Lorsqu'un article dispose d'une galerie, le plugin est utilisé sur la balise "div" contenant les images afin de pouvoir les afficher.

Or, lorsque j'affiche deux articles, ou plus, contenant une galerie d'images, le plugin se charge intégralement pour chaque article et cela ralenti considérablement sont fonctionnement.

J'imagine qu'il faudrait "libérer" de la mémoire l'instance du plugin précédent avant de charger le suivant, mais je ne sais pas faire, malgré de nombreuses recherches sur le net, je n'ai pas trouvé de solution simple applicable dans mon cas de figure.

Si vous avez une idée de la technique à utiliser, je serai évidemment preneur.

Merci à tous pour vos lumières :)
15/03/2012, 11h02
FredoMkb

Bon, visiblement ma demande d'aide n'inspire pas grand monde, peut-être parce qu'elle n'est pas assez claire ? ... il manquerait des infos ? ... un bout de code ?

Dites-moi Svp si vous avez besoin de précisions car il m'est difficile de savoir ce qu'il vous faudrait pour me donner un petit coup de pouce.

En gros je fais ceci lorsque je charge et affiche un article :

Code:

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

La lettre "N" à la fin du sélecteur étant le numéro de l'article.

Puis, lors de l'affichage d'un nouvel article c'est toujours le même code mais avec le sélecteur correspondant au numéro de l'article :

Code:

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

En somme, si j'ai bien compris, à chaque appel du plugin un nouveau code est ajouté sans que le précédent, qui n'est plus nécessaire, soit effacé, du coup, cela cause un ralentissement de l'affichage... qui peut devenir gênant sur des galeries importantes.

Bref, existe-t-il une technique pour supprimer ou inhiber l'instance précédente du plugin afin que la suivante fonctionne sans ralentissement ?

J'espère que c'est un peu plus clair... n'hésitez pas à me dire si vous avez besoins de plus de précisions...

Merci pour votre aide :)
15/03/2012, 22h26
danielhagnoul
Bonsoir

Plus clair ? Pas vraiment !

Si votre plugin mobilise beaucoup de ressources, il doit disposer d'une méthode "destroy" pour les libérer.
Code:

1 2 3 4 $( '#mon_article_3' ).monPlugin( "destroy" ); $( '#mon_article_3' ) = null; $( '#mon_article_4' ).monPlugin( )
Mais un plugin bien conçu doit aussi supporter l'existence de plusieurs instances concomitantes.

Bref, il faut revoir l'écriture de votre plugin.
16/03/2012, 05h11
FredoMkb

Bonjour, merci pour votre réponse :ccool:

Citation:

Envoyé par danielhagnoul

Bonsoir
Si votre plugin mobilise beaucoup de ressources, il doit disposer d'une méthode "destroy" pour les libérer.

Code:

$( '#mon_article_3' ).monPlugin( "destroy" );

Oui, j'ai vu lors de mes recherches que certains plugins possédaient une telle méthode mais, à vrai dire, j'avais trouvé ça un peu compliqué... peut-être auriez-vous un exemple assez simple pour que je puisse l'intégrer dans mon projet ?

Citation:

Envoyé par danielhagnoul

Bonsoir
Mais un plugin bien conçu doit aussi supporter l'existence de plusieurs instances concomitantes.

Ha, là c'est plus qu'intéressant, ce serait en effet exactement ce qu'il me faudrait, mais, où puisse-je trouver un modèle de structure de plugin capable de supporter l'existence de plusieurs instances ?

J'ai réalisé mon plugin en m'inspirant d'un autre déjà existant mais, visiblement, suivant votre observation, ce code que j'ai pris en exemple ne doit pas être optimisé pour une utilisation avec des multiples instances.

Existe-t-il un endroit où on puisse trouver différentes modèles de structure de plugin jQuery à utiliser suivant les besoins dans nos projets ?

Malgré mes recherches, je n'ai rien trouvé sur le site officiel de jQuery.

Merci encore pour votre réponse, je continue mes recherches...

:D
17/03/2012, 11h12
danielhagnoul

Citation:

Malgré mes recherches, je n'ai rien trouvé sur le site officiel de jQuery.

:calim2:

Dans la FAQ : Comment puis-je écrire un plugin ?

Il y a un article : Adapter jQuery à vos besoins

J'ai un autre article, qui est prêt et qui va sans doute paraître prochainement, sur la construction d'un plugin multitâche.

Sauf si c'est un secret militaire ou s'il fait 600 lignes, je vous conseille de poster le code.
19/03/2012, 10h17
FredoMkb

Bonjour et merci beaucoup pour ta réponse :ccool:

Citation:

Envoyé par danielhagnoul

:calim2:

Dans la FAQ : Comment puis-je écrire un plugin ?

Il y a un article : Adapter jQuery à vos besoins

J'ai un autre article, qui est prêt et qui va sans doute paraître prochainement, sur la construction d'un plugin multitâche.

Merci pour ces liens fort instructifs, j'ai hâte de découvrir ton article, n'hésites pas à me tenir au courant dès qu'il sera en ligne :)

Citation:

Envoyé par danielhagnoul

Sauf si c'est un secret militaire ou s'il fait 600 lignes, je vous conseille de poster le code.

Non non, pas de secret d'État ni militaire, au contraire, c'est un projet libre et open-source que j'ai publié en ligne par ici : http://fredomkb.free.fr/qkdev/index.php?pge=101_qkGal

Une page démo par là : http://fredomkb.free.fr/qkdev/qkGal/index.html

Comme tu verras, il s'agit d'un tout petit code, assez basique, c'est mon tout premier plugin pour jQuery, donc forcément codé un peu maladroitement, mais pour une galerie simple ça marche assez bien :lol:

Évidemment, comme j'ai tenté de l'expliquer, les choses se compliquent un peu lorsque j'applique le plugin à plusieurs galeries... :(

Je dois sûrement faire quelques erreurs au niveau de la structure ou le fonctionnement du plugin, mais pour l'heure je suis incapable de savoir où et pourquoi.

Merci en tout cas pour ton message et pour les liens, ça va sûrement m'aider... enfin, j'espère :mouarf:
19/03/2012, 23h55
danielhagnoul

Bonsoir

$.fn.qkGal est une méthode du prototype de jQuery, il faut donc initialiser avec un sélecteur correct.

Vous initialisez avec un horrible $().qkGal() pour ensuite vous branchez sur les liens a de l' élément du DOM ayant la classe adéquate. :calim2:

Lorsqu'il y a plusieurs instances concomitantes, il y aura création d'autant de fragments du DOM qu'il y a d'instance donc nécessité d'avoir des ID uniques !

Bref, c'est toute la construction du plugin qui est à revoir en partant de zéro et en utilisant une boucle return this.each(), voir les liens que je vous ai donnés.

Le nouvel article est disponible depuis hier : http://www.developpez.net/forums/d11...elle-exemples/
20/03/2012, 09h19
FredoMkb

Citation:

Envoyé par danielhagnoul

Bref, c'est toute la construction du plugin qui est à revoir en partant de zéro et en utilisant une boucle return this.each(), voir les liens que je vous ai donnés.

Bon, bein :calim2: je n'ai plus qu'à revoir tout ça... j'espère y arriver 8-) merci en tout cas pour vos remarques constructives.

Citation:

Envoyé par danielhagnoul

Le nouvel article est disponible depuis hier : http://www.developpez.net/forums/d11...elle-exemples/

Wow 8O ça a l'air super complet mais, malheureusement, me connaissances en JavaScript et en jQuery sont trop limitées pour le moment pour que je puisse tout comprendre... en tout cas merci pour le lien, je le garde, il me sera sûrement utile dans quelques temps... enfin, j'espère ;)

Merci encore :)