MooTools

MooTools to jeden z frameworków napisanych w języku JavaScript. Skierowany jest do średnio zaawansowanych programistów JavaScript co pozwoli im na pisanie kody w sposób wydajny, elastyczny i klarowny. Jest to biblioteka ogólnego przeznaczenia i składa się przede wszystkim z modułów, co jest jej cechą charakterystyczną. Jej modułowa budowa pozwala programistom na pobieranie tylko tej części biblioteki, którą chcą w danym momencie wykorzystywać. Głównym plikiem MooTools, który jednocześnie jest jądrem tego frameworka jest plik core.js. Wszystkie pozostałe biblioteki są dla użytkowników opcjonalne. MooTools jest testowany i zgodny między innymi z takimi przeglądarkami internetowymi jak Safari (2 i 3), Opera (9.0+) czy Mozilla Firefox (1.5+, 2.0+, i 3.0+). Framework dodatkowo udostępniany jest na licencji MIT (licencja X11, jedna z najprostszych licencji open-source). Kod MooTools jest szeroko udokumentowany i łatwy do odczytania, co umożliwia rozszerzanie jego funkcjonalności do własnych wymagań. Natomiast dzięki licencji open-source programiści mogą w łatwy sposób używać jak i modyfikować jego dokumentację.

Moduły MooTools możemy podzielić na następujące elementy:

• Core – to zbiór funkcji użytkowych, które są niezbędne dla innych modułów
• Natives – czyli klasy natywne
• Effects – są to zaawansowane efekty API służące do animowania różnych elementów
• Class – to podstawowa biblioteka umożliwiająca tworzenie klas
• Element – odpowiada za obsługę elementów struktury DOM
• Remote – to narzędzia, które umożliwiają obsługę JSON, ciasteczek czy też XMLHttpRequest
• Window – to funkcje obsługi okna.

Warto zaznaczyć, że jednym, najważniejszy elementem biblioteki jest jednak moduł Core. Odpowiada on za dostarczanie mnóstwa funkcji od których właściwie zależą pozostałe moduły. Możemy wymienić takie moduły jak:

• Event – odpowiada za naprawianie obiektu zdarzenia w określonych przeglądarkach
• Types, Array, String, Number itd – służy do rozszerzania natywnych obiektów
• o implementacje przydatnych metod typu Array.forEach
• Element – zdecydowanie ułatwia manipulowanie elementami dokumentu
• Browser – ukazuje informacje na temat platformy, przykładowo takie jak przeglądarka internetowa czy system operacyjny
• FX – to moduł animacyjny
• Request – stanowi abstrakcję wokół Ajaxa
• Utilities – pozostałe przydatne dodatki.

Według wielu programistów największą zaletą tego frameworka jest jego obszerna społeczność.

W internecie dostępne są tysiące napisanych przez użytkowników skryptów, które są już gotowe do wdrażania. Dodatkowo możliwe jest znalezienie mnóstwa innych pomocnych funkcjonalności, między innymi z gotową przewijaną galerią czy walidacją formularzu. Oprócz tego warto jeszcze raz zaznaczyć, że dużą zaletą MooTools jest jego rozszerzalność i modularność, która pozwala na wybieranie własnych, niestandardowych połączeń różnych elementów. Framework ten można powiedzieć, że podąża także za praktykami programowania zorientowanego obiektowo oraz za regułą DRY (Don’t Repeat Yourself / Nie powtarzaj się), która stosowana jest podczas programowania. Zaleca ona unikanie różnych powtórzeń wykonywanych przez programistów. MooTools Posiada także zaawansowany komponent efektów z zoptymalizowanymi przejściami, przykładowo: zanikanie, które głównie używane są przez wielu programistów Flash. Warto dodać, że zawiera także wbudowane funkcje do manipulowania CSS, obsługuje elementy modelu DOM wraz z ich edycją czy usuwaniem oraz wykonuje żądania Ajax.

Przykładowy kod w MooTools

MooTools Przykład #1

  window.addEvent('domready', function() {
    var data1 = document.id('Test1').get('text');
    var data2 = document.id('Test2').get('text');
  
    /** covnvert data to Js Object (Normal Mode + Smart Mode) */
    var dataObjectOneNormal = XmlToJsObject(data1, false);
    var dataObjectOneSmart = XmlToJsObject(data1, true);
  
    /** covnvert data to Js Object (Smart Mode default) */
    var dataObjectSecond = XmlStringToJsObject(data2);
  
    /** Display Objects */
    document.id('outputData1').set('text', JSON.stringify(dataObjectOneSmart, null, 4));
    document.id('outputData2').set('text', JSON.stringify(dataObjectOneNormal, null, 4));
    document.id('outputData3').set('text', JSON.stringify(dataObjectSecond, null, 4));
  });
  

MooTools Przykład #2

  $$('li').each(function(li) {
    var events = {
      'mouseenter': function() {
        li.tween('margin', 20);
      },
      'mouseleave': function() {
        li.tween('margin', 0);
      }
    };
  
    li.addEvents(events);
  });