La mejor práctica de JQuery, usando $(document).ready dentro de un IIFE?

document-ready

Question

Estoy mirando un trozo de código:

(function($) {
// other code here
$(document).ready(function() {
// other code here
});
})(jQuery);

A pesar de que el IIFE cumple las funciones de $ (documento) .ready, ¿es correcto este código? o simplemente puedo eliminar el $ (documento) .ready y colocar el código directamente dentro del IIFE.

Answer 1

IIFE realiza las funciones cuando el contexto de ejecución (alcance del código actual que se está evaluando) está listo. Consulte el artículo sobre Conceptos de organización de código en jQuery, que describe los dos patrones más comunes, El objeto literal y El patrón de módulo , y cómo usarlos.

Answer 2

No, IIFE no ejecuta el código en el documento listo.

1. Sólo en IIFE:

(function($) {
console.log(''logs immediately'');
})(jQuery);

Este código ejecuta inmediatamente los registros "registros inmediatamente" sin que el documento esté listo.

2. Dentro de listo:

(function($) {
$(document).ready(function(){
console.log(''logs after ready'');
});
})(jQuery);

Ejecuta el código inmediatamente y espera el documento listo y registra "los registros después de listo".

Esto explica mejor para entender:

(function($) {
console.log(''logs immediately'');
$(document).ready(function(){
console.log(''logs after ready'');
});
})(jQuery);

Esto registra los "registros inmediatamente" en la consola inmediatamente después de la carga de la ventana, pero los "registros una vez listos" se registran solo después de que el documento esté listo.

IIFE no es una alternativa preparada:

La alternativa para $(document).ready(function(){}) es:

$(function(){
//code in here
});

Actualizar

Desde la versión 3.0 de jQuery, se cambia el manejador listo.

Solo se recomienda la siguiente forma de manipulador listo.

jQuery(function($) {
});

El manejador de listas ahora es asíncrono.

$(function() {
console.log("inside handler");
});
console.log("outside handler");

> manejador externo

> manejador interno

Answer 3

IIFE necesita crear un alcance más. Si elimina IIFE y $ no se definirá (es decir, jQuery.noConflict() ), aparecerá un error. jQuery definirá en todas partes el archivo javascript con la biblioteca que se cargó.

Entonces, no es la mejor práctica de jQuery, es una mejor práctica de javascript.

Answer 4

• Si necesita que DOM esté listo, necesita usar $(function() {/* DOM Manipulations goes here})
• Si desea evitar algún tipo de colisión de nombres, puede envolver el código con IIFE (function($) {/* safely use $ here*/}(jQuery))

Y puedes combinar ambos enfoques:

(function($) {
/*Do smth that doesn''t require DOM to be ready*/
$(function() {
/*Do the rest stuff involving DOM manipulations*/
});
}(jQuery));