Rafał Wrzeszcz - Wrzasq.pl

Przegląd frameworków JavaScript: MooTools

Friday, 12 June 2009, 03:22

dojo

MooTools

Kolejnym frameworkiem w kolejce był MooTools. Realizuje on odmienną od dojo i jQuery ideę - nie tworzy zupełnie nowego środowiska, lecz rozszerza domyślny model typów danych. Powiem szczerze, że o wiele bardziej mi się podoba taka metoda działania, jak już wspominałem przy okazji opisywania dojo - po pierwsze nie trzeba uczyć się zbyt wiele, po drugie możemy sami decydować w jakim stopniu korzystamy z oferowanych przez bibliotekę opcji i po drugie takie rozwiązanie jest moim zdaniem o wiele bardziej skalowalne - nie rozwarstwia kodu przez co mamy nadal pełną swobodę odnośnie jego podziału i polityki rozwoju. MooTools jest bardzo wygodny w użyciu, szczególnie, jeśli do tej pory pracowaliśmy już z JavaScript, ale niekoniecznie korzystaliśmy z jakiejś biblioteki tego typu. Jedynym mankamentem jest nieco postrzępiona dokumentacja (nieraz czytając okazuje się, że błądzimy bez celu, bo ktoś nie dodał opisu potrzebnych akurat nam rzeczy).

Integracja z kodem

Ze względu na sposób realizacji, MooTools bardzo dobrze integruje się z kodem nawet już istniejącym. Jak już wspomniałem możemy nawet nie korzystać z jego funkcjonalności od początku. Z teoretycznego punktu widzenia większość funkcjonalności dostarczanej przez bibliotekę jest dostępna zupełnie natywnie. To znaczy, że nasz kod mógłby wyglądać mniej więcej tak:

var ajaxDisplay = document.createElement("div");
ajaxDisplay.fade("out");

Jest tylko jeden problem, a nazywa się Internet Explorer. Otóż biblioteki tego typu wykorzystują prototypy domyślnych typów danych. Niestety przeglądarka firmy Microsoft nie udostępnia takich prototypów skryptom. W MooTools (podobnie jest zresztą w przypadku Prototype) istnieje funkcja $. Dodaje ona jawnie funkcjonalność frameworka do danego elementu. Podany kod w wersji kompatybilnej z przeglądarkami zarówno udostępniającymi (nowe metody nie zostaną dodane drugi raz jeśli zostało to już zrobione) jak i nie udostępniającymi natywnie prototypów elementów wyglądałby tak:

var ajaxDisplay = $( document.createElement("div") );
ajaxDisplay.fade("out");

Praca z drzewem DOM

Ponieważ nawet używając biblioteki MooTools nadal korzystamy ze zwykłych typów danych, w przeciwieństwie do dojo, czy jQuery, nie potrzebujemy tutaj dodatkowych funkcji, żeby operować na elementach. Oczywiście dostajemy cały zestaw narzędzi ułatwiających to - wspomniana funkcja $(), która jest skrótem dla document.getElementById() to jedno. Druga to funkcja $() (zwana potocznie bling-bling ;)). Funkcja ta wybiera elementy pasujące do podanego selektora CSS, czyli taki odpowiednik dojo.query(), czy głównej funkcji jQuery() z tą tylko różnicą, że tutaj dostajemy surową listę elementów, ale lista ta obsługuje również wszystkie metody pojedynczego elementu, więc możemy na przykład wykonać coś takiego:

// zmieni kolor wszystkich akapitów w tabelach na zielony
$("table p.klasa").setStyle("color", "red");

Obsługa zdarzeń

Obsługa zdarzeń nie odstaje od pozostałych rozwiązań tego typu - tyle, że tutaj nie mamy helperów typu click() i zawsze korzystamy z metody addEvent(). Oczywiście jako parametr funkcja obsługująca otrzymuje obiekt zdarzenia, którym morze sterować w celu na przykład zablokowania wykonania domyślnej akcji przeglądarki:

link.addEvent("click", function(event) {
    alert("Ten link nie działa.");
    event.stop();
} );

Brak dedykowanych metod do podstawowych zdarzeń może trochę przeszkadzać i nie specjalnie widzę przeszkodę w implementacji takich mechanizmów, ale cóż - ten szczegół nie wpływa zbytnio na funkcjonalność.

XHR/AJAX

Również obsługa XMLHttpRequest nie odbiega od normy - znajdziemy wszystko czego potrzeba. Różni się ona co prawda nieco od wersji z poprzednio opisywanych frameworków - w nich po prostu wykonywaliśmy zapytanie definiując jego parametry. W MooTools najpierw tworzymy obiekt zapytania i go konfigurujemy, a na koniec wykonujemy jego zapytanie:

var xhr = new Request.JSON( {
    url: "/ajax.php",
    onComplete: function(data) {
        alert(data.MasksList.data.masks[1]);
    }
} );
xhr.send("action=ManageMasks");
// oczywiście możemy to wszystko wykonać w jednej linijce, ale chciałem pokazać różnicę

Widgety i dodatki

Niestety MooTools nie posiada zbyt dużo gotowych efektów, nie wspominając już o braku widgetów. Na szczęście istnieją rozszerzenia zapełniające tą lukę: moo.fx2, czy możliwość dołączenia do swojej dystrybucji MooTools dodatkowych modułów. Nie zmienia to jednak faktu, że sama biblioteka jest dość uboga. Na dodatek do tych dwóch nakładek praktycznie nie istnieje prawie żadna dokumentacja, poza szczątkowymi napomknięciami w dokumentacji domyślnej. Niestety, ale na tym polu MooTools wypada dość słabo.

Moja opinia

Ogólnie z MooTools pracowało mi się bardzo wygodnie, ale jednak pozostał niedosyt i to nie wspominając już o słabym zapleczu do efektów wizualnych. Jest wiele rzeczy, które po prostu wolałbym robić inaczej. Moim zdaniem niektóre rozwiązania zastosowane w tym frameworku są jeszcze nie dopracowane (chociażby konieczność używania efektów zamiast prostego hide()/show()). Jeśli nie pasował wam styl pracy z dojo, czy jQuery, to MooTools oferuje wam interesującą alternatywę. Niemniej jeśli pasuje wam właśnie taki styl, to podpasuje również praca z Prototype, a ten moim zdaniem jest dużo lepiej dopracowaną biblioteką.

Tags: Web, Teksty, JavaScript, AJAX, DOM