środa, 23 marca 2011

Jak w jQuery wywołać funkcję z parametrami

JQuery w bardzo wielu miejscach używa funkcji bezimiennej jako parametru.
Na przykład jeśli chcemy zareagować na zmianę w polu "#name":
jQuery("#name").change(function(){
  //tu jakieś operacje
});
Wszystko fajnie do momentu, gdy te wewnętrzne funkcje nie zaczynają się rozrastać i ciągnąć za sobą nowe funkcje. Kod staje się całkowicie nieczytelny i bałagan z każdą chwilą się pogłębia.
Częściowym rozwiązaniem jest osadzanie funkcji nazwanych jako parametru.
W poprzednim przykładzie funkcję bezimienną moglibyśmy zastąpić nazwaną, jak choćby:
function makeChanges() {
  //tu kod z funkcji nienazwanej
}
którą osadzamy w poprzednim przykładzie:
jQuery("#name").change(makeChanges);
Zwróć uwagę na brak nawiasów!

Taaa... wygląda nieźle.  Wygląda nieźle, ale tylko do momentu, w którym musimy użyć funkcji makeChanges() w jakimś innym miejscu kodu. Po to przecież ją wyekstrahowaliśmy (pamiętasz zasadę DRY?). Potrzebny wtedy jakiś parametr, a najczęściej dwa... albo i trzy.
Niestety coś takiego w sposób prosty nie zadziała:
jQuery("#name").change(makeChanges(paramOne, paramTwo));
Aby zadziałało funkcja makeChanges() musi zwrócić funkcję gdyż tego wymaga jQuery. Zróbmy więc tak:
function makeChanges(paramOne, paramTwo) {
  return function() { 
    // tu dopiero kod z funkcji nienazwanej
    // z wykorzystaniem parametru paramOne
    // i parametru paramTwo
  } 
}
Teraz działa!

Miłej zabawy :-)

1 komentarz:

  1. Działa dokładnie tak samo gdy funkcja makeChanges nie zwraca funkcji, a jej użycie wygląda tak:

    $("#name").change(function()makeChanges(paramOne, paramTwo)});

    OdpowiedzUsuń