Instincts initiaux Dites-moi que l'ajout d'un auditeur, en utilisant une méthode d'événement simple ou une méthode d'événement simple à un ensemble d'éléments jQuery, tels que ..
est beaucoup plus approprié que d'utiliser une méthode $. Cherchez un auditeur un par un à un même ensemble, comme ... p> mais en ce qui concerne le développement du plugin, et vous avez affaire à Possibilité d'utilisateurs appelant une instance de votre plugin plusieurs fois à plusieurs reprises tout au long de la vie d'une page, à la charge de la page et à la charge de la page Ajax longue, est-elle fausse d'appliquer des gestionnaires à chaque élément lui-même, plutôt que d'essayer de résumer les gestionnaires à leur global Ensemble de classe? p> Ma question principale que je traite est "Quelle est la meilleure façon de faire face à de multiples instances d'un plugin appelé lorsqu'il s'agit de manipuler les événements? Pour réduire la charge de travail?" Je sais que nous pouvons lier et gidonner, mais y a-t-il une meilleure façon? P> Code partiel de la construction de plug-in P> $ ('. Nom de classe); code> p> $ ( '.classname'). chacun (fonction () {$ (ceci) .Cliquez sur (funcname);}); code> p> init : function(){
this.each(function(opts){
// adding event handlers here removes
// the need to worry about multiple instances
// and duplicate handles over the lifetime of the page
});
// adding 'global' handlers here may/may not be more
// efficient, but adds an issue of multiple instances
return this;
}
4 Réponses :
Votre question concerne "l'efficacité" que je suppose signifie "vitesse sur le client". Une approche raisonnable aura probablement un impact minimal sur les performances perçues. Je vous recommande donc de choisir le modèle de codage qui est le plus facile à entretenir.
$('.className').each(function(){ $(this).click(funcName); });
Si vous appelez Voici le code de la jQuery Source (c'est le Notez que la technique la plus utiliserait une délégation d'événement avec le même ceci signifie "pour chaque clic à l'intérieur de Cliquez sur une fois, JQuery va boucler toute la collection et lier les événements individuellement. Cependant, , il le fera plus efficacement que votre alternative, car elle ne construit pas un nouvel objet JQuery pour chaque élément de l'ensemble, qui sera très lent. sur méthode): jquery.event.add , Quelle est la méthode qui fait le levage lourd, n'a pas besoin d'un objet JQuery; L'objet ordinaire DOM est ce dont il a besoin. Cette boucle (ce qui fait efficacement la même chose que la vôtre) est beaucoup supérieure en termes d'efficacité, car le gros goulot d'étranglement de votre code est $ (this) être appelé à chaque fois. sur < / code> méthode. Cela pourrait ressembler à ceci: document.body , vérifiez s'il s'agit d'un élément correspondant à un élément correspondant au Sélecteur .ClassName , et si vous exécutez funcname ". Vous pouvez remplacer document.body avec tout autre élément contenant tous les éléments .ClassName "/ code> éléments" / p>
Pouvez-vous donner un exemple de ce qui ressemblerait?
Merci pour cette réponse, c'est certainement une bonne information sur la façon dont les choses sont courues en interne. Cependant, je suis plus préoccupé par la portée du plugin des choses. La méthode générale «init» pour le développement du plugin utilisera $. Construisez-vous de toute façon, donc je dois déjà faire une boucle de l'élément défini. La question est de savoir s'il faut lier les événements dans la boucle, ou dans le monde entier. Je vais modifier ma question à expliquer ...
"... construire un nouvel objet JQuery pour chaque élément de l'ensemble, qui sera très lent." Ce n'est pas vrai - faire $ (this) dans un chacun est si petit d'un succès de performance, il ne vaut pas la peine d'être inquiété.
@ josh3736 Cela dépend de la taille de l'application. L'utilisation de JQuery Objects est un gros problème dans le développement JavaScript actuel. Cela peut être une petite performance frappé seul, mais cela ajoute et vaut la peine d'éviter.
@Freesheyeball, dans la question que j'ai liée, vous verrez que même sur un grand nombre d'appels irréaliste (milliers par seconde) sur $ (this) , le succès de la performance n'est que de 7%. (Si vous attachez des milliers de gestionnaires d'événements, il y a un problème beaucoup plus important.) Le point ici est que c'est probablement une optimisation prématurée; Ne faites pas de développement et de maintenance un cauchemar en ajoutant de la complexité pour les gains minuscules d'exécution.
7% est assez grand pour s'inquiéter de mon livre, car cela pourrait être des milliers de personnes. Mais je suis d'accord avec vous sur la maintenabilité. Personnellement, j'utilise personnellement le modèle où il a du sens pour moi et si je sais qu'il y a un nombre raisonnable d'appels, ce n'est pas un gros problème. Cependant, cet utilisateur a posé la question de savoir ce qui est plus efficace, alors je me tiens à ma réponse. De plus, si ce n'est pas l'utilisation .uite est une option, sa réellement moins complexe.
Le seul moyen de connaître est de Profil It . Cependant, je parierais que ceci est un exercice d'optimisation prématurée.
appeler Si c'est plus facile et plus propre pour attacher vos gestionnaires dans un $ (this) dans une boucle a une performance d'exécution négligeable Hit . < / p>
chaque boucle, faites-le.
$ ('. Nom de classe'). Cliquez sur utilisera probablement.Chafe () en interne à un moment donné.Je me suis demandé cela en fait ...
Voir: GITUB.COM/JQUERY/JQUERY/BLOB/ 1.7.2 / SRC / Event.js # L936 (
.Cliquez sur Appels.on ).Tout se résume à
AddeventListener ouATTACHEVENTES à une autre étape, qui est un élément B / W 1-1 et le gestionnaire, donc$ ('. Nom de classe' ) sera itéré interne à un moment donné pour lier le gestionnaire respectif.