Dziudek's jogger

Plik moo.js stanowi podstawę działania całego frameworka mootools. Dzięki niemu możemy tworzyć w bardziej czytelny sposób klasy w JavaScript .

W moo.js zawarta jest klasa bazowa wykorzystywana w pozostałych plikach oraz funkcje powiązane z obiektami. Klasa bazowa ma do dyspozycji kilka metod, które możemy wykorzystać we własnych aplikacjach opartych o programowanie zorientowane obiektowo.

Metody klasy bazowej:

• empty – zwraca pustą funkcję
• extend – zwraca kopię klasy rozszerzoną o podane parametry i metody
• implement – w przeciwieństwie do extend zwiększa funkcjonalność klasy bazowej (czyli nie zwraca jej kopii, a operuje bezpośrednio na niej)

Dodatkowo mamy do dyspozycji dwie metody do operacji na obiektach:

• extend - kopiuje i nadpisuje właściwości pomiędzy obiektami
• native - działa tak samo jak metoda implement klasy bazowej

Stwórzmy naszą pierwszą klasę z użyciem pliku moo.js. Klasy tworzymy według wzoru:

var nazwa_klasy = new Class({
    initialize: function(parametry_startowe){
        // kod jaki wykona się przy tworzeniu obiektu
    }
});

Natomiast obiekty klasy tworzymy następująco:

var obiekt = new nazwa_klasy(parametry_startowe);

Powyższe zapisy spowodują stworzenie nowego obiektu, a podczas tworzenia tego obiektu zostanie wykonana metoda initialize korzystająca z podanych parametrów startowych. To teraz przejdźmy do konkretów ;) Stworzymy sobie klasę Komputer, która podczas tworzenia obiektu będzie pokazywała nazwę komputera:

var Komputer = new Class({
    initialize: function(nazwa_komputera){
        this.nazwa = nazwa_komputera;
        alert(this.nazwa);
    }
});

var pecet = new Komputer('Blaszak');

Powyższy kod spowoduje pokazanie alertu z treścią "Blaszak". Z powyższego kodu możemy jeszcze wyczytać jak tworzymy pola obiektu - poprzez odwołanie postaci:

this.nazwa_pola = wartość_pola;

Do wartości pola możemy się odwoływać zarówno w kodzie klasy jak i wykorzystując obiekt:

alert(nazwa_obiektu.nazwa_pola);

Powyższy kod spowoduje wyświetlenie jako treść alertu wartości danego pola należącego do danego obiektu. Zatem nasz przykład z klasą Komputer moglibyśmy zapisać tak:

var Komputer = new Class({
    initialize: function(nazwa_komputera){
        this.nazwa = nazwa_komputera;
    }
});

var pecet = new Komputer('Blaszak');
alert(pecet.nazwa);

Oczywiście do naszej klasy możemy dodać kilka metod. Dodajmy do naszej klasy Komputer metody wlacz i wylacz:

var Komputer = new Class({
    initialize: function(nazwa_komputera){
        this.nazwa = nazwa_komputera;
        this.stan = 'wylaczony';
    },

    wlacz: function(){
        this.stan = 'wlaczony';
    },

    wylacz: function(){
        this.stan = 'wylaczony';
    }
});

Tworzymy teraz obiekt tej klasy:

var pecet = new Komputer('Blaszak');
alert(pecet.nazwa + ' jest ' + pecet.stan);
pecet.wlacz();
alert(pecet.nazwa + ' jest ' + pecet.stan);
pecet.wylacz();
alert(pecet.nazwa + ' jest ' + pecet.stan);

Powyższy kod spowoduje pokazanie trzech alertów z nazwą obiektu peceta i jego stanu.

Jak możemy jeszcze rozszerzyć możliwości naszej klasy bez ingerowania w jej kod ? Dzięki metodom o których już wspominałem implement i extend. Metoda implement jak już pisałem powoduje rozszerzenie możliwości klasy bez tworzenia jej kopii. Jest to przydatne zwłaszcza wtedy gdy tylko w niektórych wypadkach potrzebujemy rozszerzonej wersji naszej klasy. Zamiast od razu tworzyć obiekty korzystające z rozbudowanej klasy, rozbudowujemy naszą klasę dopiero wtedy gdy zajdzie taka potrzeba ;) Przykład samego wykorzystania metody implement:

