it-swarm.com.de

Wann sollte ich die Funktion document.ready von jQuery verwenden?

Ich wurde aufgefordert, document.ready zu verwenden, als ich anfing, Javascript/jQuery zu verwenden, aber ich habe nie wirklich gelernt, warum.

Könnte jemand einige grundlegende Richtlinien dazu geben, wann es Sinn macht, Javascript/Jquery-Code in jQuery's document.ready zu packen? 

Einige Themen, die mich interessieren:

  1. die .on()-Methode von jQuery: Ich verwende die .on()-Methode für AJAX ziemlich oft (normalerweise bei dynamisch erstellten DOM-Elementen). Sollten die .on()-Click-Handler immerinsidedocument.ready sein?
  2. Leistung: Ist es leistungsfähiger, verschiedene JavaScript-/jQuery-Objekte inside oder outside document.ready beizubehalten (ist auch der Leistungsunterschied signifikant?)?
  3. Objektumfang: Mit AJAX geladene Seiten können nicht auf Objekte zugreifen, die inside des Dokuments der vorherigen Seite waren. Sie können nur auf Objekte zugreifen, die außerhalb document.ready (d. H. Wirklich "globale" Objekte) waren. 

Update: Um eine bewährte Methode zu befolgen, befindet sich mein Javascript (die jQuery-Bibliothek und der Code meiner App) im bottom meiner HTML-Seite. Ich verwende das defer-Attribut für die jQuery-enthaltende Skripts auf meinen mit AJAX geladenen Seiten, damit ich auf die jQuery-Bibliothek auf diesen Seiten zugreifen kann.

102
tim peterson

In einfachen Worten

$(document).ready ist ein Ereignis, das ausgelöst wird, wenn document .__ ist. bereit.

Angenommen, Sie haben Ihren jQuery-Code im Abschnitt head abgelegt und versucht, auf ein dom-Element (Anker, Img usw.) zuzugreifen. Sie können darauf nicht zugreifen, da html von oben nach unten interpretiert wird und Ihre HTML-Elemente nicht vorhanden sind, wenn Ihr jQuery-Code wird ausgeführt.

Um dieses Problem zu überwinden, platzieren wir jeden jQuery/Javascript-Code (der DOM verwendet) in der Funktion $(document).ready, die aufgerufen wird, wenn auf alle dom-Elemente zugegriffen werden kann.

Und das ist der Grund, wenn Sie Ihren jQuery-Code am unteren Rand platzieren (nach allen dom-Elementen, kurz vor </body>). Es besteht keine Notwendigkeit für $(document).ready

Die on-Methode muss nur dann in $(document).ready eingefügt werden, wenn Sie die on-Methode für document verwenden.

    //No need to put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

EDIT

Von Kommentaren,

  1. $(document).ready wartet nicht auf Bilder oder Skripte. Das ist der große Unterschied zwischen $(document).ready und $(document).load

  2. Nur Code, der auf das DOM zugreift, sollte sich im Ready-Handler befinden. Wenn es sich um ein Plugin handelt, sollte es nicht im Ready-Event sein.

138
Jashwant

Antworten:

die .on () -Methode von jQuery: Ich verwende die .on () -Methode für AJAX ziemlich viel (Dynamische Erstellung von DOM-Elementen). Sollte das .on () -Handler klicken immer in document.ready sein?

Nein nicht immer. Wenn Sie Ihren JS in den Dokumentenkopf laden, müssen Sie dies tun. Wenn Sie die Elemente nach dem Laden der Seite über AJAX erstellen, müssen Sie dies tun. Wenn sich das Skript unter dem HTML-Element befindet, müssen Sie auch einen Handler hinzufügen.

Leistung: Ist es leistungsfähiger, verschiedene Javascript/jQuery .__ zu behalten? Objekte innerhalb oder außerhalb von document.ready (ist auch der Leistungsunterschied signifikant?)?

Es hängt davon ab, ob. Es dauert genauso viel Zeit, um die Handler anzuschließen. Es hängt nur davon ab, ob sie beim Laden der Seite sofort ausgeführt werden soll oder ob sie warten soll, bis das gesamte Dokument geladen ist. Es hängt also davon ab, was Sie sonst noch auf der Seite tun.

