Javascript Référence Compréhension

Question

J'ai appris quelques-unes des lacunes les plus détaillées de JS ici et là, et j'ai quelques choses dont j'ai besoin pour obtenir de l'aide.

;(function($){ 
    $.fn.makeRed1 = function() { 
     return $.each(this, function() { 
      $(this).css('background-color', '#FF0000'); 
     }); 
    } 
})(jQuery) 


;(function($){ 
    $.fn.makeRed2 = function() { 
     $(this).css('background-color', '#FF0000'); 
    } 
})(jQuery) 

Les deux de ces travaux correctement. Pourquoi? Toute personne qui parle d'écrire des plugins dit toujours d'utiliser la méthode 'return each'. Quelle est la raison? J'ai besoin de quelqu'un pour me dire exactement ce qui se passe lorsque chacune de ces méthodes est utilisée, afin que je puisse comprendre le flux.

Merci.

Answer 1

Dans le premier cas, vous renvoyez explicitement les résultats de chaque fonction. Chaque fonction itère sur les éléments correspondants et applique le rappel spécifié à chacun. La valeur de retour de la fonction est l'objet jQuery correspondant aux éléments sélectionnés. Cela vous permet de chaîner votre fonction nouvellement définie de la manière attendue par les utilisateurs de jQuery et d'appliquer des fonctions jQuery supplémentaires aux éléments sélectionnés.

Dans le second cas, vous avez une instruction simple qui applique le même rappel, bien que directement. Comme vous ne renvoyez rien, vous n'êtes pas en mesure de chaîner avec cette fonction. Cela brise le paradigme jQuery.

Answer 2

Sans la boucle each, votre fonction ne fonctionnera que sur le premier élément sélectionné. Bien que l'utilisation de each vous permette de manipuler plusieurs éléments sélectionnés avec un seul appel de méthode. La fin de votre fonction en renvoyant this est ce qui facilite le chaînage de méthode de style jQuery.

USING:

return this.each(function() { /* do stuff */ }); 

est juste un raccourci pour:

this.each(function(){ /* do stuff */); 
return this; 

Re: Commentaire: La raison pour laquelle pas en utilisant each fonctionne dans votre exemple, est parce que les utilisations de la méthode .css()each en interne. Si vous étiez en train de faire quelque chose de personnalisé, comme manipuler manuellement le DOM, ou des objets élément natifs, dans votre exemple de plugin, vous devrez utiliser chacun pour appliquer vos modifications à tous les éléments sélectionnés.

Answer 3

En fait la déclaration retour .each de $, vous permet de conserver l'élégant paradigme enchaînant jQuery, disons, vous avez deux personnalisés fonctions jQuery:

;(function($){ 
    $.fn.makeRed = function() { 
     return $.each(this, function() { 
      $(this).css('background-color', '#FF0000'); 
     }); 
    } 

    $.fn.makeBold = function() { 
     return $.each(this, function() { 
      $(this).css('font-weight', 'bold'); 
     }); 
    } 
})(jQuery) 

Vous pouvez écrire la déclaration suivante, par exemple, sans problème:

$(selector).makeRed().makeBold().show();