El concepto de captadores y definidores en JavaScript es solo una de esas cosas que debe comprender. Son agradables en jQuery porque la API es tan consistente que una vez que la obtienes, puedes adivinar cómo funcionará para varios métodos. En el nivel más básico ...
Los setters hacen algo.
Los captadores devuelven un valor .
A menudo, se puede utilizar un solo método de cualquier manera. Tome el método de la altura, por ejemplo.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();¿Ver la diferencia? El definidor pasa un parámetro cuando se usa el método. El captador no pasa nada . Así es como jQuery sabe qué hacer. Solo prueba si hay un parámetro allí o no. Si no, se comporta como un captador. Si está ahí, se comporta como un colocador. Es simplemente una buena conveniencia de la API, en lugar de tener métodos separados como getHeight y setHeight.
Vale la pena señalar que un getter usado por sí solo no hace nada.
// Useless $("#example").height();Y si establece el valor de una variable usando un setter, obtendrá el objeto jQuery devuelto.
// x will be a jQuery object containing #example var x = $("#example").height(100);Eso puede ser confuso, pero también un pequeño truco ingenioso para guardar el código. Si sabe que necesita almacenar en caché ese objeto jQuery y establecer su altura, también podría hacerlo en una línea de código.
Vea el lápiz 8ff68485673396d452f650bfb437fb2a de Chris Coyier (@chriscoyier) en CodePen
También se menciona en el artículo box-sizing: border-box;. El tamaño de la caja es una propiedad CSS muy útil. Soy un gran defensor de establecerlo en todos los elementos, como:
* ( box-sizing: border-box; )Como se señaló en el video, esto también hace que height()jQuery sea un poco más predecible y consistente. Sin el conjunto de cuadro de borde, height()es igual a la propiedad de altura en CSS, o cualquier altura que tenga naturalmente el elemento, menos el relleno y el borde. Con border-boxset, height()es exactamente la altura que ocupa ese elemento en la pantalla, incluidos el relleno y el borde. Sin un border-boxconjunto, para obtener eso, debe usar outerHeight()en jQuery.