Wie soll ich jQuery initialisieren?

Lesezeit: 4 Minuten

Benutzer-Avatar
Reigel Gallarde

Ich habe das gesehen (ich benutze es auch):

$(document).ready(function(){
   // do jQuery
})

und auch das (ich habe es in letzter Zeit versucht):

(function(){
   // do jQuery
})(jQuery)

beide funktionieren gut.

Was ist der Unterschied der beiden (außer wie es aussieht)?

Welches ist besser zu verwenden?

Das zweite Beispiel, das Sie zeigen, ist eine selbstausführende anonyme Funktion. Jede einzelne JS-Datei, die Sie verwenden, würde wahrscheinlich davon profitieren. Es bietet einen privaten Bereich, in dem alles, was Sie erklären, mit dem var Schlüsselwort bleibt nur innerhalb dieses Bereichs:

(function($){
   var special = "nice!";
})(jQuery);

alert(special); // would be undefined

Das erste Beispiel ist eine Abkürzung für $(document).ready die ausgelöst wird, wenn das DOM manipuliert werden kann.

Ein paar coole Dinge dazu. Erstens können Sie es innerhalb der selbstausführenden Funktion verwenden:

(function($){
   $(function(){
      // Run on DOM ready
   });

   // Run right away
})(jQuery);

Zweitens, wenn Sie nur ein paar Zeilen in document ready benötigen, können Sie sowohl den privaten Bereich als auch die DOM-Ready-Funktion wie folgt kombinieren:

jQuery(function($){
   // $ = jQuery regardless of what it means
   // outside this DOM ready function
});

  • Hmm, interessiert zu wissen, wann Ihr Beispiel – (function($){$(function(){ würde nützen?

    – Dr. Frankenstein

    20. Juni 2010 um 23:31 Uhr


  • Jedes Mal, wenn Sie Code haben, der sofort ausgeführt werden muss und zusätzlich dokumentbereit ist, ist es eine gute Idee, die gesamte Datei einzuschließen (function ($) { ... }(jQuery)) und dann können Sie verwenden $ wo immer Sie es brauchen, ohne potenzielle Konflikte. Dann, wenn Sie es brauchen DOM Ready Sie verwenden nur $(function () { ... })

    – Doug Neiner

    21. Juni 2010 um 0:00 Uhr

  • Diese Antwort gefällt mir sehr! Viele Informationen, während die akzeptierte Antwort nett ist, ist Ihre … na ja, cooler und fügt meiner Programmierung einen Mehrwert hinzu … danke … das einzige, was fehlt, ist der Noob, wie ich es von HTML aus nenne …

    – Ken

    23. Juli 2020 um 3:10 Uhr


Benutzer-Avatar
Jakob Relk

Das erste Beispiel führt die Funktion aus, wenn der DOM-Baum erstellt wird. Das zweite Beispiel führt die Funktion sofort aus.

Wenn Sie genau hinsehen, befinden sich im zweiten Beispiel zwei Klammern nach der Funktionsdeklaration (in diesem speziellen Fall übergeben Sie die Datei global jQuery object als Argument, um Konflikte zu vermeiden), wodurch die Funktion sofort aufgerufen wird

Die richtige zu verwendende Funktion hängt davon ab, wann die Funktion ausgeführt werden soll. Wenn Sie eine Funktion ausführen möchten DOMReady ( das ready event ), können Sie verwenden $( document ).ready wie Sie erwähnt haben oder die Kurzschrift $( function() {...} ).

Andernfalls, wenn Sie eine Funktion sofort ausführen möchten und einen anonymen Funktionsumfang haben, verwenden Sie das zweite Beispiel.

Zusätzlich zu allen vorherigen Antworten verfügt jQuery über drei Initialisierungsmethoden, die verwendet werden können:

Die traditionelle Methode, die mit den meisten Browsern kompatibel ist, siehe Code:

$(document).ready(function () {

        });

Die Kurzmethode, siehe Code:

$(function () {

        });

Die implizite Methode, siehe Code:

$().ready(function () {

        });

Sie alle funktionieren für moderne Browser und sind sicher zu verwenden.

Ich verwende immer die erste. Die zweite scheint eine Möglichkeit zu sein, sich davor zu schützen, dass jquery überschrieben wird. Ein Grund dafür könnte sein, dass Sie nicht wissen, welche anderen Skripts auf der Seite geladen werden. Wenn Ihr ganzes Zeug beispielsweise von jquery 1.3 abhängt und Sie sich in einer Umgebung befinden, in der Sie nicht die gesamte Seite kontrollieren, könnte Ihr Code brechen, wenn jemand jquery 1.4 lädt. Klingt hässlich, aber so etwas passiert. Sie können also Ihren Hintern abdecken, indem Sie unmittelbar nach dem Laden von jquery einen Abschluss erstellen und Ihre Version von jquery in diesem Abschluss halten. Ich denke, das ist es, was im zweiten Beispiel passiert.

Keiner von beiden initialisiert tatsächlich jquery. Jquery kümmert sich selbst um jede benötigte Initialisierung. Sie würden trotzdem höchstwahrscheinlich das erste Beispiel verwenden, selbst wenn Sie das zweite verwenden würden, Sie würden nur das $(document).ready setzen Innerhalb die Funktion in Ihrem zweiten Beispiel.

Obwohl es sich um eine alte Konversation handelt, möchte ich meinen Weg zur Initialisierung von jQuery teilen

;(function($, window, document) {

    // Your Code Goes Here

}(window.jQuery, window, document));

So können Sie sicher sein, dass nichts schief gehen kann.

1257430cookie-checkWie soll ich jQuery initialisieren?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy