web-dev-qa-db-fra.com

Meilleure pratique JQuery, en utilisant $ (document) .ready dans un IIFE?

Je regarde un morceau de code:

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

Je pense que le IIFE utilise les fonctions de $ (document) .ready, ce code est-il correct? ou puis-je simplement supprimer le $ (document) .ready et placer le code directement à l'intérieur de l'IIFE.

jquerydocument-readyiife
26
webmedia

Non, IIFE n'exécute pas le code dans le document prêt.

1. Juste en IIFE:

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

Ce code exécute immédiatement les journaux "journaux immédiatement" sans que le document soit prêt.

2. prêt à:

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

Exécute le code immédiatement et attend le document prêt et enregistre les "journaux après prêt".

Cela explique mieux à comprendre:

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

Cela enregistre "immédiatement les journaux" sur la console immédiatement après le chargement de la fenêtre, mais les "journaux après l'état prêt" ne sont consignés qu'une fois le document prêt.

IIFE n'est pas une alternative pour prêt:

L'alternative pour $(document).ready(function(){}) est:

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

Mettre à jour

À partir de la version 3.0 de jQuery, le gestionnaire prêt est modifié.

Seule la forme suivante de gestionnaire prêt est recommandée.

jQuery(function($) {

});

Le gestionnaire Ready est maintenant asynchrone.

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

> manutentionnaire extérieur

> manipulateur intérieur

47
Bhojendra Rauniyar
  • Si vous avez besoin de DOM pour être prêt, vous devez utiliser $(function() {/* DOM Manipulations goes here})
  • Si vous voulez éviter une sorte de collision de noms, vous pouvez envelopper le code avec IIFE (function($) {/* safely use $ here*/}(jQuery))

Et vous pouvez combiner les deux approches:

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

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

}(jQuery));
6
Yury Tarabanko

IIFE doit créer une autre étendue. Si vous supprimez IIFE et $ ne sera pas défini (c'est-à-dire jQuery.noConflict()) - vous obtiendrez une erreur. jQuery sera défini partout où le fichier javascript avec la bibliothèque a été chargé.

Donc, ce n'est pas la meilleure pratique jQuery, c'est une meilleure pratique javascript.

1
Pinal

IIFE exécute les fonctions lorsque Contexte d'exécution (la portée du code en cours d'évaluation) est prêt. Consultez l'article sur Concepts d'organisation de code dans jQuery qui décrit les deux modèles les plus courants, Le littéral d'objet et Le modèle de module , et comment les utiliser.

0
Danijel