función de JavaScript llamada corchete

Question

estaba navegando el código fuente jQuery cuando me encontré con 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'](); 

Answer 1

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

considerar lo siguiente:

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

Versus:

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

Como se puede ver, se repiten 'mucho' de código en la segunda forma

Espero que esto ayude. Saludos

Answer 2

¿Hay ventajas

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

Sin embargo, la repetición podría ser mitigado por la que se declara p.ej $this primero.

No considero que este patrón sea particularmente fácil de leer, por lo que el único momento en que lo utilizaría es si la lista de argumentos no es trivial y no depende del método que se invoca.

Answer 3

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

Answer 4

En su ejemplo, no hay ninguna diferencia entre

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

y

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

Sin embargo, las plazas se pueden utilizar 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?:)

Answer 5

el fin, yo lo calificaría como:

1. Código funciona de forma fiable según lo previsto (sin solución que es buggy es deseable)
2. código es legible y fácil de mantener (o falta de legibilidad de mantenimiento engendra errores y ralentiza el ritmo de desarrollo)
3. Código es seco (repetición es malo para facilitar la lectura, capacidad de mantenimiento y, a veces el rendimiento)
4. Código es corto (si se logra todos las cosas de arriba, más corto es generalmente 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 (dando lugar a errores). Como muestran mis prioridades anteriores, preferiría la legibilidad a DRY si las dos están en desacuerdo.

En este caso, probablemente escribiría:

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

No es tan corto, pero más fácil de leer en mi opinión.