Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Read()-Methode von jQuery anstelle von nativem JS

Detaillierte Erläuterung der Read()-Methode von jQuery anstelle von nativem JS

高洛峰Original: 2016-12-07 14:00:17912Durchsuche

Vor jQuery 3.0 bestand die klassische Verwendung von „ready“ darin, eine anonyme Funktion wie diese zu verwenden:

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

jQuery 3.0 ready() changes

Vor der Veröffentlichung von jQuery 3.0 gab es die folgenden Methoden, die als „ready“-Methoden bezeichnet wurden:

Bearbeitung des Dokumentelements: $(document).ready(handler);

Auf leere Elemente operieren: $().ready(handler);

Oder direkt operieren (d. h. nicht auf ein bestimmtes Element): $(handler);

Alle oben Genannten Varianten sind funktionell gleichwertig. Unabhängig davon, um welches Element es sich handelt, wird der angegebene Handler aufgerufen, nachdem das DOM geladen wurde. Mit anderen Worten: Der Abschluss des DOM-Ladevorgangs bedeutet hier nicht, dass ein bestimmtes Element im Dokument, beispielsweise das img-Element, geladen wurde. Im Gegenteil bedeutet es hier, dass der gesamte DOM-Baum geladen wurde.

In jQuery 3.0 sind alle bereiten Methoden außer $(handler) veraltet.

Offizielle Aussage:

Dies liegt daran, dass der Selektor nicht mit ready() verbunden ist, was nicht nur ineffizient ist, sondern auch dazu führt, dass die Browser-Engine falsche Annahmen über das Verhalten dieser Methode trifft. .

Der Unterschied zwischen Ready-Event und Load-Event

Das Ready-Event wird ausgelöst, wenn das DOM geladen wird und auf das Element sicher zugegriffen werden kann. Andererseits wird das Ladeereignis ausgelöst, nachdem das DOM und alle Ressourcen geladen wurden.

Sie können das Ladeereignis wie folgt verwenden:

$(window).on("load", function(){
 // Handler when all assets (including images) are loaded
});

In diesem Fall müssen Sie nicht nur bis zum DOM warten Auf die Struktur kann vollständig zugegriffen werden, Sie müssen jedoch auch warten, bis alle Bildressourcen vollständig geladen sind (die Ladezeit hängt von der Größe der Bilddatei ab), bevor die Funktion ausgeführt werden kann.

Für normale DOM-Vorgänge benötigen Sie das Ladeereignis möglicherweise nicht. Wenn Sie jedoch beispielsweise einen rotierenden Laderstil anzeigen möchten, bevor alle Ressourcen geladen sind, oder JS zum Berechnen der Bildgröße verwenden möchten, ist dies der Fall könnte eine gute Wahl sein.

Möglicherweise benötigen Sie jQuery.ready() nicht

Die ready-Methode stellt sicher, dass Code nur ausgeführt wird, wenn alle DOM-Elemente sicher manipuliert werden können. Aber was bedeutet das? Das bedeutet, dass, wenn der js-Code, den Sie ausführen möchten, in ein bestimmtes Fragment in HTML eingebettet ist, der Browser auch die folgenden Elemente laden muss, bevor er ausgeführt werden kann.

Genau wie im folgenden Beispiel:

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>.ready() tutorial</title>
 <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script>
  $(function(){ // .ready() callback, is only executed when the DOM is fully loaded
  var length = $("p").length;
  // The following will log 1 to the console, as the paragraph exists.
  // This is the evidence that this method is only called when the
  // DOM is fully loaded
  console.log(length);
  });
 </script>
 </head>
 <body>
 <p>I&#39;m the content of this website</p>
 </body>
</html>

Wenn der Javascript-Code, den Sie ausführen möchten, am Ende des Körpers platziert wird, Sie müssen möglicherweise nicht die Methode ready() verwenden, da die DOM-Elemente, die Sie möglicherweise zu manipulieren und auf die Sie zugreifen möchten, wenn der Browser Javascript analysiert, bereits geladen wurden:

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>.ready() tutorial</title>
 </head>
 <body>
 <p>I&#39;m the content of this website</p>
 <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script>
  var length = $("p").length;
  // The following will log 1 to the console, as the paragraph exists.
  console.log(length);
 </script>
 </body>
</html>

Native JavaScript ready() ersetzt

Für moderne Browser und IE9+ können Sie die gleiche Funktion von ready() erreichen, indem Sie das DOMContentLoaded-Ereignis abhören:

document.addEventListener("DOMContentLoaded", function(){
 // Handler when the DOM is fully loaded
});

Bitte beachten Sie jedoch, dass der Rückruf nicht ausgeführt wird, wenn das Ereignis bereits ausgegeben wurde. Um sicherzustellen, dass der Rückruf immer ausgeführt wird, überprüft jQuery das Attribut „readyState“ der Dokumentreferenz. Wenn sich der Attributwert in „Abgeschlossen“ ändert, wird die Rückruffunktion sofort ausgeführt:

var callback = function(){
 // Handler when the DOM is fully loaded
};
 
if (
 document.readyState === "complete" ||
 (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
 callback();
} else {
 document.addEventListener("DOMContentLoaded", callback);
}

Enthält die domReady-Bibliothek, die diese Lösung bereits implementiert.

Alte Version des IE-Browsers

Für Browser IE8 und niedriger können Sie das onreadystatechange-Ereignis verwenden, um das readyState-Attribut des Dokuments zu überwachen:

document.attachEvent("onreadystatechange", function(){
 // check if the DOM is fully loaded
 if(document.readyState === "complete"){
 // remove the listener, to make sure it isn&#39;t fired in future
 document.detachEvent("onreadystatechange", arguments.callee);
 // The actual handler...
 }
});

Oder Sie können das Load-Ereignis wie jQuery verwenden, das in jedem Browser funktioniert. Dies führt auch zu einer Verzögerung, da darauf gewartet wird, dass alle Assets geladen werden.

Beachten Sie, dass Sie in dieser Lösung auch readyState überprüfen, wie oben erwähnt, um sicherzustellen, dass der Rückruf immer ausgeführt werden kann.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Analyse der AngularJS-Komprimierungs-JS-TechnikenNächster Artikel：Analyse der AngularJS-Komprimierungs-JS-Techniken

In Verbindung stehende Artikel

Mehr sehen