fonction JavaScript carré appel

Question

support

naviguait le code source jQuery quand j'ai rencontré cette ligne:

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

Y a-t-il des avantages par rapport

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

?

exemple autonome:

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

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


object[true ? 'foo' : 'bar'](); 
object[false ? 'foo' : 'bar'](); 

Answer 1

Il n'y a aucun avantage en performance. Mais il y a un avantage dans la longueur du code (si vous le voyez comme un avantage), et le principe DRY (ne répétez pas le code) spécialement si vous avez beaucoup de paramètres dans vos fonctions.

Considérez ce qui suit:

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

Versus:

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

Comme vous pouvez le voir, vous répéter 'beaucoup' de code dans la deuxième façon

Hope this helps. Vive

Answer 2

Y a-t-il des avantages

Non, autre que le code légèrement plus court, et ne pas répéter jQuery(this).

Cependant la répétition pourrait être atténué en déclarant par exemple $this d'abord. Je ne trouve pas ce modèle particulièrement facile à lire, donc la seule fois où je l'utiliserais moi-même est si la liste d'arguments n'est pas triviale, et ne dépend pas de la méthode qui est invoquée.

Answer 3

La méthode jQuery est plus concise et adhère au principe DRY. Je pense que c'est le principal avantage par rapport au deuxième exemple.

Answer 4

Dans votre exemple, il n'y a pas de différence entre

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

et

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

Cependant, les places peuvent être utilisées pour appeler une fonction sans son nom:

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

Pourquoi c'est utile? Dans l'exemple ci-dessus, c'est totalement inutile. Mais on peut trouver des situations où il pourrait être agréable:

// 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 ](); 

Cet extrait choisira une méthode aléatoire et appeler cette méthode sur l'objet jQuery. C'est pas gentil?:)

Answer 5

Pour, je rang:

1. code fonctionne de manière fiable comme prévu (pas de solution qui est buggy est souhaitable)
2. code est lisible et facilement maintenable engendre (manque de lisibilité ou maintenabilité bogues et ralentit le rythme de développement)
3. code est DRY (répétition est mauvais pour la lisibilité, maintenabilité et parfois performance)
4. code est court (si elle atteint toutes les choses ci-dessus, plus courte est généralement mieux)

Mon problème avec jQuery(this)[ state ? "show" : "hide" ](); est que ce n'est pas un modèle de conception commun que beaucoup de gens sont habitués à voir et à utiliser pour lire. En tant que tel, ce n'est pas super lisibles et pourrait facilement confondre les gens qui essaient de maintenir ce code à l'avenir (conduisant à des bugs). Comme mes priorités ci-dessus le montrent, je favoriserais la lisibilité sur DRY si les deux sont en désaccord.

Dans ce cas, je serais probablement écrire:

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

Pas aussi court, mais plus facile à lire à mon avis.