javascript - jquery change title page

Mejores prácticas jQuery en caso de $(''documento''). listo

Question

Estaba investigando sobre las mejores prácticas de jQuery y encontré this artículo de Greg Franko

Normalmente, hago:

$("document").ready(function() {
// The DOM is ready!
// The rest of the code goes here
});

Pero el artículo recomienda usar:

// IIFE - Immediately Invoked Function Expression
(function($, window, document) {
// The $ is now locally scoped
// Listen for the jQuery ready event on the document
$(function() {
// The DOM is ready!
});
// The rest of the code goes here!
}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter

Puedo ver los comentarios allí, pero no pude entender lo que dice exactamente.

Entonces, ¿cuál es el mejor enfoque y por qué?

Sé que ambos métodos funcionarán, pero ¿cómo se mejora el segundo?

Answer 1

1. $(function(){}) es equivalente a $(''document'').ready(function(){}); . Depende de usted el que utilice, pero el último es el más antiguo de los dos, y más detallado para arrancar.

2. El segundo enfoque que ha enumerado es un intento explícito de evitar variables globales e inyecta la window , y el document conocidos globales $ . Esto se recomienda para aumentar el conocimiento de cuán fácilmente se introducen los valores globales, y ser lo más "limpio posible" sobre el código que inyectamos a la página. Además, tenga en cuenta que el segundo enfoque no es equivalente al primero si sigue los comentarios que se muestran. Como $ está insertado como argumento, este código es compatible con otras bibliotecas que deseen poseer el símbolo $.

En particular, // The rest of the code goes here en un lugar que puede ejecutarse antes de que el documento esté listo, o cuando se dispara ese evento. Ponlo dentro de la función pasada a $.

Answer 2

Basado en la documentación de Jquery:

All three of the following syntaxes are equivalent:
$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)

http://api.jquery.com/ready/

Answer 3

En la rara situación en la que tendrá que trabajar en una versión anterior de jQuery (si recuerdo correctamente - pre 1.8.X), siempre que especifique dos bloques document.ready, solo el primero se disparará en IE9.

Ahora bien, este es un raro error que experimenté una o dos veces y que no consigo reproducir, pero pensé que valdría la pena señalarlo.

Answer 4

La única diferencia entre su código y el enfoque "sugerido" es la compatibilidad y posiblemente una mejor compresión. No hay diferencias de velocidad.

Al pasar window.jQuery como el primer argumento de su IIFE (expresión de función invocada inmediatamente) y nombrarlo $ dentro de IIFE solo le permitirá usar jQuery sin interferir con otras bibliotecas que se asignen a $ global. Si no utiliza ninguna otra biblioteca que se asigne a $ global, el primer argumento para su IIFE no servirá para nada.

Al pasar la window y el document a su IIFE, los minificadores de JS podrán transformar su código en algo como esto (sin espacio en blanco), lo que le proporciona una compresión ligeramente mejor:

(function(a, b, c) {
a(c).ready(function() {
// ...
});
})(window.jQuery, window, document);

A menos que use window y document extensivamente, solo lo haría:

;(function($) {
$(function() {
...
});
})(jQuery);

Answer 5

Puede usar el evento de documento preparado usando jquery, evento que ocurre cuando el documento está completamente cargado.

 $(function () {
setTimeout(function () {
// your code
}, 0);
})

Answer 6

Se llama función self ivoking o immediately invoked . Significa que la función se ejecuta tan pronto como se crea usando los parámetros en el conjunto final de corchetes.

Las funciones de indagación de invocación de JavaScript y la expresión de función invocada inmediatamente (IIFE) aclararán dónde usar y cómo usar estas funciones

Answer 7

Si usa $ como alias para jQuery, entonces

 $(document).ready(function(){})

es lo mismo que

 (function($, window, document) {
// The $ is now locally scoped
// Listen for the jQuery ready event on the document
$(function() {
// The DOM is ready!
});
// The rest of the code goes here!
}(window.jQuery, window, document));

Como se señaló en una respuesta anterior, el segundo método lo aísla de usar $ alias libremente para jQuery cuando pasa el objeto jQuery a la expresión de función Invocada Inmediatamente, que básicamente mantiene privadas las variables y el código, y no contamina el global espacio de nombres

En resumen, si recurres al primer método y usas otras bibliotecas usando $, terminarás con un conflicto.

Answer 8

Su enlace tiene el guion:

El siguiente está bien,

Si conoce los entornos donde se ejecutará su código.

Si no te importa el rendimiento de la carga de la página.

Si no te importan las mejores prácticas.

 $("document").ready(function() {
// The DOM is ready!
// The rest of the code goes here
});

Pero lo recomiendan, es mejor utilizarlo a continuación, si no conoce el entorno donde se ejecutará su código y

Mejor rendimiento de carga de página

// IIFE - Immediately Invoked Function Expression
(function($, window, document) {
// The $ is now locally scoped
// Listen for the jQuery ready event on the document
$(function() {
// The DOM is ready!
});
// The rest of the code goes here!
}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter

Answer 9

Expresiones de funciones invocadas inmediatamente (IIFE)

Los IIFE son una solución ideal para el alcance local de variables / propiedades globales y la protección de su base de código JavaScript contra interferencias externas (por ejemplo, bibliotecas de terceros). Si está escribiendo un código jQuery que se ejecutará en muchos entornos diferentes (por ejemplo, los complementos de jQuery), entonces es importante usar un IIFE para ubicar localmente jQuery porque no puede suponer que todos están usando $ alias jQuery. Así es como lo harías:

 // IIFE - Immediately Invoked Function Expression
(function($, window, document) {
// The $ is now locally scoped
// The rest of your code goes here!
}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter

Si no le gusta tener que desplazarse hasta el final de su archivo de origen para ver qué variables / propiedades globales está transfiriendo a su IIFE, puede hacer esto:

 // IIFE - Immediately Invoked Function Expression
(function(yourcode) {
// The global jQuery object is passed as a parameter
yourcode(window.jQuery, window, document);
}(function($, window, document) {
// The rest of your code goes here!
}
));

Para leer más sobre IIFE, puede leer mi publicación de blog titulada, I Love My IIFE .

Evento jQuery Ready

Muchos desarrolladores envuelven todo su código dentro del evento jQuery ready como este:

 $("document").ready(function() {
// The DOM is ready!
// The rest of your code goes here!
});

O una versión más corta como esta:

 $(function() {
// The DOM is ready!
// The rest of your code goes here!
});

Si está haciendo cualquiera de los patrones anteriores, entonces debería considerar mover las piezas de su aplicación (por ejemplo, métodos), que no dependen del DOM, fuera del controlador de eventos listos. Me gusta esto:

 // IIFE - Immediately Invoked Function Expression
(function(yourcode) {
// The global jQuery object is passed as a parameter
yourcode(window.jQuery, window, document);
}(function($, window, document) {
// The $ is now locally scoped
$(function() {
// The DOM is ready!
});
// The rest of your code goes here!
}
));

Este patrón facilita la separación de su lógica (desde la perspectiva del diseño del código), ya que no todo debe estar dentro de una sola función de devolución de llamada del manejador de eventos. También mejorará el rendimiento de carga de la página de su aplicación , ya que no todo debe inicializarse de inmediato. Un buen ejemplo de esto son los controladores de eventos DOM de enlace diferido que no necesitan vincularse cuando el DOM está listo.

Adaptado de mi publicación de blog de jQuery Best Practices: http://gregfranko.com/blog/jquery-best-practices/