Utilisation des fonctions anonymes auto-appelantes et $ (document) .ready

Je viens d'apprendre récemment sur les fonctions anonymes auto-appelantes. Certains extraits de code que j'ai rencontrés ont utilisé la fonction d'appel automatique avec le $ (document) .ready. Il semble redondant, ou inutile, d'utiliser les deux.

Y at-il un cas où vous utiliserez

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

contre.

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

Je pense que vous voulez que le script soit exécuté tout de suite ou après le chargement du DOM. Je ne vois pas pourquoi vous utiliserez les deux ensemble.

Merci.

Il y a certainement un cas d'utilisation pour le premier exemple. Si vous avez d'autres bibliothèques JS / scripts chargés sur la même page, rien ne garantit qu'ils ne remplacent pas la variable $ . (Ceci est très fréquent lorsque vous avez Prototype et jQuery sur la même page).

Donc, si Prototype utilise $ , vous devriez utiliser jQuery chaque fois que vous vouliez travailler avec jQuery. Cela peut devenir assez laid:

 jQuery(function(){ jQuery('a', '#content').bind('click', function(){ if(jQuery(this).attr('href') == 'www.google.com') { alert("This link goes to Google"); jQuery(this).addClass('clicked')); } }); }) 

Rappelez-vous, nous ne pouvons pas utiliser $ parce que c'est une méthode de Prototype dans la portée globale.

Mais si vous l'avez enveloppé à l'intérieur de ce …

 (function($){ $(function(){ // your code here }); })(jQuery); 

Le $ fera référence à la bibliothèque jQuery à l'intérieur tout en se référant à Prototype à l'extérieur! Cela peut aider à ranger votre code:

 (function($){ $(function{}( jQuery('a', '#content').bind('click', function(){ if(jQuery(this).attr('href') == 'www.google.com') { alert("This link goes to Google"); jQuery(this).addClass('clicked')); } }); )); })(jQuery); 

Il s'agit d'un modèle commun avec les extensions jQuery pour s'assurer qu'ils sont toujours ajoutés à l'objet jQuery, mais peuvent être écrits en utilisant $ pour garder le code propre.

Vous ne voudriez pas utiliser les deux ensemble, y at-il quelque chose que vous faites qui vous oblige?

Dans la documentation jquery api ici, http://api.jquery.com/ready/ , vous pouvez voir ces exemples:

La méthode .ready () est généralement utilisée avec une fonction anonyme:

$ (Document) .ready (function () {
// Gestionnaire pour .ready () appelé.

});

Ce qui équivaut à l'appel:

$ (Function () {
// Gestionnaire pour .ready () appelé.

});

Mais je ne sais pas si cela répond à votre question parce que je ne vois pas où vous en demandez réellement. Espérons que cela aide tout de même!

La seule raison pour laquelle vous introduirez une autre fermeture est d'introduire une autre limite de portée pour charger / protéger des objets globaux tels que $.

Par exemple:

 $(document).ready(function(){ // Do upper scope things. (function(){ // Do lower scope things. })(); }); 

En vous disant que vous avez récemment appris à ce sujet, je suppose que vous êtes relativement nouveau sur JavaScript.

J'ai mis en place une publication sur le blog qui pourrait aider à expliquer certains des concepts de base qui constituent le point de vue d'un nouveau venu vers JavaScript, y compris la portée de la fonction. http://bit.ly/tLkykX