MooTools for Beginners Part 5 - Native Extensions
By Ryan Florence, published 2010-01-14
Part of the issue MooTools for Beginners (1.2).
In Part 4 we looked at the myriad ways to select elements in the dom. Well, today we are ignoring the dom altogether. Aaron Newton once said that “MooTools aims to make JavaScript your playground [not just the DOM].” MooTools extends a lot of JavaScript natives, like Functions, Strings, Numbers, etc. You ought to spend 20 minutes reading through the Core and Native sections of the docs. This article is going to be short, touching on a few of the non-dom things I do regularly with MooTools. Of course, for these demos I’ll be using dom elements to log the results.
Function methods
Loop the loop: periodical, $clear
One of the extensions to function is periodical. Store a function in a variable and then call the periodical method on it and away it goes on forever. $clear will stop the periodical.
Delay
Delay is a bit tricky at first. The easiest way to delay something is to wrap it up in an anonymous function:
(function(){
// do stuff
}).delay(5000);
delay can take three arguments: delay, bind, args. Delay is how long in milliseconds to delay execution, bind is what to bind as this in the function, and args is the arguments to pass to the function–use an array for multiple.
// we're going to bind this
var myNumber = 10;
var logStuff = function(add, multiply){
// `myNumber` is known as `this` around here since we bound it
console.log(this + add);
console.log(this * multiply);
};
logStuff.delay(2000, myNumber, [10,3]);
String Methods
There are three string methods I use regularly, but again, you really ought to spend a few minutes in the docs looking at all of the native methods.
toInt, toFloat
These convert strings in to numbers, very useful when measuring elements and manipulating or animating their sizes. Also handy when parsing data that you don’t have control over.
'500px'.toInt(); // 500
var string = $('someEl').getStyle('height'); // `500px`
var int = $('someEl').getStyle('height').toInt(); // 500
var sum = int + 100; // not possible without `toInt`
'100.1'.toFloat(); // 100.1
contains
Checks if a string contains a string. I’m taking this example straight from the docs.
'a bc'.contains('bc'); //returns true
'a b c'.contains('c', ' '); //returns true
'a bc'.contains('b', ' '); //returns false
Array
Admittedly, most my arrays are collections of elements, but I’ve had a few projects that required a lot of math and the array method extensions were priceless.
each
Each is used all the time when iterating over dom elements to add events, perform animations, etc. But it can be used on any array. You can also bind a variable to the loop. Here we’ll create a new array from an existing array except multiply every number by 2.
var multiplier = 2; // going to bind this
var numbers = [1,5,12,76];
var newNumbers = [];
numbers.each(function(number,index){
// `this` is bound to `multiplier`
// number is the current array item
// index is the current items index
newNumbers[index] = number * this;
}, multiplier);
$('log').set('text', newNumbers.join(', '));
map
That was silly, I could have just used Array.map.
var newNumbers = numbers.map(function(item){
return item * multiplier;
});
getLast
Getting the first item in an array is easy, getting the last is now too.
var numbers = [1,5,12,76];
var first = numbers[0]; // 1
var last = numbers.getLast(); // 76
Again, lots of other good stuff in the docs. If I accomplish nothing else in the “MooTools for Beginners” series I hope to illustrate how helpful the docs are.
