Utilizzo di funzioni anonime di chiamata automatica e $ (documento) .ready

Question

Recentemente ho imparato a conoscere funzioni di chiamata anonima. Alcuni frammenti di codice che ho trovato utilizzavano la funzione di chiamata automatica insieme a $ (document) .ready. Sembra ridondante, o inutile, utilizzare entrambi.

c'è un caso in cui devi usare

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

vs.

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

Immagino che ci si sia desidera lo script da eseguire subito o dopo il DOM caricato. Non riesco a capire perché li useresti entrambi insieme.

Grazie.

Answer 1

Esiste sicuramente un caso d'uso per il primo esempio. Se sono presenti altre librerie/script JS caricati nella stessa pagina, non è possibile garantire che non sovrascrivano la variabile $. (Questo è molto comune quando hai Prototype e jQuery nella stessa pagina).

Quindi, se Prototype utilizza $, è necessario utilizzare jQuery ogni volta che si desidera lavorare con jQuery. Questo può ottenere abbastanza brutto:

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')); 
     } 
    }); 
}) 

Ricordate, non possiamo usare $ perché questo è un metodo da prototipo nell'ambito globale.

Ma se avvolto all'interno di questo ..

(function($){ 
    $(function(){ 

     // your code here 

    }); 
})(jQuery); 

Il $ sarebbe in realtà fare riferimento la libreria jQuery all'interno, pur riferendosi a Prototype sulla parte esterna!Questo può aiutare a riordinare il codice:

(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); 

Si tratta di un modello comune con le estensioni jQuery per garantire che essi siano sempre aggiunti all'oggetto jQuery, ma possono essere scritti utilizzando $ per mantenere il codice ordine.

Answer 2

Non si vorrebbe usare entrambi insieme, c'è qualcosa che stai facendo che richiede?

Nella documentazione jquery api qui, http://api.jquery.com/ready/, si può vedere questi esempi:

Il .ready() metodo viene in genere utilizzato con una funzione anonima:

$ (document) .ready (function() {
// gestore per .ready() chiamato.

});

che è equivalente a chiamare:

$ (function() {.
// Handler per .ready() chiamato

});

Ma non sono sicuro che questo risponda alla tua domanda perché non vedo dove effettivamente chiedi. Spero che questo aiuti lo stesso!

Answer 3

L'unica ragione per cui si introduce un'altra chiusura è l'introduzione di un altro limite di ambito per il caricamento/protezione di oggetti globali come $.

Per esempio:

$(document).ready(function(){ 

    // Do upper scope things. 

    (function(){ 

     // Do lower scope things. 

    })(); 

}); 

basa su di voi dicendo che di recente l'apprendimento di queste cose suppongo che voi siate relativly nuovi a JavaScript.

Ho creato un post sul blog che potrebbe aiutare a spiegare alcuni dei concetti di base dal punto di vista di un nuovo arrivato in JavaScript, incluso l'ambito delle funzioni. http://bit.ly/tLkykX