Kurs: MooTools w pigułce. Część 1.

MooTools

Poziom średnio-zaawansowany

MooTools to kolejna biblioteka, jak najbardziej godna uwagi i mogąca poszerzyć nasze spojrzenie na sam język JavaScript.

„My Object-Oriented Tools” czyli MooTools

Jest to modułowa (pod względem budowy) biblioteka JavaScript. Fundamentem jest tzw. rdzeń (Core).

Pozostałe biblioteki są opcjonalne. MooTools składa się z wielu modułów, taka budowa pozwala użytkownikom pobrać tylko części biblioteki, które zamierzają wykorzystać.

Metoda implement

Jej celem jest rozszerzanie funkcjonalności naszych obiektów natywnych.

Przykład – zastosowanie metody implement:

var Osoba = new Class({
    initialize: function(imie) {
        this.imie = imie;
    }
});

Osoba.implement({
    przywitaj: function() {
        alert('Witaj ' + this.imie);
    }
});

Możemy rozszerzać także „hurtowo”:

Native.implement([obiekt1, obiekt2, obiekt3], {
    metoda1: function() {
        // (...)
    },
    metoda2: function() {
        // (...)
    }
});

Co w Core piszczy

$chk() – sprawdzanie obiektów:

function myFunction(arg) {
    if ($chk(arg)) 
        alert('The object exists or is 0.');
    else
        alert('The object is either null/undefined/false');
}

$clear() – czyści timeout / interval:

// wykonaj myFunction za 5 sek
var myTimer = myFunction.delay(5000); 
myTimer = $clear(myTimer); // anuluje myFunction - wywołanie

$defined(obj) – sprawdza, czy wartość jest zdefiniowana, np.:

$defined(document.body); // true

$arguments() – tworzy funkcję zwracającą argument zależnie od podanego indeksu:

var secondArgument = $arguments(1);
alert(secondArgument('a','b','c')); // "b"

$empty() – pusta funkcja – mockup:

var myFunc = $empty;

$lambda() – tworzy pustą funkcję, która zwraca przekazaną wartość:

var returnTrue = $lambda(true);

// prevents a link Element from being clickable
myLink.addEvent('click', $lambda(false)); 

Jest to metoda przestarzała, obecnie zaleca się stosowanie Function.from.

$extend(original, extension) – rozszerzanie obiektów, gdzie:

– original – to oryginalny obiekt,
– extension – obiekt, którego właściwości zostaną skopiowane do oryginalnego.

$each() – iterator (po każdym elemencie):

$each(iterable, fn[, bind]);

Przykład – iterowanie z użyciem $each:

// array
$each(['Sun','Mon','Tue'], function(day, index) {
    alert('name:' + day + ', index: ' + index);
});
// "name: Sun, index: 0", "name: Mon, index: 1", etc

$random() – losuje liczbę:

var random = $random(min, max);

$splat() – konwertuje na tablicę, przykładowo:

$splat('hello'); // ['hello'].
$splat(['a', 'b', 'c']); // ['a', 'b', 'c'].

Obecnie zamiast $splat zaleca się użycie Array.from.

$time() – zwraca znacznik obecnego czasu:

var time = $time(); // bieżący timestamp

// zalecamy jednak używać po prostu:
// var time = Date.now();

$try – próba wykonania wielu funkcji:

$try(fn[, fn, fn, fn, ...]);

Browser

Jest to obiekt udostępniający metody służące do detekcji przeglądarki i platformy. Treść pochodzi z oryginalnej dokumentacji.

Features

– Browser.Features.xpath – (boolean) True if the browser supports DOM queries using XPath

– Browser.Features.xhr – (boolean) True if the browser supports native XMLHTTP object.


Engine

– Browser.Engine.trident – (boolean) True if the current browser uses the trident engine (e.g. IE).

– Browser.Engine.gecko – (boolean) True if the current browser uses the gecko engine (e.g. FF, Moz).

– Browser.Engine.webkit – (boolean) True if the current browser uses the webkit engine (e.g. Safari, Google Chrome, Konqueror).

– Browser.Engine.presto – (boolean) True if the current browser uses the presto engine (e.g. Opera 9).

– Browser.Engine.name – (string) The name of the engine.

