Meilleures pratiques jQuery en cas de $('document').ready

Question

Je faisais des recherches sur les meilleures pratiques de jQuery et j'ai trouvé este article par Greg Franko

Normalement, c'est le cas :

$("document").ready(function() {
    // The DOM is ready!
    // The rest of the code goes here
});

Mais l'article recommande d'utiliser :

// IIFE - Immediately Invoked Function Expression
(function($, window, document) {

    // The $ is now locally scoped 

    // Listen for the jQuery ready event on the document
    $(function() {

        // The DOM is ready!

    });

    // The rest of the code goes here!

}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter

Je vois les commentaires, mais je n'arrive pas à comprendre ce qu'ils disent exactement.

Quelle est donc la meilleure approche et pourquoi ?

Je sais que les deux méthodes fonctionneront, mais comment la seconde devient-elle la meilleur ?

Answer 1

Expressions de fonctions immédiatement invoquées (IIFE)

Les IIFE sont une solution idéale pour marquer localement les variables/propriétés globales et protéger votre base de code JavaScript contre les interférences extérieures (par exemple, les bibliothèques tierces). Si vous écrivez du code jQuery qui sera exécuté dans de nombreux environnements différents (par exemple, des plugins jQuery), il est important d'utiliser un IIFE pour délimiter localement jQuery, car vous ne pouvez pas supposer que tout le monde utilise le $ pour aliaser jQuery. Voici comment procéder :

   // IIFE - Immediately Invoked Function Expression
  (function($, window, document) {
      // The $ is now locally scoped

      // The rest of your code goes here!

  }(window.jQuery, window, document));
  // The global jQuery object is passed as a parameter

Si vous n'aimez pas avoir à défiler jusqu'au bas de votre fichier source pour voir quelles variables/propriétés globales vous passez à votre IIFE, vous pouvez le faire :

   // IIFE - Immediately Invoked Function Expression
  (function(yourcode) {

      // The global jQuery object is passed as a parameter
      yourcode(window.jQuery, window, document);

      }(function($, window, document) {

          // The rest of your code goes here!

      }
  ));

Pour en savoir plus sur les IIFE, vous pouvez consulter mon article de blog intitulé, J'aime mon IIFE .

Événement jQuery Ready

De nombreux développeurs intègrent tout leur code dans l'événement jQuery ready de la manière suivante :

   $("document").ready(function() {
      // The DOM is ready!
      // The rest of your code goes here!
  });

Ou une version plus courte comme celle-ci :

   $(function() {
      // The DOM is ready!
      // The rest of your code goes here!
  });

Si vous suivez l'un ou l'autre des schémas ci-dessus, alors vous devriez envisager de déplacer les éléments de votre application (par exemple les méthodes), qui ne dépendent pas du DOM, en dehors du gestionnaire de l'événement ready. Comme ceci :

   // IIFE - Immediately Invoked Function Expression
  (function(yourcode) {

      // The global jQuery object is passed as a parameter
      yourcode(window.jQuery, window, document);

      }(function($, window, document) {

          // The $ is now locally scoped 
          $(function() {

              // The DOM is ready!

          });

          // The rest of your code goes here!

      }
  ));

Ce modèle permet plus facile de séparer votre logique (du point de vue de la conception du code), car il n'est pas nécessaire de tout intégrer dans une seule fonction de rappel du gestionnaire d'événements. Il sera également possible de améliorer les performances de chargement des pages de votre application car tout n'a pas besoin d'être initialisé immédiatement. Un bon exemple de ceci est lazy binding DOM event handlers qui n'ont pas besoin d'être liés lorsque le DOM est prêt.

Adapté de mon article de blog sur les meilleures pratiques de jQuery : http://gregfranko.com/blog/jquery-best-practices/

Answer 2

La seule différence entre votre code et l'approche "suggérée" est la compatibilité et éventuellement une meilleure compression. Il n'y a pas de différence de vitesse.

Passage window.jQuery comme premier argument de votre IIFE (expression de fonction immédiatement invoquée) et en la nommant $ dans l'IIFE vous permettra simplement d'utiliser jQuery sans interférer avec d'autres bibliothèques qui s'assignent elles-mêmes à l'élément global $ . Si vous n'utilisez pas d'autres bibliothèques qui s'assignent elles-mêmes à la bibliothèque globale $ le premier argument de votre IIFE ne servira à rien.

Passage window y document à votre IIFE permettra aux minifieurs JS de transformer votre code en quelque chose comme ceci (sans les espaces blancs), ce qui vous donnera une compression légèrement meilleure :

(function(a, b, c) {
    a(c).ready(function() {
        // ...
    });
})(window.jQuery, window, document);

À moins que vous n'utilisiez window y document de manière extensive, je le ferais :

;(function($) {
    $(function() {
        ...
    });
})(jQuery);

Answer 3

1. $(function(){}) est équivalent à $('document').ready(function(){}); . C'est à vous de choisir lequel vous utilisez, mais le dernier est le plus ancien des deux, et le plus verbeux.

2. La deuxième approche que vous avez mentionnée est une tentative explicite d'empêcher les variables globales, et injecte les variables globales connues $ , window y document . Ceci est recommandé pour sensibiliser à la facilité avec laquelle les globaux sont introduits, et pour être aussi "propre" que possible sur le code que nous injectons dans la page. Notez également que la deuxième approche n'est pas équivalente à la première si vous suivez les commentaires indiqués. Comme $ est inséré en tant qu'argument, ce code est compatible avec d'autres bibliothèques qui souhaiteraient posséder le symbole $.

En particulier, // The rest of the code goes here se trouve à un endroit où il peut être exécuté avant que le document ne soit prêt, ou lorsque cet événement est déclenché. Placez-la à l'intérieur de la fonction passée à $.

Answer 4

Votre lien contient la réponse :

Le texte ci-dessous est correct,

Si vous connaissez les environnements dans lesquels votre code sera exécuté.

Si vous ne vous souciez pas des performances de chargement des pages.

Si vous ne vous souciez pas des meilleures pratiques.

 $("document").ready(function() {
    // The DOM is ready!
    // The rest of the code goes here
  });

Mais ils recommandent d'utiliser la méthode ci-dessous, Si vous ne connaissez pas l'environnement dans lequel votre code va s'exécuter et que vous ne savez pas ce qu'il en est, il est préférable d'utiliser la méthode

Meilleure performance de chargement des pages

// IIFE - Immediately Invoked Function Expression
  (function($, window, document) {

    // The $ is now locally scoped 

   // Listen for the jQuery ready event on the document
   $(function() {

     // The DOM is ready!

   });

   // The rest of the code goes here!

  }(window.jQuery, window, document));
  // The global jQuery object is passed as a parameter

Answer 5

Si vous utilisez $ comme alias pour jQuery, alors

   $(document).ready(function(){})

est identique à

  (function($, window, document) {

  // The $ is now locally scoped 

 // Listen for the jQuery ready event on the document
  $(function() {

    // The DOM is ready!

  });

  // The rest of the code goes here!

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

Comme indiqué dans une réponse précédente, la deuxième méthode vous évite d'utiliser librement l'alias $ pour jQuery, car elle transmet l'objet jQuery à l'expression de la fonction invoquée immédiatement, ce qui permet de conserver les variables et le code privés et de ne pas polluer l'espace de noms global.

En résumé, si vous recourez à la première méthode et que vous utilisez d'autres bibliothèques utilisant $, vous aboutirez à un conflit.