¿Cuál es la diferencia entre estas funciones?

Question

Tengo el libro Jquery en acción, y menciona estas tres funciones cuando se habla de eliminar conflictos con otras bibliotecas. Sin embargo, no sé cuál es la diferencia entre ellos y no entiendo la explicación del libro.

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

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

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

¿Alguien sabe cuál es la diferencia? Gracias.

Answer 1

Si toma una versión simplificada, podría ser más comprensible. La primera función lista no hace mucho más que alertar. Los otros dos son interesantes.

Las funciones tienen ámbito, lo que significa que cuando use una variable dentro de una, subirá en la jerarquía hasta que se encuentre.

En su segunda función listo, el $ va a subir a la Hi! ya que no hay otra $ si vas a comenzar dentro de la función.

Sin embargo, en el tercer bloque listo, el $ no va a ir a la Hi! porque tiene una definición que está más cerca - el pasado como argumento (function($) {). Esta $ será la función jQuery (es decir, en esa función $ == jQuery), ya que así es como se implementa la función de jQuery.

Así:

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

Ahora la pregunta es sobre el conflicto con otras bibliotecas. Otras bibliotecas (Prototipo, por ejemplo) también usan el símbolo $, ya que es un atajo conveniente para llamar a la biblioteca. Si usa la última función preparada que proporcionó, puede ser seguro que dentro de esa función, $ se referirá a jQuery ya que jQuery se pasa a esa función (como primer argumento).

En la segunda función de listo, $ también podría haberse configurado en Prototype, por ejemplo, y no está seguro de si está llamando a jQuery con $. En su ejemplo, era Hi! y no jQuery. En caso de que sea Prototipo, es lo mismo. Considere:

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

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

Por otro lado:

// 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

cuando se escribe la jQuery(function ($) { ... $ es simplemente un alias para el objeto jQuery. De hecho, podría usar cualquier identificador legal en lugar de $, y esto seguiría siendo un alias para el objeto jQuery.

En el segundo ejemplo, la alerta dirá '$ = ¡Hola!' porque en ese caso el $ apunta a la var declarada justo arriba de la función.

El tercer ejemplo enmascara efectivamente el $ declarado arriba de la función porque $ se resolverá con el objeto jQuery dentro de la función.

Espero que esto tenga sentido para usted.

Answer 3

El primer bloque de código declara un controlador listo que se ejecuta una vez que el DOM ha sido cargado por completo. Simplemente produce un cuadro de alerta.

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

El segundo bloque de código también declara un controlador listo, pero está demostrando un conflicto. La variable $ se ha establecido deliberadamente en una cadena (esto podría ocurrir a partir de una biblioteca js conflictiva) y, por lo tanto, no se puede utilizar como el objeto jQuery. Dentro del alcance de la función de controlador, $ permanece asignado a la cadena y la alerta muestra $ = Hi!.

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

El tercer bloque de código también declara un manejador de listas, pero declara un $ parámetro local. El objeto jQuery se pasa al manejador listo como el primer parámetro y así dentro del alcance de la función, $ se refiere al objeto jQuery y la alerta imprimirá $ = ..., donde ... es una representación del objeto jQuery.

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