Estaba navegando por el código fuente de jQuery cuando conocí esta línea:

jQuery(this)[ state ? "show" : "hide" ]();

¿Hay alguna ventaja sobre

state ? jQuery(this).show() : jQuery(this).hide();

?

Ejemplo independiente:

var object = {
    foo: function() {
        alert('foo');
    },

    bar: function() {
        alert('bar');
    }
};  


object[true ? 'foo' : 'bar']();
object[false ? 'foo' : 'bar']();
10
DADU 4 jul. 2011 a las 01:30

5 respuestas

La mejor respuesta

No hay ventaja en el rendimiento. Pero hay una ventaja en la longitud del código (si lo ve como una ventaja), y el principio DRY (no repita el código) especialmente si tiene muchos parámetros en sus funciones.

Considera lo siguiente:

obj[ cond ? "foo" : "bar" ]("param1", "param2", "param3");

Versus:

cond ? obj.foo("param1", "param2", "param3") : obj.bar("param1", "param2", "param3");

Como puede ver, repite 'mucho' código de la segunda manera

Espero que esto ayude. Salud

11
Edgar Villegas Alvarado 3 jul. 2011 a las 21:35

En orden, clasificaría:

  1. El código funciona de manera confiable según lo previsto (no es deseable ninguna solución que tenga errores)
  2. El código es legible y fácil de mantener (la falta de legibilidad o facilidad de mantenimiento genera errores y ralentiza el ritmo de desarrollo)
  3. El código es SECO (repetir es malo para la legibilidad, la mantenibilidad y, a veces, el rendimiento)
  4. El código es corto (si logra todas las cosas anteriores, más corto suele ser mejor)

Mi problema con jQuery(this)[ state ? "show" : "hide" ](); es que no es un patrón de diseño común que mucha gente está acostumbrada a ver y a leer. Como tal, no es súper legible y podría confundir fácilmente a las personas que intentan mantener este código en el futuro (lo que genera errores). Como muestran mis prioridades anteriores, favorecería la legibilidad sobre DRY si las dos están en desacuerdo.

En este caso, probablemente escribiría:

var $this = jQuery(this);
state ? $this.show(): $this.hide();

No tan corto, pero más legible en mi opinión.

1
jfriend00 3 jul. 2011 a las 22:34

¿Hay alguna ventaja?

No, aparte del código ligeramente más corto, y no se repite jQuery(this).

Sin embargo, la repetición podría mitigarse declarando, p. $this primero.

No encuentro este patrón particularmente fácil de leer, así que la única vez que lo usaría yo mismo es si la lista de argumentos no es trivial y no depende del método que se invoque.

5
Alnitak 3 jul. 2011 a las 21:40

En su ejemplo, no hay diferencia entre

jQuery(this)[ state ? "show" : "hide" ]();

Y

state ? jQuery(this).show() : jQuery(this).hide();

Sin embargo, los cuadrados se pueden usar para llamar a una función sin su nombre:

var myFunctionName = 'show';
jQuery(this)[ myFunctionName ]();

¿Por qué esto es útil? En el ejemplo anterior, es totalmente inútil. Pero podemos encontrar algunas situaciones en las que podría ser agradable:

// list of available methods
var effects = [ 'hide', 'slideUp', 'fadeOut' ];

// get a random index between 0 and effects.length-1 (2 in this case)
var randomIndex = Math.floor(Math.random() * (effects.length)); 

// get the method name
var methodToCall = effects[ randomIndex ];

jQuery(this)[ methodToCall ]();

Este fragmento elegirá un método aleatorio y llamará a ese método sobre el objeto jQuery. ¿No es lindo? :)

11
pomeh 3 jul. 2011 a las 21:57

La forma jQuery es más concisa y se adhiere al principio DRY. Creo que esa es la principal ventaja sobre el segundo ejemplo.

2
McStretch 3 jul. 2011 a las 21:34