Dziudek's jogger

Dotarliśmy do ostatniego obiektu natywnego w MooTools 1.2 jaki chciałbym omówić - jest to obiekt Hash, który służy do operowania na obiekcie natywnym Object. Od wersji 1.2 jest to jeden z ważniejszych elementów frameworka MooTools. Hash posiada naprawdę dużo metod, a pierwszą z nich - konstruktor, mieliśmy już okazję poznać podczas omawiania rdzenia frameworka (dodatkowo poznaliśmy też metody forEach, getClean i getLength).

Dla przypomnienia - obiekt typu Hash tworzymy poprzez zapis:

var nowyHash = new Hash({obiekt});

lub poprzez skrót:

var nowyHash = $H({obiekt});

W MooTools obiekt Hash bardzo przypomina tablicę (a dokładniej tablicę asjocjacyjną), co zresztą sami zobaczycie po przyjrzeniu się metodom jakie nam oferuje ten obiekt. Zacznijmy od metod związanych z właściwościami obiektu.

Aby sprawdzić czy dany obiekt posiada właściwość o podanej nazwie zapisujemy:

obiekt.has('nazwaWłaściwości');

Przykładowo stwórzmy sobie obiekt stronaWWW:

var stronaWWW = $H({
    "adres":"http://dziudek.jogger.pl",
    "autor":"Dziudek",
    "wiek":1
});

I wykonajmy kod:

stronaWWW.has("wiek");

Zostanie zwrócona wartość logiczna true, bo właściwość o takiej nazwie występuje w naszym obiekcie.

Czasem zdarzy się potrzeba odczytania nazwy właściwości - wtedy korzystamy z metody keyOf:

stronaWWW.keyOf("Dziudek");

Zwrócona zostanie wartość "autor". Gdyby danej wartości nie było w obiekcie zwrócona zostanie wartość logiczna false.

Możemy też sprawdzić w inny sposób czy w danym obiekcie występuje dana wartość - dzięki metodzie hasValue:

stronaWWW.hasValue("Test");

W wyniku wykonania powyższego kodu otrzymamy wartość false, ponieważ w naszym obiekcie wartość "Test" nie występuje.

Jeżeli ktoś potrzebuje "hurtowo" pobrać klucze lub właściwości (by na przykład zbadać strukturę obiektu) to ma dyspozycji dwie metody - getKeys i getValues - pierwsza z nich zwraca tablicę kluczy,a druga tablicę wartości:

stronaWWW.getKeys();
stronaWWW.getValues();

Powyższy kod zwróci odpowiednio:

["adres", "autor", "wiek"]
["http://dziudek.jogger.pl", "Dziudek", 1]

Rzut oka na te tablice i już wiemy wszystko o strukturze obiektu stronaWWW.

Wartość pojedynczej właściwości naszego obiektu pobieramy poprzez metodę get:

stronaWWW.get("autor");

Gdybyśmy chcieli zmienić jakąś właściwość obiektu mamy z kolei do dyspozycji metodę set:

stronaWWW.set("adres","http://mini.jogger.pl");

Gdy po tej operacji wykonamy:

stronaWWW.getValues();

Zobaczymy, że nasz obiekt rzeczywiście został zmodyfikowany:

["http://mini.jogger.pl", "Dziudek", 1]

Aby usunąć daną właściwość korzystamy z metody remove, która podobnie jak metoda get pobiera nazwę właściwości jako argument:

stronaWWW.remove("wiek");

Do zamiany naszego obiektu na ciąg zapytania stosowany chociażby w metodach GET i POST, wykorzystujemy metodę toQueryString:

stronaWWW.toQueryString();

Otrzymamy wówczas ciąg postaci:

adres=http%3A%2F%2Fdziudek.jogger.pl&autor=Dziudek&wiek=1

Istnieją jeszcze co najmniej trzy metody dodawania nowych właściwości do obiektu: include, extend i merge.

Metoda include powoduje dodanie danej właściwości pod warunkiem, że jeszcze ona nie istnieje w naszym obiekcie. Robiąc to metodą set zawsze dodamy nową właściwość do naszego obiektu:

stronaWWW.include("Serwis","JoggerPL");

