Dziudek's jogger

Obiekt Function w MooTools posiada następujące metody dodatkowe: create, pass, attempt, bind, bindWithEvent, delay, periodical, run. Metody te pozwalają tworzyć specyficzne wywołania danej funkcji.

Metoda create jest tutaj podstawą istnienia pozostałych metod, gdyż wszystkie inne metody obiektu Function to po prostu metoda create wywołana z odpowiednimi parametrami - celem ich istnienia jest zwięzłość zapisu, gdyż jak się za chwilę przekonamy, metoda create jest dość rozbudowana i bezsensowne byłoby zapisywanie jej za każdym razem z wszystkimi niezbędnymi do uzyskania oczekianego efektu parametrami.

create - podstawa pozostałych metod obiektu Function

Metoda create przyjmuje następujące parametry:

• bind - uchwyt do obiektu, który będzie w ciele funkcji powiązany z operatorem this. Domyślnie operator this odnosi się do funkcji, która jest wywoływana,
• event - wartość logiczna określająca czy funkcja będzie używana jako obserwator zdarzeń (z ang. event listener). Domyślna wartość to false. Jeżeli funkcja jest obserwatorem zdarzeń to jako pierwszy argument pobiera uchwyt do tego zdarzenia,
• arguments - argument/y pobierane przez funkcję. Jeżeli argument jest jeden to zapisujemy go normalnie, w wypadku większej ilości argumentów podajemy je jako tablicę argumentów,
• delay - opóźnienie wykonania danej funkcji podane w milisekundach,
• periodical - parametr określający czas, który mija pomiędzy kolejnymi wykonaniami funkcji (jest ona wykonywana okresowo co podaną ilość milisekund),
• attempt - parametr logiczny, który w wypadku wartości true powoduje wykonanie funkcji, a gdy zostaną stwierdzone błędy w jej działaniu funkcja zwraca wartość logiczną false.

Stwórzmy teraz kopię już istniejącej funkcji zdefiniowanej jako:

var  funkcjaTestowa = function(){
    alert("Test funkcji");
}

Aby skopiować tą funkcję i móc nią dalej manipulować w MooTools stosujemy następujący zapis:

var tester = funkcjaTestowa.create();

Od teraz obiekt tester działa tak samo jak nasza funkcjaTestowa. Możemy to łatwo sprawdzić wpisując w konsoli:

tester();

Ujrzymy alert z komunikatem takim jaki generuje właśnie funkcjaTestowa.

Gdybyśmy zapisali :

var tester = funkcjaTestowa.create({delay: 2000});

Wtedy ten sam alert pokazałby się dopiero po dwóch sekundach.

Warto jeszcze zwrócić uwagę na parametry event i arguments - jeżeli oba są podane (event ma wartość true, a arguments jest niepusty lub jest tablicą) wtedy funkcja przy wywołaniu jako pierwszy argument pobiera obiekt zdarzenia, a jako kolejne pobiera argumenty. Jeżeli tylko jeden z parametrów jest określony, wtedy jest on pobierany z pierwszej pozycji.

Metoda create jest przydatna wtedy gdy musimy zmodyfikować kilka parametrów naraz. W sytuacji pojedynczych zmian lepiej stosować pozostałe metody obiektu Function.

Metody obiektu Function bazujące na create

Zacznijmy od metody pass - jest to metoda create ograniczona do określenia parametrów arguments i bind. Stwórzmy prostą funkcję dodającą podane jako argumenty liczby:

var dodawanie = function(){
    var suma = 0;
 
    for(var i = 0;i < arguments.length;i++) suma += arguments[i];
 
    return suma;
}

Zwróćmy uwagę, że powyższa funkcja jest elastyczna - nie ma określonej stałej liczby argumentów (oczywiście chodzi tu o obsługę wszystkich argumentów, gdyż w każdej funkcji bez względu na jej ciało możemy podać tyle argumentów ile chcemy) - możemy ich podać dowolnie wiele (no może nie do końca - ograniczeniem jest z reguły 255 argumentów), a ta funkcja je wszystkie doda.

