Warum muss ich meinen JQuery-Code in ein Funktionsliteral einpacken?

Question

Ich habe folgenden Code, der funktioniert -

$(function(){
    $('#testbutton').click(function(){
        var checkedValue = $('[name="someRadioGroup"]:radio:checked').val();
        $('#result').html('Das Radioelement mit dem Wert ' + checkedValue + ' ist ausgewählt');
    });
});

Ich verstehe, dass $('#testbutton') das HTML-Element mit der ID testbutton abruft und einen Ereignisverarbeiter zuweist.

Aber ich verstehe nicht, warum ich diesen Code in eine Funktionsliterale setzen muss?

Wenn ich das $(function(){ entferne (und das entsprechende }); ) funktioniert es nicht.

Andere Codes können jedoch ohne in eine Funktionsliteral eingewickelt zu sein funktionieren. Beispiel - alert('Hallo')

Was ist der Unterschied? Warum funktioniert alert, aber die Ereigniszuweisung nicht?

Answer 1

$(function(){...}); ist eine Abkürzung für $(document).ready(function(){...});. Der Zweck davon ist es, Ihren Code nicht auszuführen, bis die Elemente, mit denen Sie arbeiten möchten, im DOM existieren (was normalerweise nachdem das Dokument bereit ist, der Fall ist.)

Answer 2

Es ist keine Voraussetzung.

Sie platzieren Ihren Code in einem Ereignis-Handler, der aufgerufen wird, wenn das DOM bereit ist.

Wenn Sie Ihren Code nicht in einem DOM-Bereit-Handler platzieren und Ihr Code eine DOM-Auswahl durchführt, müssen Sie eine andere Möglichkeit finden, um sicherzustellen, dass das DOM bereit ist, bevor es ausgeführt wird.

Wenn Ihr Code keine DOM-Auswahl durchführt, ist dies nicht erforderlich. Deshalb funktioniert Ihr alert(), weil es keine Elemente abrufen muss.

Ein Alternativvorschlag ist dieser.

   Klick

Dies platziert Ihren Code unter allen Elementen auf der Seite, so dass sie sicher verfügbar sind, wenn Ihr Code ausgeführt wird.

Ein weiterer Alternativvorschlag ist die Verwendung eines window.onload Handlers.

window.onload = function() {
    // Ihr Code
};

oder unter Verwendung von jQuery.

$(window).on("load", function() {
    // Ihr Code
});

Dies ist ähnlich wie der DOM-Bereit-Handler, wartet jedoch darauf, dass alle Ressourcen wie Bilder geladen sind.

Answer 3

Auf der grundlegendsten Ebene ist etwas in der Form (function(){...})() eine Funktionsliteral, die sofort ausgeführt wird. Das bedeutet, dass Sie eine Funktion definiert haben und sie sofort aufrufen.

Diese Form ist nützlich für die Informationsversteckung und die Kapselung, da alles, was Sie innerhalb dieser Funktion definieren, lokal für diese Funktion bleibt und von der Außenwelt nicht zugänglich ist (es sei denn, Sie exposen es ausdrücklich - normalerweise über ein zurückgegebenes Objektliteral).

Eine Variation dieser Grundform ist das, was Sie bei jQuery-Plugins sehen (oder im allgemeinen in diesem Modulmuster). Da Sie ein Funktionsliteral definieren, hat es keinen Zugriff auf nichts aus der Außenwelt, es sei denn, Sie übergeben die Informationen explizit. Daher:

(function($) {
  ...
})(jQuery);

Was bedeutet, dass Sie eine Referenz auf das tatsächliche jQuery-Objekt übergeben, aber es ist als $ innerhalb des Funktionsliterals bekannt.