Pourquoi ces deux manières d'écrire un équivalent de plug-in jQuery?
Première manière:
$.fn.myplugin = function () {
return $(this).each(function() {
return $(this).bind("click", function () {
console.log("Hi");
});
});
};
Deuxième manière:
$.fn.myplugin = function () {
return this.bind("click", function () {
console.log("Hi2");
});
};
Réponses:
7 pour la réponse № 1Réduisons de l’un à l’autre:
$.fn.myplugin = function () {
return $(this).each(function() {
return $(this).bind("click", function () {
console.log("Hi");
});
});
};
Quand vous commencez votre fonction this est un objet jQuery, donc $(this) ne vous achète rien, il pourrait facilement devenir:
$.fn.myplugin = function () {
return this.each(function() {
return $(this).bind("click", function () {
console.log("Hi");
});
});
};
Vous dites donc "Pour chaque élément de l'objet jQuery, créez un objet jQuery et liez un événement à cet objet".
Si vous regardez dans bind, il appelle on, qui exécute une certaine logique et effectue finalement cette ligne:
return this.each( function() {
jQuery.event.add( this, types, fn, data, selector );
});
Cela signifie que l'événement sera appliqué à chaque élément de cet objet jQuery. Vous dites donc:
Donc, vous dites "Pour chaque élément de l'objet jQuery, créez un objet jQuery, et pour chaque élément de cet objet jQuery lier un événement à cet élément ".
Vous faites maintenant une boucle deux fois, une fois dans une liste de N des éléments et ensuite N fois dans les listes de 1 élément. En fait, vous pouvez tout simplement lier directement:
$.fn.myplugin = function () {
return this.bind("click", function () {
console.log("Hi2");
});
};
Et c'est bien sûr le code final.
3 pour la réponse № 2
Dans votre cas, il n'y a pas de réelle différence, à part le fait que vous créez un nouvel objet jQuery dans votre premier extrait sans raison valable (this est un objet jQuery, donc pas besoin d'utiliser $(this)).
En général, c’est une bonne idée d’utiliser return this.each(...); dans votre fonction plugin pour que tout reste chaînable et que votre code fonctionne, quel que soit le nombre d’éléments présents dans l’objet jQuery sur lequel la fonction de votre plugin a été appelée.
Retour this.bind(...) conserve également la possibilité de chaînage, mais pour un plugin plus complexe qui ne lie pas simplement un événement, les choses sont souvent plus lisibles avec each boucle.
1 pour la réponse № 3
Il n'y a aucune différence entre les deux.
Pour une raison quelconque, dans l’un d’eux, vous faites une boucle, mais au final, ils ont le même résultat.
1 pour la réponse № 4
Ils sont équivalents car dans un plugin jQuery, this est l'objet jQuery, donc faire $(this) ne fait rien.
.bind travaillera sur tous les éléments d'un objet jQuery, et quand vous le ferez .each vous appelez .bind sur chaque élément individuellement.
Ils sont donc équivalents, car ils lient les éléments et leur lient des événements.
Je suggère d’utiliser le deuxième, c’est plus propre et plus rapide.