Objektumfang: Mit AJAX geladene Seiten können nicht auf Objekte innerhalb von .__ zugreifen. Das Dokument der vorherigen Seite. Sind Sie richtig? Sie können nur auf Objekte zugreifen welche waren außerhalb von document.ready (d. h. wirklich "globale" Objekte)?

Es ist im Wesentlichen eine eigene Funktion, daher kann nur auf Variablen zugegriffen werden, die in einem globalen Bereich (außerhalb/vor allen Funktionen) oder mit window.myvarname = ''; deklariert sind.

7
Justin

Bevor Sie jQuery sicher verwenden können, müssen Sie sicherstellen, dass sich die Seite in einem Zustand befindet, in dem ready bearbeitet werden kann. Mit jQuery erreichen wir dies, indem wir unseren Code in eine Funktion einfügen und diese Funktion dann an $(document).ready() übergeben. Die Funktion, die wir übergeben, kann nur eine anonyme Funktion sein.

$(document).ready(function() {  
    console.log('ready!');  
});

Dadurch wird die Funktion ausgeführt, die wir an .ready () übergeben, sobald das Dokument fertig ist. Was ist denn hier los? Wir verwenden $ (document), um ein jQuery-Objekt aus dem Dokument unserer Seite zu erstellen. Dann rufen wir die .ready () - Funktion für dieses Objekt auf und übergeben die Funktion, die wir ausführen möchten.

Wenn Sie dies vorziehen, gibt es eine Abkürzungsmethode. Wenn Sie es vorziehen, gibt die Funktion $ () die doppelte Aufgabe als Alias ​​für $ (document) .ready (), wenn Sie eine Funktion übergeben:

$(function() {  
    console.log('ready!');  
});  

Dies ist eine gute Lektüre: Jquery Fundamentals

5
Tom Sarduy

.ready () - Geben Sie eine Funktion an, die ausgeführt werden soll, wenn das DOM vollständig geladen ist.

$(document).ready(function() {
  // Handler for .ready() called.
});

Hier ist eine Liste der all jQuery-Methoden

Lesen Sie weiter Einführung in $ (document) .ready ()

3
Dipak

Um realistisch zu sein, wird document.ready nicht für etwas anderes als das genaue Manipulieren des DOMs benötigt und es ist nicht immer erforderlich oder die beste Option. Was ich damit meine, ist, dass wenn Sie beispielsweise ein großes jQuery-Plugin entwickeln, Sie es im gesamten Code kaum verwenden, weil Sie versuchen, es trocken zu halten, so dass Sie in Methoden abstrahieren, die das DOM manipulieren, aber aufgerufen werden sollen später. Wenn der gesamte Code eng integriert ist, ist die einzige in document.ready offengelegte Methode normalerweise init, bei der die gesamte DOM-Magie geschieht. Hoffe, das beantwortet deine Frage.

3
elclanrs

Sie sollten alle Aktionen in document.ready binden, da Sie warten sollten, bis das Dokument vollständig geladen ist.

Sie sollten jedoch Funktionen für alle Aktionen erstellen und diese innerhalb des Dokuments aufrufen. Wenn Sie Funktionen (Ihre globalen Objekte) erstellen, rufen Sie sie jederzeit auf. Wenn Sie also Ihre neuen Daten geladen und neue Elemente erstellt haben, rufen Sie diese Funktionen erneut auf.

Bei diesen Funktionen haben Sie die Ereignisse und Aktionselemente gebunden.

$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}
0
Pulkit Mittal

Ich habe einen Link an ein div angehängt und wollte einige Aufgaben mit dem Klick erledigen. Ich habe den Code unter dem angefügten Element in das DOM eingefügt, aber es hat nicht funktioniert. Hier ist der Code:

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

Es hat nicht funktioniert. Dann habe ich den jQuery-Code in $ (document) .ready eingefügt und es hat perfekt funktioniert. Hier ist es.

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert('Link Clicked');
    });
});
0
Safeer Ahmed