Komputer.implement({
    zmianaNazwy: function(nowa_nazwa){
        this.nazwa = nowa_nazwa;
    }
});

Dzięki powyższemu zapisowi uzyskamy dostęp do nowej funkcji dla obiektów klasy Komputer. Wywołanie:

var pecet = new Komputer('Blaszak');
pecet.zmianaNazwy('Blaszaczek');
alert('Nowa nazwa komputera to ' + pecet.nazwa);

Spowoduje wyświetlenie alertu z napisem "Nowa nazwa komputera to Blaszaczek" ;)

Trochę ciekawsze możliwości daje nam metoda extend. Dzięki niej możemy tworzyć klasy bazujące na innej klasie, które mogą od niej dziedziczyć pola i metody. Na początku dodajmy pole rodzaj do klasy Komputer, wygląda ona teraz następująco:

var Komputer = new Class({
    initialize: function(nazwa_komputera){
        this.rodzaj = '';
        this.nazwa = nazwa_komputera;
        this.stan = 'wylaczony';
    },

    wlacz: function(){
        this.stan = 'wlaczony';
    },

    wylacz: function(){
        this.stan = 'wylaczony';
    }
});

A teraz stworzymy dodatkowe klasy - PC i MAC, które będą posiadały cechy komputera, ale dodatkowo będą posiadały coś charakterystycznego dla siebie :

var PC = Komputer.extend({
    initialize: function(nazwa, system){
        Komputer.rodzaj = 'PC';
        this.nazwa;
        this.OS = system;
    }
});

var MAC = Komputer.extend({
     initialize: function(stan, nazwa){
        Komputer.rodzaj = 'MAC';
        this.parent(nazwa);
    },
    odpalSafari: function(){
        this.wlacz();
        alert(this.nazwa + ' jest ' + this.stan);
         alert('No teraz można odpalać Safari ;)');
    }
});

Jak widać obiekty klasy PC tworzymy podając nazwę komputera i nazwę jego systemu operacyjnego. Jeżeli jakieś pole jest dziedziczone od klasy bazowej to stosujemy zapis:

this.parent(nazwa_pola);

Jeśli chcemy zmodyfikować wartość danego pola to stosujemy oczywiście zapis:

nazwa_klasy_bazowej.nazwa_pola = wartość_pola;

No to stwórzmy sobie prawdziwego peceta z systemem operacyjnym Linux ( ;) ) :

var komp = new PC('Blaszak','Linux');
alert('Komputer typu ' + Komputer.rodzaj + ' o nazwie ' + komp.nazwa + ' używa systemu operacyjnego ' + komp.OS);

Kod spowoduje pokazanie się alertu z tekstem "Komputer typu PC o nazwie Blaszak używa systemu operacyjnego Linux"

To teraz pobawmy się makiem ;) Tworzymy maka :

var komp = new MAC('wlaczony','Maczek');
alert('Komputer typu ' + Komputer.rodzaj + ' nazywa się ' + komp.nazwa);

I odpalamy przeglądarkę Safari ;) (przy okazji jak ktoś doczyta w kodzie klasy MAC odpalamy też komputer ;) ) :

komp.odpalSafari();

Jeszcze wzmianka o metodzie extend dla obiektów. Tworzymy dwa obiekty - pc i pc2:

var pc = {
    'nazwa': 'Blaszak',
    'typ': 'PC'
};

var pc2 = {
    'nazwa': 'Blaszaczek',
    'procesor': 'P5'
};

Następnie wykonujemy metodę extend:

Object.extend(pc, pc2);

Po tym zabiegu obiekt pc będzie się prezentował następująco:

var pc = {
    'nazwa': 'Blaszaczek',
    'typ': 'PC',
    'procesor': 'P5'
};

Jak widać metoda extend spowodowała nadpisanie wartości pól obiektu pc wartościami pól pc2, a w wypadku gdy pole z obiektu pc2 nie istniało w obiekcie pc, to zostało ono w nim utworzone i otrzymało wartość jaką posiadało w obiekcie pc2.

Przejdź do opisu pliku utility.js