Desde el sitio de documentos de la API de jQuery paraready
Las tres siguientes sintaxis son equivalentes:
- $ (documento) .ready (controlador)
- $ (). ready (controlador) (esto no se recomienda)
- $ (manejador)
Después de hacer la tarea: leer y jugar con el código fuente , no tengo idea de por qué
$().ready(handler)
no es recomendado. La primera y la tercera forma son exactamente iguales, la tercera opción llama a la función lista en un objeto jQuery almacenado en caché con document
:
rootjQuery = jQuery(document);
...
...
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
Pero la función lista no tiene interacción con el selector de los elementos de nodo seleccionados, el ready
código fuente:
ready: function( fn ) {
// Attach the listeners
jQuery.bindReady();
// Add the callback
readyList.add( fn );
return this;
},
Como puede ver, simplemente agrega la devolución de llamada a una cola interna ( readyList
) y no cambia ni usa los elementos del conjunto. Esto le permite llamar a la ready
función en cada objeto jQuery.
Me gusta:
- selector regular :
$('a').ready(handler)
DEMO - Selector de tonterías :
$('fdhjhjkdafdsjkjriohfjdnfj').ready(handler)
DEMO - Selector indefinido :
$().ready(handler)
DEMO
Finalmente ... a mi pregunta: ¿Por qué $().ready(handler)
no se recomienda?
fuente
$.ready
por ejemplo) y no requerir la construcción de un objeto jQuery en primer lugar..ready()
capacidad para elementos individuales, no debería haber ninguna razón para construir un objeto jQuery.$.ready
ya está tomado por una función interna de jQuery, busque el código fuenteready:
.Respuestas:
Recibí una respuesta oficial de uno de los desarrolladores de jQuery:
$().ready(fn)
solo funciona porque$()
solía ser un acceso directo a$(document)
(jQuery <1.4)También lo
$().ready(fn)
era un código legible.Pero la gente solía hacer cosas similares
$().mouseover()
y todo tipo de locuras.y la gente tuvo que hacer
$([])
para obtener un objeto jQuery vacíoAsí que en 1.4 lo cambiamos
$()
da un jQuery vacío y simplemente lo hicimos$().ready(fn)
funcionar para no romper mucho código$().ready(fn)
literalmente ahora está parcheado en el núcleo para que funcione correctamente para el caso heredado.El mejor lugar para el
ready
función es$.ready(fn)
, pero es una decisión de diseño realmente antigua y eso es lo que tenemos ahora.Le pregunté:
Su respuesta fue:
fuente
$()
en primer lugar (por muy tonto que haya sido ese comportamiento) . Por otro lado, tienes razón. No siempre están tan inclinados a hacer cambios importantes, como se demostró cuando intentaron cambiar.attr()
y luego hicieron una reversión rápida unos días después. Esto los ha vinculado a algunas de sus desafortunadas decisiones de diseño tempranas (y de mediana edad).$(selector[, context])
y$(html[, ownerDocument])
. De hecho, también podría usarlo enjQuery()
lugar de$()
si el problema es tener que saberlo. ¿O por qué usar jQuery?Dado que las diferentes opciones hacen prácticamente lo mismo que usted señala, es hora de ponerse el sombrero de escritor de la biblioteca y hacer algunas conjeturas.
Quizás a la gente de jQuery le gustaría tener
$()
disponible para uso futuro (dudoso ya que$().ready
está documentado para funcionar, incluso si no se recomienda; también contaminaría la semántica de$
si fuera un caso especial).Una razón mucho más práctica: la segunda versión es la única que no acaba envolviéndose
document
, por lo que es más fácil de romper al mantener el código. Ejemplo:// BEFORE $(document).ready(foo); // AFTER: works $(document).ready(foo).on("click", "a", function() {});
Contrasta esto con
// BEFORE $().ready(foo); // AFTER: breaks $().ready(foo).on("click", "a", function() {});
Relacionado con lo anterior:
ready
es un fenómeno en el sentido de que es (¿el único?) Método que funcionará igual sin importar lo que envuelva el objeto jQuery (incluso si no envuelve nada como es el caso aquí). Esta es una gran diferencia con la semántica de otros métodos de jQuery, por lo que no se recomienda confiar específicamente en esto.Actualización: como señala el comentario de Esailija, desde una perspectiva de ingeniería,
ready
debería ser un método estático exactamente porque funciona así.Actualización # 2: Excavando en la fuente, parece que en algún momento en la rama 1.4
$()
se cambió para coincidir$([])
, mientras que en 1.3 se comportó como$(document)
. Este cambio reforzaría las justificaciones anteriores.fuente
$(document).ready( function(){ //your code here } );
selector = selector || document
aif(!selector) return this
.Yo diría que es simplemente el hecho de que
$()
devuelve un objeto vacío, mientras$(document)
que no lo hace su aplicaciónready()
a diferentes cosas; todavía funciona, pero yo diría que no es intuitivo.$(document).ready(function(){}).prop("title") // the title $().ready(function(){}).prop("title") //null - no backing document
fuente
$()
.ready
porque es un idioma bien establecido no hacerlo. Seguro que hay una posibilidad teórica de que alguien haga esto, pero nunca he visto código haciendo eso (lo cual no es un buen argumento, pero ya sabes: D).Lo más probable es que esto sea solo un error de documentación y debería corregirse, el único inconveniente de usar
$().ready(handler)
es su legibilidad. Claro, argumenta que$(handler)
es igualmente ilegible. Estoy de acuerdo, por eso no lo uso .También puede argumentar que un método es más rápido que otro. Sin embargo, ¿con qué frecuencia llama a este método suficientes veces seguidas en una sola página para notar una diferencia?
En última instancia, todo se reduce a las preferencias personales. No hay inconveniente en usar
$().ready(handler)
otro que no sea el argumento de legibilidad. Creo que la documentación es errónea en este caso.fuente
Solo para que sea claramente obvio que hay alguna inconsistencia en los tres, además agregué la cuarta forma de uso frecuente:
(function($) {}(jQuery));
Con este marcado:
<div >one</div> <div>two</div> <div id='t'/>
y este código:
var howmanyEmpty = $().ready().find('*').length; var howmanyHandler = $(function() {}).find('*').length; var howmanyDoc = $(document).ready().find('*').length; var howmanyPassed = (function($) { return $('*').length; }(jQuery)); var howmanyYuck = (function($) {}(jQuery)); var howmanyYuckType = (typeof howmanyYuck); $(document).ready(function() { $('#t').text(howmanyEmpty + ":" + howmanyHandler + ":" + howmanyDoc + ":" + howmanyPassed + ":" + howmanyYuckType); });
Los resultados mostrados del div de la última declaración son: 0: 9: 9: 9: indefinido
Entonces, solo las versiones Handler y Doc son consistentes con la convención jQuery de devolver algo de uso a medida que obtienen el selector de documentos y con el formulario Pasado debe devolver algo (yo no haría esto, creo, pero póngalo solo para mostrar "adentro" tiene algo).
Aquí hay una versión de violín de esto para los curiosos: http://jsfiddle.net/az85G/
fuente
null
por lo tanto,.find('*').length
devuelva 0 . ¿Encuentra algo malo con este comportamiento (obvio)?if(!selector) return this
si das algo más, hayregex
y otras cosas sucediendo ... Gracias por tus amables palabras ... Creo que podría pedirle al equipo de jQuery que responde esto (diablos, no es mi biblioteca:-)
).jQuery(document).ready(function(){});
formulario en nuestra base de código en la actualidad, ya que existen diferentes niveles de experiencia en jQuery y es "más obvio" para la gente nueva que ES una función de controlador de eventos para jQuery.Creo que esto es más por legibilidad que por cualquier otra cosa.
Este no es tan expresivo
como
$(document).ready(handler)
Quizás estén tratando de promover alguna forma de jQuery idiomática.
fuente
$(document).ready(handler)
es más legible de lo$(handler)
que se recomienda ...