jQuery document.ready vs function anônima auto-chamada

Qual é a diferença entre esses dois.

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

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

Essas duas funções são chamadas ao mesmo tempo? Eu sei, document.ready será acionado quando toda a página HTML é processada pelo navegador, mas o que acontece com a segunda function (function anônima auto-chamada). Ele espera que o navegador conclua a renderização da página ou é chamado sempre que é encontrado?

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

    Essa function é chamada quando o DOM is ready que significa que você pode começar a consultar elementos por exemplo. .ready() usará diferentes maneiras em diferentes navegadores para garantir que o DOM esteja realmente pronto.

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

    Isso não é nada mais do que uma function que se invoca o mais rápido possível quando o navegador está interpretando seu ecma-/javascript . Portanto, é muito improvável que você possa agir com sucesso nos DOM elements aqui.

(function(){...})(); será executado assim que for encontrado no Javascript.

$(document).ready() será executado assim que o documento for carregado. $(function(){...}); é um atalho para $(document).ready() e faz exatamente a mesma coisa.

  1. $(document).ready(function() { ... }); simplesmente liga essa function ao evento ready do documento, portanto, como você disse, quando o documento é carregado, o evento é acionado.

  2. (function($) { ... })(jQuery); é na verdade uma construção de Javascript, e todo esse código faz passar o object jQuery para a function($) como um parâmetro e executa a function, então dentro dessa function, $ sempre se refere ao object jQuery . Isso pode ajudar a resolver conflitos de namespace, etc.

Portanto, o nº 1 é executado quando o documento é carregado, enquanto o segundo é executado imediatamente, com o object jQuery chamado $ as shorthand.

O código a seguir será executado quando o DOM (Document object model) estiver pronto para o código JavaScript ser executado.

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

O ponteiro curto para o código acima é:

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

O código mostrado abaixo é uma function JavaScript anônima auto-chamada e será executada assim que o navegador a interpretar:

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

A function de auto-invocação do jQuery mostrada abaixo, transmite o object jQuery global como um argumento para a function($) . Isso permite que $ seja usado localmente dentro da function auto-invocadora sem precisar percorrer o escopo global para uma definição. O jQuery não é a única biblioteca que faz uso de $ , portanto, isso reduz os possíveis conflitos de nomenclatura.

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

document.ready executado após o DOM ser “construído”. As funções de invocação automática são executadas instantaneamente – se inseridas no , antes que o DOM seja construído.