2010-02-07 19 views
34

he visto este (También estoy usando):¿Cómo debo inicializar jQuery?

$(document).ready(function(){ 
    // do jQuery 
}) 

y también esto (he tratado últimamente):

(function(){ 
    // do jQuery 
})(jQuery) 

tanto funcionan bien.

¿Cuál es la diferencia de los dos (excepto en cómo se ve)?

¿Cuál es más adecuado para usar?

Respuesta

28

El primer ejemplo ejecuta la función cuando se genera el árbol DOM. El segundo ejemplo ejecuta la función de inmediato.

Si se mira de cerca, en el segundo ejemplo, hay dos paréntesis después de la declaración de la función (en este caso particular, se pasa en la jQuery objeto global como un argumento para evitar el conflicto), con lo que de inmediato la invocación de la función

La función correcta de usar depende de cuándo desea que se ejecute la función. Si desea ejecutar una función en DOMReady (el evento ready), puede usar $(document).ready como mencionó o la abreviatura $(function() {...}).

De lo contrario, si desea ejecutar una función inmediatamente y tener un alcance de función anónimo, use el segundo ejemplo.

3

Siempre uso el primero. El segundo parece ser una forma de protegerse contra la anulación de jquery. Una razón por la que puede hacer esto es si no sabe qué otras secuencias de comandos se cargarán en la página. Si todas sus cosas dependen de, por ejemplo, jquery 1.3, y se encuentra en un entorno donde no controla toda la página, su código podría romperse si alguien carga en jquery 1.4. Suena feo, pero este tipo de cosas sucede. Para que puedas cubrir tu trasero creando un cierre inmediatamente después de cargar jquery, y manteniendo tu versión de jquery dentro de ese cierre. Creo que eso es lo que está sucediendo en el segundo ejemplo.

Ninguno de los dos inicializa jquery. Jquery se ocupa de cualquier iniciación que necesite por sí misma. Aún así, es muy probable que termine usando el primer ejemplo, incluso si estuviera usando el segundo, simplemente estaría poniendo el $ (documento) .ready dentro de la función en su segundo ejemplo.

+0

Creo que se prefiere $ (función() {...}), ya que permite la posibilidad de que los autores de jQuery piensen en una mejor manera de ejecutar esas funciones de inicialización que el evento "listo", y su el código seguirá funcionando. Creo que de hecho he leído que el enlace explícito al evento "listo" está en desuso a menos que sepa explícitamente que quiere hacer precisamente eso. – Pointy

34

El segundo ejemplo que muestra es una función anónima autoejecutable. Cada archivo separado JS que use probablemente se beneficie al usarlo. Proporciona un ámbito privado, donde todo lo que se declara con la palabra clave var permanece en el interior sólo eso alcance:

(function($){ 
    var special = "nice!"; 
})(jQuery); 

alert(special); // would be undefined 

El primer ejemplo es la abreviatura de $(document).ready que dispara cuando el DOM puede ser manipulado.

Un par de cosas interesantes al respecto.En primer lugar, se puede usar dentro de la propia función de ejecución:

(function($){ 
    $(function(){ 
     // Run on DOM ready 
    }); 

    // Run right away 
})(jQuery); 

En segundo lugar, si todo lo que necesita es un par de líneas en el documento listo, puede combinar tanto en el ámbito privado y la función de lista de DOM como esto:

jQuery(function($){ 
    // $ = jQuery regardless of what it means 
    // outside this DOM ready function 
}); 
+0

Hmm, interesado en saber cuándo su ejemplo - '(función ($) {$ (función() {' sería de utilidad? –

+1

Cada vez que tenga un código que necesita ejecutarse inmediatamente, y además en el documento listo, es un buen idea para envolver todo el archivo en '(function ($) {...} (jQuery))' y luego puede usar '$' en cualquier lugar que lo necesite sin un posible conflicto. Luego, cuando necesite 'DOM Ready' usted solo usa '$ (function() {...})' –

3

Además de todas las respuestas anteriores, jQuery tiene tres métodos de inicialización que se pueden utilizar:

El método tradicional compatible con la mayoría de navegadores, ver código:

$(document).ready(function() { 

     }); 

El método de taquigrafía, véase el código:

$(function() { 

     }); 

El método implícito, ver código:

$().ready(function() { 

     }); 

Todos ellos trabajan para los navegadores modernos y seguros de usar.

Cuestiones relacionadas