JavaScript nawias kwadratowy funkcja połączenia

Question

Przeglądając kod źródłowy jQuery kiedy spotkałem tę linię:

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

czy są jakieś zalety w porównaniu

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

?

Samodzielny przykład:

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

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


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

Answer 1

Nie ma żadnej przewagi w wydajności. Ale jest przewaga długości kodu (jeśli widzisz go jako zaletę) i zasada DRY (nie powtarzaj kodu) specjalnie, jeśli masz wiele parametrów w swoich funkcjach.

Rozważmy następujący:

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

Versus:

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

Jak widać, powtórzyć 'dużo' kodu w drugi sposób

Hope this helps. Cheers

Answer 2

Czy są jakieś zalety

Nie, inny niż nieco krótszy kod, a nie powtarzanie jQuery(this).

Jednak powtarzanie mógłby zostać złagodzony poprzez uznanie na przykład $this najpierw.

Nie uważam tego wzoru za szczególnie łatwy do odczytania, więc jedyny przypadek, w którym będę go używał, jest taki, że lista argumentów jest nietrywialna i nie zależy od metody, która jest wywoływana.

Answer 3

Sposób jQuery jest bardziej zwięzły i przestrzega zasady DRY. Myślę, że to jest główna przewaga nad drugim przykładem.

Answer 4

W przykładzie, nie ma różnicy między

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

i

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

Jednak kwadraty mogą być wykorzystane do wywołania funkcji bez jego nazwa:

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

Dlaczego to jest przydatne? W powyższym przykładzie jest całkowicie bezużyteczny. Ale możemy znaleźć pewne sytuacje, w których może to być miły:

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

Ten fragment będzie wybrać jedną metodę losowego i wywołanie tej metody nad obiektem jQuery. Czy to nie jest miłe?:)

Answer 5

W porządku, będę rank:

1. Kod niezawodnie działa zgodnie z przeznaczeniem (rozwiązanie to nie jest pożądane buggy)
2. Kod jest czytelny i łatwy w utrzymaniu (brak czytelności lub konserwacji rodzi błędy i spowalnia tempo rozwoju)
3. Code jest suche (powtarzając jest złe dla czytelności, konserwacji i czasami wydajność)
4. kod jest krótki (jeśli osiąga wszystkie powyższe rzeczy, krótszy jest zwykle lepiej)

Mój problem z jQuery(this)[ state ? "show" : "hide" ](); jest to, że nie jest to wspólny wzorzec projektowy, że wiele osób są przyzwyczajeni i wykorzystywane do czytania. Jako takie, nie jest super czytelne i może z łatwością pomylić osoby próbujące zachować ten kod w przyszłości (prowadząc do błędów). Jak pokazują powyższe priorytety, wolałabym czytelność w stosunku do DRY, jeśli obaj są przeciwni.

W tym przypadku, to bym chyba napisać:

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

Nie tak krótka, ale bardziej czytelny moim zdaniem.