jQuery document.ready vs auto appelant fonction anonyme

Quelle est la différence entre ces deux.

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

  2. (function(){ ... })();

Ces deux fonctions sont-elles appelées en même temps? Je sais, document.ready sera déclenché lorsque la page HTML entière est rendue par le navigateur mais qu’en est-il de la 2ème fonction (fonction anonyme appelant). Attend-il que le navigateur termine le rendu de la page ou est-il appelé chaque fois qu’il est rencontré?

  • $(document).ready(function(){ ... }); ou short $(function(){...});

    Cette fonction est appelée lorsque le DOM is ready ce qui signifie que vous pouvez commencer à interroger des éléments, par exemple. .ready() utilisera différentes manières sur différents navigateurs pour s’assurer que le DOM est vraiment prêt.

  • (function(){ ... })();

    Ce n’est rien d’autre qu’une fonction qui s’invoque le plus rapidement possible lorsque le navigateur interprète votre ecma-/javascript . Par conséquent, il est très improbable que vous puissiez agir avec succès sur DOM elements ici.

(function(){...})(); sera exécuté dès qu’il est rencontré dans le Javascript.

$(document).ready() sera exécuté une fois le document chargé. $(function(){...}); est un raccourci pour $(document).ready() et fait exactement la même chose.

  1. $(document).ready(function() { ... }); lie simplement cette fonction à l’événement ready du document, de sorte que, comme vous l’avez dit, l’événement se déclenche lorsque le document est chargé.

  2. (function($) { ... })(jQuery); est en fait une construction de Javascript, et tout ce que fait le code est de passer l’object jQuery dans la function($) tant que paramètre et d’exécuter la fonction, donc dans cette fonction, $ fait toujours référence à l’object jQuery . Cela peut aider à résoudre les conflits de noms, etc.

Donc, # 1 est exécuté lorsque le document est chargé, tandis que # 2 est exécuté immédiatement, avec l’object jQuery nommé $ comme raccourci.

Le code suivant sera exécuté lorsque le DOM (Document object model) est prêt pour l’exécution du code JavaScript.

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

Le raccourci pour le code ci-dessus est:

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

Le code ci-dessous est une fonction JavaScript auto-invoquante et sera exécuté dès que le navigateur l’interprète:

 (function(){ //write code here })(); // It is the parenthesis here that call the function. 

La fonction d’auto-appel jQuery présentée ci-dessous transmet l’object global jQuery comme argument à la function($) . Cela permet à $ d’être utilisé localement dans la fonction auto-appelante sans avoir à parcourir la scope globale d’une définition. jQuery n’est pas la seule bibliothèque qui utilise $ , ce qui réduit les conflits de noms potentiels.

 (function($){ //some code })(jQuery); 

document.ready est exécuté après que DOM soit “construit”. Les fonctions auto-appelantes s’exécutent instantanément – si elles sont insérées dans , avant la construction de DOM.