webentwicklung-frage-antwort-db.com.de

JQuery-Best Practice: Verwenden von $ (document) .ready in einem IIFE?

Ich betrachte ein Stück Code:

(function($) {    
   // other code here    
 $(document).ready(function() {   
    // other code here    
  });    
})(jQuery);

Obwohl der IIFE die Funktionen von $ (document) .ready ausführt, ist dieser Code korrekt? oder kann ich einfach das $ (document) .ready entfernen und den Code direkt in den IIFE einfügen.

jquerydocument-readyiife
26
webmedia

Nein, IIFE führt den Code in document ready nicht aus.

1. Nur in IIFE:

(function($) {
  console.log('logs immediately');
})(jQuery);

Dieser Code wird sofort ausgeführt und protokolliert "Protokolle sofort", ohne dass das Dokument bereit ist.

2. Innerhalb bereit:

(function($) {
   $(document).ready(function(){
     console.log('logs after ready');
   });
})(jQuery);

Führt den Code sofort aus und wartet auf Dokumentbereitschaft und protokolliert "Protokolle nach Fertigstellung".

Dies erklärt besser zu verstehen:

(function($) {
  console.log('logs immediately');
  $(document).ready(function(){
    console.log('logs after ready');
  });
})(jQuery);

Dies protokolliert sofort nach dem Laden des Fensters "Protokolle sofort" in der Konsole. Das Protokoll "Logs after ready" wird jedoch erst protokolliert, wenn das Dokument fertig ist.

IIFE ist keine Alternative für ready:

Die Alternative für $(document).ready(function(){}) ist:

$(function(){
   //code in here
});

Aktualisieren

Ab jQuery Version 3.0 wurde der Ready-Handler geändert.

Es wird nur die folgende Form des Ready-Handlers empfohlen.

jQuery(function($) {

});

Ready Handler ist jetzt asynchron.

$(function() {
  console.log("inside handler");
});
console.log("outside handler");

> Äußerer Handler

> im Handler

47
Bhojendra Rauniyar
  • Wenn Sie DOM benötigen, müssen Sie $(function() {/* DOM Manipulations goes here}) verwenden.
  • Wenn Sie eine Namenskollision vermeiden möchten, können Sie den Code mit IIFE (function($) {/* safely use $ here*/}(jQuery)) umschließen.

Und Sie können beide Ansätze kombinieren:

(function($) {
    /*Do smth that doesn't require DOM to be ready*/

    $(function() {
        /*Do the rest stuff involving DOM manipulations*/
    });

}(jQuery));
6
Yury Tarabanko

IIFE muss einen weiteren Bereich erstellen. Wenn Sie IIFE entfernen und $ nicht definiert wird (dh jQuery.noConflict()), erhalten Sie eine Fehlermeldung. jQuery wird überall dort definiert, wo die Javascript-Datei mit Bibliothek geladen wurde.

Es ist also keine jQuery-Best-Practice, es ist eine JavaScript-Best-Practice.

1
Pinal

IIFE führt die Funktionen aus, wenn der Execution Context (Bereich des aktuellen Codes, der gerade ausgewertet wird) bereit ist. Lesen Sie den Artikel über Code Organization Concepts in jQuery, in dem die beiden am häufigsten vorkommenden Muster, The Object Literal und The Module Pattern , beschrieben werden.

0
Danijel