Dziudek's jogger

Plik class.js to pierwszy z dwóch plików grupy Class we frameworku mootools. Zawiera on podstawowe funkcje przydatne przy programowaniu obiektowym w JavaScript. Grupa Class powstała dopiero w wersji 1.1 mootools - wcześniej funkcje, które oferuje były dostępne w plikach moo.js, event.js oraz common.js . Obecna forma podziału jest według mnie o wiele lepsza, choć framework składa się teraz z większej ilości części...

Tworzenie klas przy użyciu mootools jest bardzo proste - w najprostszym wypadku ograniczy się do zapisu:

var NowaKlasa = new Class();

Ale oczywiście w tym wypadku żadnego pożytku z takiej klasy mieć nie będziemy ;) Dlatego warto dodać do naszej klasy kod, który wykona się zaraz po jej stworzeniu - służy do tego metoda initialize. Przykładowy kod (Przy okazji zmienię nazwę klasy):

var Komputer = new Class({
   initialize: function(){
      alert('Komputer został stworzony :D');
   }
});

Dzięki zastosowaniu metody initialize po wystąpieniu zapisu:

var Pecet = new Komputer();

Pojawi się alert z odpowiednim tekstem.

A może chcemy by nasz komputer posiadał jakieś własne cechy ? Co to za komputer bez IP ;) Tak więc dodajmy przy inicjalizacji naszemu komputerkowi IP. Możemy to zrobić na dwa sposoby - sami zdecydować jakie IP będzie miał komputer, albo też dać użytkownikowi pole do popisu i pozwolić mu samemu wybrać. Zaprezentuje oba przypadki:

Sami nadajemy IP komputerowi:

var Komputer = new Class({
   initialize: function(){
      this.IP = '127.0.0.1';
   }
});

Dajemy możliwość podania IP komputera użytkownikowi przy inicjalizacji:

var Komputer = new Class({
   initialize: function(ip){
      this.IP = ip;
   }
});

IP jest od tej pory polem każdego obiektu klasy Komputer. Stwórzmy sobie teraz dwa komputery :

var Pecet = new Komputer();

powyższy kod dla pierwszego kodu z nadawanie IP komputerowi, a poniższy kod dla drugiego kodu:

var Pecet = new Komputer('192.168.0.1');

W obu wypadkach aby odczytać IP obiektu Pecet wystarczy zapis:

Pecet.IP;

To tak słowem wstępu o tworzeniu klas z użyciem mootools. A teraz przejdźmy do tego co jeszcze udostępnia nam plik class.js . Zacznijmy od metody empty - gdy tworzymy klasy zawierające kilka metod, może się zdarzyć potrzeba stworzenia pustej funkcji. Wtedy zamiast zapisu:

var Komputer = new Class({
   initialize: function(ip){
      this.IP = ip;
   },

   uruchom: function(){}
});

Możemy zastosować zapis:

var Komputer = new Class({
   initialize: function(ip){
      this.IP = ip;
   },

   uruchom: this.empty;
});

Oczywiście działanie metody jest natury nazwijmy to "uczytelniającej" ;) O wiele ciekawsze będą dla nas metody extend i implement.

extend

Jeżeli mamy dużo klas w projekcie to z pewnością pomiędzy nimi istnieją jakieś podobieństwa. Bazując już na znanej nam klasie Komputer - podobieństwo pomiędzy makiem, a PC będzie takie, że na pewno oba mają jakieś IP. Zatem zamiast tworzyć od podstaw klasy MAC i PC możemy rozszerzyć możliwości klasy Komputer. Do tego celu używamy właśnie metody extend. Gdy chcemy stworzyć klasę opartą o istniejącą już klasę zapiszemy:

var NowaKlasa = StaraKlasa.extend({
   initialize: function(nowa_cecha,stara_cecha){
      this.parent(stara_cecha);
      this.cecha = nowa_cecha;
   }
});

Powyższy kod spowoduje, że zapis:

var NowyObiekt = new NowaKlasa(nowa_cecha,stara_cecha);

Stworzy nowy obiekt oparty o klasę NowaKlasa, która posiada dwie właściwości - nowa_cecha i stara_cecha, przy czym zapis this.parent(stara_cecha) powoduje odwołanie do klasy StaraKlasa, która tworzy właściwość stara_cecha... Tak na sucho to pewnie ciężko to przyswoić ale myślę, że konkretne przykłady rozjaśnią sprawę ;)

Stwórzmy zatem dwie klasy - MAC i PC będące rozszerzeniem klasy Komputer:

var Komputer = new Class({
   initialize: function(ip){
      this.IP = ip;
   }
});

var PC = Komputer.extend({
   initialize: function(os,ip){
      this.parent(ip);
      this.system = os;
   }
});

var MAC = Komputer.extend({
   initialize: function(wyglad,ip){
      this.parent(ip);
      this.wyglad = wyglad;
   }
});

var Mak = new MAC('uroczy','127.0.0.1');
var Blaszak = new PC('linux','192.168.0.1');


Mamy zatem dwa obiekty i każdy z nich posiada po dwie właściwości - jedną dziedziczoną z klasy Komputer i jedną charakterystyczną tylko dla siebie - w wypadku klasy MAC jest to właściwość "wyglad", a w wypadku klasy PC jest to właściwość "system".

Oczywiście do właściwości odwołujemy się tak jak już wcześniej pokazywałem:

Mak.IP;
Mak.wyglad;
Blaszak.IP;
Blaszak.system;

Oczywiście rozszerzanie możliwości klasy metodą extend nie ogranicza się tylko do dodawania nowych pól - możemy też dodawać całe funkcje do klas bazujących na innej klasie - wszystko zależy od tego co umieścimy w argumentach metody extend ;)

implement

Czasami zachodzi potrzeba rozszerzenia funkcjonalności danej klasy, oczywiście można to zrobić za pomocą metody extend, ale po co generować sobie dodatkowe klasy ? Metoda extend przydaje się raczej gdy chcemy ujednolicić pewne właściwości wielu klas, a gdy chcemy sprawić by nasza klasa oferowała większe możliwości wykorzystajmy metodę implement. Służy ona do rozszerzania funkcjonalności danej klasy bez tworzenia nowych klas. Składnia tej metody wygląda następująco:

Klasa.implement({
   NowaFunkcja: function(argumenty){
      // kod nowej funkcji
   }
});

Po wykonaniu powyższego kodu nasza klasa będzie oferowała dodatkową funkcjonalność. To teraz bardziej konkretny przykład - oczywiście bazujący na klasie Komputer ;)

var Komputer = new Class({
   initialize: function(ip){
      this.IP = ip;
   }
});

Komputer.implement({
   uruchom: function(){
      alert('Komputer został uruchomiony...');
   }
});

Dzięki powyższemu zapisowi możemy teraz z powodzeniem stosować zapis:

var Blaszak = new Komputer('127.0.0.1');
Blaszak.uruchom();

Tym razem nie daję przykładów bo nie chcę Was zamęczyć alertami ;) Ale w następnej części kursu przykłady będą bo jest co pokazać ;)

W następnej części kursu przejdziemy do pliku class.extras.js , który zawiera więcej funkcji do operowania na klasach.