me encontré con un trozo de código que se parece a esto:
jQuery(function($) {
$('#saySomething').click(function() {
alert('something');
});
});
yo no lo entiendo muy bien. Por qué no puedo simplemente hacer esto:
$('#saySomething').click(function() {
alert('saySomething');
});
jQuery(function ($) {...});
es la versión abreviada de:
jQuery(document).ready(function ($) {...});
Si no espere a la document para estar listo, los elementos que se' d los eventos vinculados no existirán en el dominio, y los eventos en realidad no estarán vinculados.
Como alternativa, podría esperar a que el body haya terminado de cargarse, pero eso incluirá la espera de imágenes, que tardan más en cargarse.
A decir verdad, you don't have to wait for document.ready. Puede seguir adelante y utilizar $('#saySomething').click(...) si sabe que existe el elemento en el DOM:
<button id="saySomething>Say Something!</button>
<script>
jQuery('#saySomething').click(...);
</script>
Hay un último matiz a jQuery(function ($) {...}); que usted debe conocer. El parámetro $ en la función se utiliza para alias jQuery a $, lo que le permitirá usar la abreviatura $ dentro de la función sin tener que preocuparse por conflictos con otras bibliotecas (como el prototipo).
Si usted no está esperando a que document.ready es común ver un IIFE utilizado para el alias de jQuery:
(function ($) {
$('#saySomething').click(...);
}(jQuery));
jQuery(function($) {
es un acceso directo para
jQuery(document).ready(function(){
Esta espera hasta que el documento es en un estado "listo" donde se construye el DOM. Sus scripts jQuery pueden funcionar con la página completa y no perderse ningún elemento.
Pero - puede ejecutar jQuery sin él. Si su script está en la cabeza, corre el riesgo de seleccionar elementos que aún no se han creado. He utilizado jQuery en el cuerpo de mi documento de inmediato después de los elementos que quiero afectar en un intento de operarlos tan pronto como sea posible. Ese fue un caso inusual y normalmente no lo hago.
Otra razón para utilizar la función de listo: puede ejecutarla más de una vez. Si incluye varias secuencias de comandos o si tiene un código condicionalmente incluido, puede tener múltiples funciones listas(). El código en cada bloque listo se mantiene hasta que se alcanza el estado listo, y luego el código se ejecuta en el orden en que se agregó.
El primer ejemplo se ejecuta después de que la página está completamente cargada. El segundo ejemplo se ejecuta directamente (y probablemente fallará).
Así, la primera es una abreviatura de:
$(document).ready(function(){
// Do something after the page is loaded.
});
Esta es la abreviatura de "carga de documentos", y también han utilizado la escritura a mano "jQuery" con $ alias en el interior para evitar colisiones con otras bibliotecas utilizando el signo $.
Si no espera la carga de documentos, las cosas pueden volverse impredecibles/no funcionarán. Además, si tienes colisiones de nombres, las cosas simplemente explotarán.
$(function() {}) es la abreviatura de jQuerys documentan la función listo http://api.jquery.com/jQuery/#jQuery3 y http://api.jquery.com/ready/ para más información
jQuery(function($) { ... }); es lo que evita que el código se ejecute hasta que el DOM (HTML) está representado completamente y accesible.
Encontrará toda la información aquí: http://api.jquery.com/ready/
copiar y pegar directamente de los docs:
jQuery(callback)Devuelve:jQueryDescripción: se une a una función que se ejecuta cuando el DOM ha terminado cargando.
version added: 1.0jQuery(callback) `callback` The function to execute when the DOM is ready.Esta función se comporta como
$(document).ready(), en la que debería ser utilizado para envolver otros$()operaciones en su página que dependen de estar listo el DOM. Si bien esta función es, técnicamente, encadenable, realmente no sirve de mucho para encadenarla.
Por favor revise la API
Este jQuery(function(){...} es un atajo para jQuery(document).ready(function(){...}). El evento Ready se activa cuando el DOM está listo, por lo que estará seguro de que no está accediendo a algo que todavía no está disponible.
Por otro lado, si vincula el método de clic como lo hace en su segundo fragmento. Ese código se ejecutará de inmediato, por lo que debe asegurarse de colocarlo después de la declaración #saySomething.
Depende del contexto del código, pero existe una práctica de diseño común en JavaScript para encapsular variables y métodos dentro de un Espacio de nombres o Patrón de módulo. Este código puede ser un derivado de esa intención.
El razonamiento detrás del patrón de diseño del módulo se reduce a complicaciones con las variables globales y los peligros de 'cloqueos'.
Se puede producir un bloqueo cuando cualquier variable (o función) del mismo nombre se define dos veces. La segunda definición anulará la primera, y en esencia la destruirá.
Por lo tanto, es una regla de oro para envolver su código en una construcción que protege sus variables (y funciones) del espacio de nombres global. Douglas Crockford describe bien este tipo de escenarios.
Este example muestra un poco encarnación más común que se llama 'cierre':
var jspy = (function() {
var _count = 0;
return {
incrementCount: function() {
_count++;
},
getCount: function() {
return _count;
}
};
})();
Se desorienta al principio, pero una vez que lo reconoce, se convierte en una segunda naturaleza. El punto es encapsular la variable _count como un miembro privado al objeto devuelto que tiene dos métodos accesibles.
Esto es poderoso porque el espacio de nombres global ahora solo incluye una var (jspy) en oposición a una con dos métodos. La segunda razón por la que es poderosa es que garantiza que la variable de cuenta solo puede accederse mediante la lógica en los dos métodos (incrementCount, getCount).
Como dije, su código puede ser una encarnación de esta regla de oro.
De cualquier manera, es importante conocer este patrón en JavaScript porque abre la puerta a interacciones mucho más potentes entre marcos, por ejemplo, y en la carga asíncrona de ellos, como en AMD.
Aquí hay un buen ejemplo de namespace.
En resumen, hay un patrón de diseño de JavaScript avanzado que le ayudará a saberlo, y los términos relevantes son Patrón de módulo, Patrón de espacio de nombres. Los términos asociados adicionales son cierre y AMD.
Espero que ayude. ¡Todo lo mejor! Nash
Estoy de acuerdo con todos que este es el documento. Listo. Solo quería proporcionar un mayor nivel de descripción de envoltura, en caso de ser relevante en contexto. –
Gracias por la explicación :) – tommi
Esa segunda parte del código es sintácticamente incorrecta. Tiene un extra '});'. Tal vez el código le falta algo o el error en sí es el problema? –
Hola mi error. Hice una copia rápida y pegar. Hizo la corrección. – tommi
No hay problema, simplemente cambia cómo abordar el problema es todo. Ahora voy a estar arriba-votando la conjetura de alguien (re: respuesta). –