– Browser.Engine.version – (number) The version of the engine. (e.g. 950)

– Browser.Plugins.Flash.version – (number) The major version of the flash plugin.

– Browser.Plugins.Flash.build – (number) The build version of the flash plugin installed.

Platform

– Browser.Platform.mac – (boolean) True if the platform is Mac.

– Browser.Platform.win – (boolean) True if the platform is Windows.

– Browser.Platform.linux – (boolean) True if the platform is Linux.

– Browser.Platform.ipod – (boolean) True if the platform is an iPod touch / iPhone.

– Browser.Platform.other – (boolean) True if the platform is neither Mac, Windows, Linux nor iPod.

– Browser.Platform.name – (string) The name of the platform.

Przejdźmy dalej, do praktycznych zastosowań tego, co oferuje nam framework MooTools.

Operacje na tablicach – przykłady

Konkretne przykłady z komentarzem:

// filter na podany warunek
var biggerThanTwenty = [10, 3, 25, 100].
    filter(function(item, index) {
        return item > 20;
}); // biggerThanTwenty = [25, 100]

// scalanie
var animals = ['Cow', 'Pig', 'Dog', 'Cat'];
var sounds = ['Moo', 'Oink', 'Woof', 'Miao'];
sounds.associate(animals); 
// {'Cow': 'Moo', 'Pig': 'Oink', 'Dog': 'Woof', 'Cat': 'Miao'}

// spłaszczanie - konwersja do tablicy 1-D
var myArray = [1,2,3,[4,5, [6,7]], [[[8]]]];
var newArray = myArray.flatten(); 
// newArray = [1,2,3,4,5,6,7,8]

// konwersje - coś dla webdeveloperów
['11','22','33'].hexToRgb(); // "rgb(17,34,51)"
['11','22','33'].hexToRgb(true); // [17, 34, 51]
[17,34,51].rgbToHex(); // "#112233"
[17,34,51].rgbToHex(true); // ['11','22','33']
[17,34,51,0].rgbToHex(); // "transparent"

Funkcja $A – konstruowanie tablic:

var anArray = [0, 1, 2, 3, 4];
var copiedArray = $A(anArray); // [0, 1, 2, 3, 4].

String

Podobnie jak np. Prototype JS, tak i MooTools wspomaga obsługę łańcuchów.

Przykłady:

// czyszcenie - wynik: "i like cookies"
" i      like     cookies      \n\n".clean();

// konwersja na camel-case - wynik: "ILikeCookies"
"I-like-cookies".camelCase();

// rozdziel - wynik "I-like-cookies"
"ILikeCookies".hyphenate();

// test wyrażenia - regexp
"I like cookies".test("COOKIE", "i");

// RegExp escape - wynik: 'animals\.sheep\[1\]'
'animals.sheep[1]'.escapeRegExp();

Idźmy dalej.

substitute() – metoda ta interpoluje elementy; podobne do Template w Prototype JS.

Przykład:

var myString = "{subject} is {property_1} 
    and {property_2}.";

var myObject = {subject: 'Jack Bauer', property_1: 'our lord',
    property_2: 'savior'};

// wynik: Jack Bauer is our lord and savior
myString.substitute(myObject);

Hash (klucz-wartość)

MooTools, podobnie jak Prototype JS, oferuje wygodną obsługę tablic asocjacyjnych (hash).

Konstruktor:

var myHash = new Hash([object]);

Przykład – praca z obiektami Hash w MooTools:

var myHash = new Hash({
    aProperty: true,
    aMethod: function() {
        return true;
    }
});

alert(myHash.has('aMethod')); // true

Obiekt zapewnia wiele metod, jak iteracja z użyciem each():

hash.each(function(value, key) {
    alert(value);
});

Metoda has() – jest to sprawdzanie, czy Hash ma podany klucz, na przykład:

var hash = new Hash({'a': 'one', 'b': 'two', 'c': 'three'});
hash.has('a'); // returns true
hash.has('d'); // returns false

Podobnie dla wartości – hasValue:

var inHash = myHash.hasValue(value);

Extend

Typowo dla MooTools, Hash możemy rozszerzyć:

var hash = new Hash({
    'name': 'John',
    'lastName': 'Doe'
});

