Qual è la differenza tra queste funzioni?

Question

Ho il libro Jquery in azione e menziona queste tre funzioni quando si parla della rimozione del conflitto con altre librerie. Tuttavia, non so quale sia la differenza tra di loro e non capisco la spiegazione del libro.

jQuery(function($) { 
    alert('I"m ready!'); 
}); 

var $ = 'Hi!'; 
jQuery(function() { 
    alert('$ = ' + $); 
}); 

var $ = 'Hi!'; 
jQuery(function($) { 
    alert('$ = ' + $); 
}); 

Qualcuno sa qual è la differenza? Grazie.

Answer 1

Se si utilizza una versione semplificata, potrebbe essere più comprensibile. La prima funzione pronta non sta facendo molto di più di un avviso. Gli altri due sono interessanti.

Le funzioni hanno scope, il che significa che quando si utilizza una variabile all'interno di una variabile, essa salirà nella gerarchia finché non sarà stata trovata.

Nella seconda funzione pronta, lo $ salirà allo Hi! in quanto non vi sono altri $ se si sale iniziando all'interno della funzione.

Tuttavia, nel terzo blocco pronto, il $ non andrà al Hi! perché ha una definizione che è più vicino - quello passato come argomento (function($) {). Questo $ sarà la funzione jQuery (ovvero in quella funzione $ == jQuery) in quanto è implementata la funzionalità di jQuery.

Quindi:

var $ = 'Hi!'; 

jQuery(function() { 
    alert('$ = ' + $); // in this scope, $ will refer to the 'Hi!' 
}); 

jQuery(function($) { // the $ here will 'shadow' the $ defined as 'Hi!' 
    alert('$ = ' + $); // in this scope, $ will refer to jQuery 
}); 

Ora la tua domanda riguarda il conflitto con altre biblioteche. Altre librerie (Prototype ad esempio) utilizzano anche il simbolo $ in quanto è una comoda scorciatoia per chiamare la libreria. Se utilizzi l'ultima funzione pronta che hai fornito, puoi essere sicuro che all'interno di quella funzione, $ farà riferimento a jQuery mentre jQuery passa a quella funzione (come primo argomento).

Nella seconda funzione pronta, $ potrebbe anche essere stato impostato su Prototipo, ad esempio, e non si è sicuri se si sta chiamando jQuery con $. Nel tuo esempio, era Hi! e non jQuery. Nel caso in cui sia Prototipo è la stessa cosa. Considerate:

// Prototype is loaded here, $ is referring to Prototype 

jQuery(function() { 
    $('selector').addClass('something'); // Oops - you're calling Prototype with $! 
}); 

D'altra parte:

// Prototype is loaded here, $ is referring to Prototype 

jQuery(function($) { // this $ is shadowing Prototype's $, this $ is jQuery 
    $('selector').addClass('something'); // Yay - you're calling jQuery with $ 
}); 

Answer 2

quando si digita il jQuery(function ($) { ... $ è semplicemente un alias per l'oggetto jQuery. In effetti, potresti usare qualsiasi identificatore legale invece di $, e questo sarebbe comunque un alias per l'oggetto jQuery.

Nel secondo esempio, l'avviso indicherà "$ = Ciao!" perché in quel caso $ sta puntando alla var dichiarata appena sopra la funzione.

Il terzo esempio maschera efficacemente il $ dichiarato sopra la funzione poiché $ si risolverà nell'oggetto jQuery all'interno della funzione.

Spero che abbia senso per voi.

Answer 3

Il primo blocco di codice dichiara un gestore pronto che viene eseguito una volta che il DOM è stato completamente caricato. Produce semplicemente una casella di avviso.

jQuery(function($) { 
    alert('I"m ready!'); 
}); 

Il secondo blocco di codice dichiara anche un gestore pronto, ma sta dimostrando un conflitto. La variabile $ è stata deliberatamente impostata su una stringa (ciò potrebbe verificarsi da una libreria js in conflitto) e pertanto non può essere utilizzata come oggetto jQuery. Nell'ambito della funzione di gestione, $ rimane assegnato alla stringa e quindi l'avviso visualizza $ = Hi!.

var $ = 'Hi!'; 
jQuery(function() { 
    alert('$ = ' + $); 
}); 

Il terzo blocco di codice dichiara anche gestore pronto, ma dichiara un parametro locale $. L'oggetto jQuery passa al gestore pronto come primo parametro e quindi all'interno dell'ambito della funzione, $ fa riferimento all'oggetto jQuery e l'avviso verrà stampato $ = ..., dove ... è una rappresentazione dell'oggetto jQuery.

var $ = 'Hi!'; 
jQuery(function($) { 
    alert('$ = ' + $); 
});