Javascript Reference Comprehension

Question

Ich habe einige der ausführlicheren Schlupflöcher von JS hier und dort gelernt, und habe ein paar Dinge, die ich brauche, um Hilfe zu bekommen.

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


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

Beide dieser Arbeit richtig. Warum?

Jeder, der über das Schreiben von Plugins spricht, sagt immer die Methode "return each". Was ist der Grund? Ich brauche jemanden, der mir genau sagt, was passiert, wenn jede dieser Methoden verwendet wird, damit ich den Fluss verstehen kann.

Danke.

Answer 1

Im ersten Fall geben Sie die Ergebnisse der einzelnen Funktionen explizit zurück. Die einzelnen Funktionen durchlaufen die übereinstimmenden Elemente und wenden den jeweils angegebenen Rückruf an. Der Rückgabewert der Funktion ist das jQuery-Objekt, das den ausgewählten Elementen entspricht. Dadurch können Sie die neu definierte Funktion so verketten, wie die Benutzer von jQuery erwarten und zusätzliche jQuery-Funktionen auf die ausgewählten Elemente anwenden.

Im zweiten Fall haben Sie eine einfache Anweisung, die denselben Callback anwendet, wenn auch direkt. Da Sie nichts zurückgeben, können Sie diese Funktion nicht ketten. Dies bricht das jQuery-Paradigma.

Answer 2

Ohne die each Schleife funktioniert Ihre Funktion nur mit dem ersten ausgewählten Element. Mithilfe von each können Sie mehrere ausgewählte Elemente mit einem einzigen Methodenaufruf bearbeiten.

Das Beenden der Funktion, indem this zurückgegeben wird, erleichtert die Verkettung der jQuery-Stilmethode.

Verwendung:

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

ist nur eine Abkürzung für:

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

Re: Kommentar: Der Grund, warum nichteach Werke in Ihrem Beispiel verwendet wird, ist, weil die .css() Methode verwendet each intern. Wenn Sie in Ihrem Beispiel-Plug-in tatsächlich etwas Brauchbares wie das manuelle Bearbeiten des DOM oder nativer Element-Objekte verwenden, müssen Sie jedes verwenden, um Ihre Änderungen auf alle ausgewählten Elemente anzuwenden.

Answer 3

Grundsätzlich ist der return $ .each Anweisung, können Sie die elegante jQuery Verkettungs Paradigma erhalten, lassen Sie uns sagen, Sie haben zwei benutzerdefinierte jQuery-Funktionen:

;(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) 

Sie könnten die folgende Anweisung zum Beispiel schreiben, ohne Problem:

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