Dziudek's jogger

Zajmiemy się dziś pluginem hash.js - służy on do operowania na obiektach. Wraz z klasą Hash dostajemy do dyspozycji 10 metod operujących na obiektach. Dzięki nim możemy zmieniać właściwości obiektów, rozszerzać obiekty itd.

Ta część kursu jak i następna będzie przebiegała według podobnego schematu jak poprzednia część kursu na temat pluginu color.js - zatem wszystkie przykłady wykonamy z użyciem konsoli JavaScript - użytkowników Opery i IE odsyłam do namiastki konsoli:

Konsola JavaScript

Zacznijmy od omówienia metod klasy Hash:

• get - metoda ta zwraca nam wartość pola o danej nazwie.
• hasKey - metoda sprawdzająca czy dane pole występuje w danym obiekcie.
• set - dzięki tej metodzie stworzymy nowe pole obiektu lub nadpiszemy już istniejące.
• remove - metoda ta usuwa dane pole z obiektu.
• each - metoda określająca funkcję, która wykona się dla każdego pola obiektu.
• extend - metoda rozszerzająca dany obiekt o inny.
• merge - metoda służąca do łączenia danego obiektu z innymi obiektami.
• empty - metoda ta "czyści" nasz obiekt pól i wartości.
• keys - metoda zwracająca nazwy pól jako tablicę.
• values - metoda działająca analogicznie do poprzedniej z tą różnicą, że zwraca wartości pól w tablicy.

Jak widzimy metod jest sporo, a sam obiekt klasy Hash możemy tworzyć na dwa sposoby - tradycyjnie:

var obj = new Hash({obiekt});

oraz przez funkcję-skrót $H :

var obj = $H({obiekt});

Zmienna {obiekt} to oczywiście dowolny obiekt JavaScript.

Tyle z teorii, pora na praktykę - na początek stworzymy prosty obiekt opisujący naszą osobę:

{
    imie: "Tomek",
    nick: "Dziudek"
}

Teraz przeróbmy go na instancję klasy Hash:

var mojeDane = new Hash({imie: "Tomek",nick: "Dziudek"});

Pora na użycie konsoli w akcji - pobierzmy wartość pola "imie" i wyświetlmy ją w alercie (lub jak kto woli gdzieś indziej - konsola i cały mootools do dyspozycji ;) ):

var mojeDane = new Hash({imie: "Tomek",nick: "Dziudek"});
alert(mojeDane.get("imie"));

To teraz sprawdźmy czy przypadkiem w naszym obiekcie znajduje się pole "mail":

var mojeDane = new Hash({imie: "Tomek",nick: "Dziudek"});
alert(mojeDane.hasKey("mail"));

Zobaczymy wartość false w alercie. Pora to zmienić - stwórzmy pole mail i nadajmy mu odpowiednią wartość:

var mojeDane = new Hash({imie: "Tomek",nick: "Dziudek"});
mojeDane.set("mail","dziudek@test.pl");
alert(mojeDane.hasKey("mail"));

Jak widzimy metoda set jako pierwszy argument pobiera nazwę pola, a jako drugi argument wartość tego pola.

Pora wyrzucić pole "imie" (po co macie je znać :P ):

var mojeDane = new Hash({imie: "Tomek",nick: "Dziudek"});
mojeDane.remove("imie");
alert(mojeDane.hasKey("imie"));

A teraz wyświetlmy wartość wszystkich pól obiektu w alertach (lub jak gdzie kto woli - konsola = wybór ;) ):

var mojeDane = new Hash({imie: "Tomek",nick: "Dziudek"});
mojeDane.each(function(element,index){
    alert(this[index]);
});

Jak widzimy składnia metody each jest podobna do składni metody forEach obiektu Array.

Pora do naszego obiektu dorzucić trochę więcej danych naraz (po co się męczyć z metodą set przy większej ilości danych ?):

var mojeDane = new Hash({imie: "Tomek",nick: "Dziudek"});
mojeDane.extend({mail: "dziudek@test.pl",gg: "8769415",jabber:"dziudek@jabber.org"});
mojeDane.each(function(element,index){
    alert(this[index]);
});

To teraz scalmy kilka obiektów naraz:

var mojeDane = new Hash({imie: "Tomek",nick: "Dziudek"});
var kontakt = {mail: "dziudek@test.pl",gg: "8769415",jabber:"dziudek@jabber.org"};
var strony = {www1: "dziudek.jogger.pl",www2: "dziudek.n3o.pl"};
mojeDane.merge(kontakt,strony);
mojeDane.each(function(element,index){
    alert(this[index]);
});

Jak widzimy metoda merge jako argumenty przyjmuje ciąg obiektów.

Po tym wszystkim wypadałoby posprzątać :

var mojeDane = new Hash({imie: "Tomek",nick: "Dziudek"});
var kontakt = {mail: "dziudek@test.pl",gg: "8769415",jabber:"dziudek@jabber.org"};
var strony = {www1: "dziudek.jogger.pl",www2: "dziudek.n3o.pl"};
mojeDane.merge(kontakt,strony);
mojeDane.each(function(element,index){
    alert(this[index]);
});
mojeDane.empty();
mojeDane.each(function(element,index){
    alert(this[index]);
});

Pora na poznanie nazw wszystkich pól i ich wartości :

var mojeDane = new Hash({imie: "Tomek",nick: "Dziudek"});
var kontakt = {mail: "dziudek@test.pl",gg: "8769415",jabber:"dziudek@jabber.org"};
var strony = {www1: "dziudek.jogger.pl",www2: "dziudek.n3o.pl"};
mojeDane.merge(kontakt,strony);
var k = mojeDane.keys();
var v = mojeDane.values();
var kk = "";var vv = "";
k.each(function(el){kk += el + ", "});
v.each(function(el){vv += el + ", "});
alert("Nazwy pól: "+kk+"\nWartości pól: "+vv);

I w ten szybki sposób przebrnęliśmy przez klasę Hash. Jest ona według mnie bardzo przydatna bo tworzy swoistą mapę danego obiektu dzięki której odczytanie jego zawartości jest banalne. W następnej części kursu zajmiemy się plikiem hash.cookie.js bezpośrednio związanym z pluginem hash.js .