web-dev-qa-db-fra.com

meilleures pratiques jQuery dans le cas de $ ('document'). ready

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

Normalement, je fais:

$("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 peux voir les commentaires là-bas, mais je ne pouvais pas comprendre ce que cela dit exactement.

Alors, quelle est la meilleure approche et pourquoi?

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

javascriptjquerydesign-patternscode-standards
35
Red

(Expressions de fonction immédiatement appelées (IIFE))

Les outils IIFE constituent une solution idéale pour la définition locale de variables/propriétés globales et la protection de votre base de code JavaScript contre les interférences externes (par exemple, des 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 localiser jQuery localement car vous ne pouvez pas supposer que tout le monde utilise le $ to alias jQuery. Voici comment vous le feriez:

   // 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 à faire défiler la liste vers le bas de votre fichier source pour voir quelles variables/propriétés globales vous transmettez à 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 l'IIFE, vous pouvez lire mon billet de blog intitulé, I Love My IIFE .

jQuery Ready Event

De nombreux développeurs intègrent tout leur code dans l'événement jQuery ready comme ceci:

   $("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 utilisez l’un des modèles ci-dessus, vous devez envisager de déplacer les éléments de votre application (par exemple, des méthodes), qui ne dépendent pas du DOM, en dehors du gestionnaire d’événements prêt. Comme ça:

   // 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 le rend {plus facile de séparer votre logique} (du point de vue de la conception de code) car tout ne doit pas être encapsulé dans une fonction de rappel du gestionnaire d'événements unique. Il sera également améliorer les performances de chargement de page de votre application}, car tout ne doit pas être initialisé immédiatement. Un bon exemple de ceci est gestionnaires d'événement DOM de liaison paresseuse qui n'ont pas besoin d'être liés lorsque le DOM est prêt.

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

46
Greg Franko

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.

Passer window.jQuery en tant que premier argument de votre IIFE (expression de fonction invoquée immédiatement) et le nommer $ dans IIFE vous permettra simplement d’utiliser jQuery sans interférer avec les autres bibliothèques qui s’affectent au $ global. Si vous n'utilisez aucune autre bibliothèque qui s'auto-attribue au $ global, le premier argument de votre IIFE ne servira à rien.

Passer window et document à votre IIFE permettra aux minificateurs JS de transformer votre code en quelque chose comme ceci (sans les espaces), ce qui vous donne une compression légèrement meilleure:

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

À moins que vous utilisiez window et document de manière exhaustive, je ferais simplement:

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

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

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

En particulier, // The rest of the code goes here se trouve dans un emplacement pouvant être exécuté avant que le document ne soit prêt ou lorsque cet événement est déclenché. Placez-le dans la fonction passée à $.

5
dwerner

Votre lien a la réponse: 

Le ci-dessous est bien, 

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

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

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, il est préférable d'utiliser comme ci-dessous pour, Si vous ne connaissez pas l'environnement où votre code sera exécuté et 

Meilleure performance de chargement de page

// 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
3
Balaji Kandasamy

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 $ alias pour jQuery, car elle transmet l'objet jQuery à l'expression de fonction Immediately invoquée, qui conserve les variables et le code qui y est privé, et ne pollue pas la variable globale. espace de noms. 

En bref, si vous utilisez la première méthode et utilisez d'autres bibliothèques en utilisant $, vous vous retrouverez avec un conflit.

3
palerdot

Dans les rares cas où vous devrez travailler sur une ancienne version de jQuery (si je me souviens bien - avant la version 1.8.X), chaque fois que vous spécifiez deux blocs document.ready, seul le premier est activé dans IE9.

Or, c’est un bug rare que j’ai rencontré une ou deux fois et que je ne parviens pas à reproduire, mais j’ai pensé que cela méritait d’être signalé.

1
Maciej Gurban

Basé dans la documentation Jquery:

All three of the following syntaxes are equivalent:

$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)

http://api.jquery.com/ready/

0
rderoldan1

Vous pouvez utiliser un événement prêt pour le document à l'aide de jquery. Cet événement se produit lorsque le document est entièrement chargé.

 $(function () {
    setTimeout(function () {
        // your code
    }, 0);
})
0
Nimesh khatri

C'est ce qu'on appelle une fonction self ivoking ou immediately invoked. Cela signifie que la fonction est exécutée dès sa création en utilisant les paramètres du dernier jeu de crochets.

Lire Fonctions d'invocation automatique de Javascript et Expression de fonction appelée immédiatement (IIFE) clarifiera où utiliser et comment utiliser ces fonctions

0
Rohan Kumar