Stwórzmy jej wersję z różnymi liczbami podanymi jako obiekt dodawanie z metodą pass:

var dwa = dodawanie.pass([1,1]);
var siedem = dodawanie.pass([1,2,4]);
var dwadziescia = dodawanie.pass(20);

Gdy wywołamy powyższe funkcje otrzymamy wyniki:

2
7
20

Dla odmiany teraz będziemy dzielić :) Stworzymy funkcję, która ma błąd składniowy:

var dzielenie = function(){
    return 100/a;
}

Zmienna a nie jest zadeklarowana i normalne wywołanie:

dzielenie();

Spowoduje wystąpienie błędu. Aby tego uniknąć zastosujemy metodę attempt:

dzielenie.attempt();

Zamiast nieoczekiwanego (przyjmijmy, że jest nieoczekiwany ;) ) błędu uzyskamy po prostu wartość false.

Warto dodać, że metoda attempt może pobierać dwa argumenty - argumenty funkcji oraz parametr bind.

Kolejna z metod - bind pobiera trzy parametry - bind, arguments i event (w tej właśnie kolejności). Stwórzmy funkcję, która wyświetla w komunikacie obiekt do którego odnosi się operator this:

var odniesienie = function(){
    alert(this);
}
 
odniesienieNowe = odniesienie.bind(10);
 
odniesienieNowe();

Zauważmy, że wywołanie metody attempt jest równoznaczne z wykonaniem naszej funkcji, w wypadku metody bind możemy zmodyfikować funkcję i wywołać ją kiedy tylko chcemy.

Metoda bindWithEvent pobiera takie same parametry jak metoda bind poza event. Jaka jest różnica pomiędzy nimi ? Właśnie to, że nie pobiera parametru event - jest on domyślnie ustawiony jako true. Dzięki temu w ciele funkcji możemy wykorzystywać różne możliwości związane z obiektem Event, ale o tym połączeniu napiszę w następnej części kursu gdy zdobędziemy wystarczającą ku temu wiedzę.

Metody delay i periodical to jedne z częściej używanych metod - pozwalają szybko ustalić opóźnienie lub czas okresowego wykonania funkcji. Warto przy ich stosowaniu zapisywać uchwyt do tzw. timera, po to by mieć możliwość zatrzymania odliczania, bądź przerwania okresowego wykonywania funkcji:

var timer = (function(){alert("Test");}).delay(5000);

Możemy przerwać odliczanie wykonaniem kodu:

$clear(timer);

To samo ma miejsce w wypadku metody periodical.

Większość z prezentowanych w tym wpisie funkcji poznamy bliżej podczas manipulowania elementami i tworzenia animacji z użyciem MooTools - wtedy będzie można zobaczyć jak ogromny drzemie w nich potencjał i jak bardzo są one pomocne w skracaniu zapisu.

Ostatnia metoda obiektu Function to metoda run - pobiera ona takie same parametry jak metoda pass, ale jej działanie jest inne - w wypadku użycia metody run następuje od razu wykonanie funkcji. Dla przykłady weźmy nasz kod z przykładu dla metody pass:

var dodawanie = function(){
    var suma = 0;
 
    for(var i = 0;i < arguments.length;i++) suma += arguments[i];
 
    return suma;
}
 
var siedem = dodawanie.pass([1,2,4]);
 
siedem();

I zamieńmy go na wersję z użyciem metody run:

var dodawanie = function(){
    var suma = 0;
 
    for(var i = 0;i < arguments.length;i++) suma += arguments[i];
 
    return suma;
}
 
dodawanie.run([1,2,4]);

Krótko mówiąc nie musimy tworzyć nowej zmiennej by uruchomić funkcję.

Podsumowanie

Poznaliśmy podstawowe możliwości obiektu Function udostępniane przez MooTools. Wiedza ta przyda nam się już w następnej części kursu związanej z obiektem natywnym Event, jak i w późniejszych wpisach związanych z animacjami, wywołaniami AJAX itp.