Metody extend i merge pobierają jako argument obiekt o który ma zostać rozszerzony obiekt bazowy. Różnica polega na tym, że metoda merge nie dodaje zduplikowanych właściwości, a extend je nadpisuje. Weźmy dla przykładu dwa obiekty:

var bazowy = $H({
    "aaa": 1,
    "bbb": 2,
    "ccc": 3
});

var rozszerzenie = {
    "ccc": 4,
    "ddd": 5,
    "eee": 6
}

W wypadku metody extend:

bazowy.extend(rozszerzenie);

Otrzymamy obiekt postaci:

{
    "aaa": 1,
    "bbb": 2,
    "ccc": 4,
    "ddd": 5,
    "eee": 6
}

Podobna operacja z użyciem metody merge:

bazowy.merge(rozszerzenie);

Zwróci taki obiekt:

{
    "aaa": 1,
    "bbb": 2,
    "ccc": 3,
    "ddd": 5,
    "eee": 6
}

Myślę, że różnica we właściwości "ccc" jest dostrzegalna ;)

Gdy chcemy zupełnie wyczyścić obiekt, korzystamy z metody empty:

obiekt.empty();

Powyższy kod zwróci nam po prostu pusty obiekt:

{}

Niezależnie od zawartości pierwotnego obiektu.

Pozostały nam jeszcze cztery metody, które znamy zapewne dobrze z obiektu Array: map, filter, every, some. To upodobnienie obiektów do tablic może być niezwykle przydatne, zwłaszcza do filtrowania zawartości.

Każda z tych metod pobiera funkcję podobną do tej znanej z metody forEach:

function(wartosc,klucz){...}

Jako drugi argument metody można podać uchwyt dla operatora this wewnątrz funkcji (czyli bind).

Opcjonalnie jako trzeci argument funkcji dla tej metody przekazuje się uchwyt do aktualnie przetwarzanego obiektu:

function(wartosc,klucz,obiekt){...}

Sens działania tych metod każdy powinien pamiętać, jeśli nie z własnej wiedzy na temat JS to na pewno z omówienia obiektu Array. Ja pozwolę sobie zaprezentować jedynie przykłady i rezultaty ich działania, by nie pisać w nieskończoność o jednym i tym samym:

Metoda map

var potegiLiczb = $H({
    "jeden":1,
    "dwa":2,
    "trzy":3,
    "cztery":4,
    "piec":5
}).map(function(value){
    return value*value;
});

zwróci nam obiekt postaci:

{
    "jeden": 1,
    "dwa": 4,
    "trzy": 9,
    "cztery": 16,
    "piec": 25
}

Metoda filter

var wiekszeNizTrzy = $H({
    "jeden":1,
    "dwa":2,
    "trzy":3,
    "cztery":4,
    "piec":5
}).filter(function(value){
    return value > 3;
});

Zwróci nam obiekt postaci:

{
    "cztery":4,
    "piec":5
}

Metoda every

var wszystkieWiekszeNizTrzy = $H({
    "jeden":1,
    "dwa":2,
    "trzy":3,
    "cztery":4,
    "piec":5
}).every(function(value){
    return value > 3;
});

Powyższy kod zwróci nam wartość false, ponieważ nie wszystkie elementy obiektu mają wartości większe niż 3.

Metoda some

var niektoreWiekszeNizTrzy = $H({
    "jeden":1,
    "dwa":2,
    "trzy":3,
    "cztery":4,
    "piec":5
}).some(function(value){
    return value > 3;
});

Tutaj z kolei dostaniemy wartość true, ponieważ co najmniej jeden element obiektu ma wartość większą niż 3.

Aliasy metod obiektu Hash

Na koniec lista równoznacznych zapisów (czyli funkcje, które można wywołać na dwa sposoby). Poniższe zapisy są równoznaczne:

stronaWWW.keyOf("Dziudek");
stronaWWW.indexOf("Dziudek");

stronaWWW.hasValue("Test");
stronaWWW.contains("Test");

stronaWWW.remove("wiek");
stronaWWW.erase("wiek");

I tak oto poznaliśmy implementacje obiektów natywnych w MooTools 1.2 . Z zagadnień teoretycznych pozostaje nam jeszcze programowanie obiektowe, którym zajmiemy się w dwóch kolejnych częściach kursu po czym wypłyniemy na szerokie wody - selekcji elementów, manipulacji nimi czy animacji...