$ (documento). taquigrafía preparada


245

¿Es la siguiente taquigrafía para $(document).ready?

(function($){

//some code

})(jQuery);

Veo que este patrón se usa mucho, pero no puedo encontrar ninguna referencia al mismo. Si es una forma abreviada de $(document).ready(), ¿hay alguna razón particular por la que podría no funcionar? En mis pruebas parece que siempre se dispara antes del evento listo.


Cualquier variable definida dentro de la función de patrón mencionada (p var somevar;. Ej. ) No cambiará el contenido de las variables del mismo nombre fuera de la función
Timo Huovinen

3
El código tiene el efecto de garantizar que $ represente jQuery dentro de ese bloque de funciones, por lo que el código es portátil a lugares donde el alias $ para jQuery está deshabilitado o definido como algo más.
PreguntaAway

Respuestas:


252

La abreviatura de $(document).ready(handler)es $(handler)(donde handleres una función). Ver aquí .

El código en su pregunta no tiene nada que ver .ready(). Más bien, es una expresión de función invocada inmediatamente (IIFE) con el objeto jQuery como argumento. Su propósito es restringir el alcance de al menos la $variable a su propio bloque para que no cause conflictos. Por lo general, ve el patrón utilizado por los complementos de jQuery para asegurarse de eso $ == jQuery.


14
Técnicamente es una expresión de función invocada de inmediato . Si se invocara a sí mismo, se llamaría a sí mismo desde su interior. Busque en la web iifeo pase a la famosa publicación de blog de Cowboy Alman . Detalles ... sheesh.
2540625

546

La taquigrafía es:

$(function() {
    // Code here
});

24
El primer argumento es $. Es posible que desee agregar eso. Es útil parajQuery(function($, undefined) {});
Raynos

55
@raynos No es obligatorio. el código anterior funciona bien como un alias para$(document).ready(function(){ });
Kyle Trauberman

10
Es útil saber que obtienes $gratis como primer argumento.
Raynos

3
Todavía visito esta respuesta una vez al mes más o menos.
Nugsson

89

La taquigrafía correcta es esta:

$(function() {
    // this behaves as if within document.ready
});

El código que publicaste ...

(function($){

//some code

})(jQuery);

... crea una función anónima y la ejecuta inmediatamente jQueryal pasarla como arg $. Todo lo que efectivamente hace es tomar el código dentro de la función y ejecutarlo como de costumbre, ya $que ya es un alias para jQuery. :RE


44
Se podría decir que también asegura que $ sea el alias de jQuery, si se cargan otras herramientas que también usan $ como alias
Jim Wolff


12

Estas líneas específicas son el contenedor habitual para los complementos de jQuery:

"... para asegurarse de que su complemento no colisione con otras bibliotecas que puedan usar el signo de dólar, es una buena práctica pasar jQuery a una función de ejecución automática (cierre) que lo asigna al signo de dólar para que pueda ' t será sobrescrito por otra biblioteca en el ámbito de su ejecución ".

(function( $ ){
  $.fn.myPlugin = function() {
    // Do your awesome plugin stuff here
  };
})( jQuery );

Desde http://docs.jquery.com/Plugins/Authoring


11

La abreviatura segura multi-framework para ready es:

jQuery(function($, undefined) {
    // $ is guaranteed to be short for jQuery in this scope
    // undefined is provided because it could have been overwritten elsewhere
});

Esto se debe a que jQuery no es el único marco que utiliza las variables $yundefined


También se puede escribir como(function($){ ... })(jQuery);
Mike Causante

2
@MikeCauser también es un buen enfoque, pero no se llamará ready, sino que se llamará de inmediato
Timo Huovinen

5

Incluso una variante más corta es usar

$(()=>{

});

donde $significa jQuery y ()=>{}se llama 'función de flecha' que hereda thisdel cierre. (Para que thisprobablemente tengas en windowlugar de document).


0

¿Qué hay de esto?

(function($) { 
   $(function() {
     // more code using $ as alias to jQuery
     // will be fired when document is ready
   });
})(jQuery);
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.