var properties = {
    'age': '20',
    'sex': 'male',
    'lastName': 'Fred'
};

hash.extend(properties);

Rozszerzyliśmy obiekt klasy Hash o nowe właściwości.

Rzućmy okiem na inne dostępne metody:

– myHash.erase(key); // wymaż klucz

– myHash.get(key); // pobierz wartość spod klucza

– myHash.set(key, value); // ustaw wartość dla danego klucza

– myHash.getKeys(); // pobierz wszystkie klucze

– myHash.getValues(); // pobierz wszystkie wartości

– myHash.getLength(); // rozmiar

– empty() – czyni hash pustym, np.:

var hash = new Hash({
    'name': 'John',
    'lastName': 'Doe'
});

hash.empty(); // hash jest teraz pustym obiektem: {}

– map() – mapowanie na Hash:

var timesTwo = new Hash({a: 1, b: 2, c: 3}).
    map(function(value, key) {
    return value * 2;
}); 
// timesTwo trzyma teraz obiekt zawierający: {a: 2, b: 4, c: 6};

– clean() – wyczyść obiekt typu hash całkowicie:

var hash = new Hash({
    'name': 'John',
    'lastName': 'Doe'
});

hash = hash.getClean(); // hash przestał być obiektem typu Hash
hash.each() // error!

Kolejna metoda pozwala na tworzenie żądania HTTP na podstawie hasha. Jest to myHash.toQueryString().

Przykład:

var myHash = new Hash({apple: "red", lemon: "yellow"});
myHash.toQueryString(); // "apple=red&lemon=yellow"

Event

Czyli znana nam już obsługa zdarzeń w wydaniu MooTools. Biblioteka w tym kontekście oferuje również znakomitą obsługę klawiatury.

Konstruktor:
new Event([event[, win]]);
– event – (event) obiekt HTMLEvent
– win – (window, opcjonalny) – kontekst zdarzenia

Przykład – event + keyboard – obsługa klawiszy:

$('myLink').addEvent('keydown', function(event) {
    alert(event.key);   // wciśnięty przycisk(lowercase)
    alert(event.shift); // zwraca true jeśli naciśnięto shift
    if (event.key == 's' && event.control)
        alert('Document saved.'); // obsługa kombinacji Ctr+S.
    // etc...
});

Dostępne właściwości:

– shift – (boolean) True jeśli naciśnięto klawisz shift

– control – (boolean) True jeśli ctrl

– alt – (boolean) True jeśli alt

– meta – (boolean) True jeśli „meta key”

– wheel – (number) trzeci przycisk / przewijania

– code – (number) kod klawisza

– page.x – (number) pozycja x myszy w odniesieniu do całego okna

– page.y – (number) pozycja y myszy w odniesieniu do całego okna

– client.x – (number) pozycja x myszy w odniesieniu do rzutni

– client.y – (number) pozycja y myszy

– key – (string) wciśnięty przyciska jako ciąg lowercase; może być też: ‚enter’, ‚up’, ‚down’, ‚left’, ‚right’, ‚space’, ‚backspace’, ‚delete’, and ‚esc’

– target – (element) cel zdarzenia

– relatedTarget – (element) cel zdarzenia

Przykład:

myEvent.stop();

$('myAnchor').addEvent('click', function(event){
    event.stop();
    // 'this' is Element that fires the Event
    this.set('text', "Where do you think you're going?"); 

    (function() {
        this.set('text', "Instead visit the Blog.").
            set('href', 'http://blog.mootools.net');
    }).delay(500, this);
});

myEvent.stopPropagation();
myEvent.preventDefault();

Event.keys:

Event.Keys.shift = 16;
$('myInput').addEvent('keydown', function(event) {
    if (event.key == "shift") alert("You pressed shift.");
});

Mouse
Metodą addEvent definiujemy funkcję obsługi zdarzenia dla myszki.

function myFunction() {
    alert('Mysz...');
}

$('myElement').addEvent('mouseenter', myFunction);
$('myElement').addEvent('mouseleave', myFunction);
$('myElement').addEvent('mousewheel', myFunction);

Podsumowanie

Przykładami obsługi klawiatury i myszy z wykorzystaniem MooTools, kończymy 1. część kursu tej biblioteki.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+2Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.