Функции в Mootools

В JavaScript, каждая функция фактически является объектом класса Function, а следовательно его можно расширять, добавляя туда новые методы. Именно этим и воспользовались создатели библиотеки Mootools, добавив несколько очень полезных функций, о которых я сегодня подробно расскажу.

Чтобы пользоваться этими дополнительными функциями, достаточно просто объявить новую функцию. Сразу после создания, функция, или вернее сказать, новый объект класса Function, будет иметь еще несколько добавленных функций, таких как run(), attempt(), periodical() и другие. Пример (позаимствован на David Walsh Blog):

var doMany = function() {
	var request = new Request({
		url: 'ajax.php',
		method: 'get',
		update: 'refresh-me',
		onComplete: function(response) {
			$('element-to-update').set('text',response);
		}
	}).send();
};

doMany.periodical(5000);

В этом примере функция doMany() выполняет периодическую отправку AJAX запросов на сервер. Такой процесс пингования сервера используется при создании чатов, email клиентов и др. После создания функции doMany(), для неё вызывается функция periodical(), добавленная к функции библиотекой Mootools.

Теперь подробнее об остальных функциях.

run()

Фукнция run() выполняет функцию с указанными аргументами и в указанном контексте. По-моему именно способность привязывать функцию к определенному контексту представляет здесь наибольшую пользу.

// пример 1
var doIt = function(param){
	console.log(param);
	console.log(this.id);
}

doIt.run(5, $('sidebar'));
doIt.run(8, $('header'));

//пример 2
var myFn = function(a, b, c){
	return a + b + c;
}
var myArgs = [1,2,3];
myFn.run(args); //результат: 6

В первом примере, функция doIt() будет выполнена для элемента с id=sidebar, а затем для элемента с id=header. В качестве аргумента в функции передаются целое число. Во втором примере в функцию передаётся массив с тремя значениями, которые будут присвоены трем параметрам a, b и c.

delay()

Выполнение функции с задержкой.

var myFunction = function(){alert(this.id); };

myFunction.delay(50, myElement);

Здесь, фукнция myFunction() будет выполнена с задержкой в 50 миллисекунд. Также в функцию передается контекст (второй параметр функции delay), в результате чего указатель this в функции будет указывать на элемент myElement. Также в delay() можно передавать и список аргументов (третий параметр), который, как и в примере с run() будет передан в функцию myFunction.

Как функция delay(), так и функция periodical() возвращают таймер, следовательно их выполнение можно остановить функцией $clear():

var myTimer = myFunction.periodical(5000);
myTimer = $clear(myTimer);

bind() и bindWithEvents()

Обе эти функции позволяют изменять контекст выполнения функции (установка указателя this). Однако вторая, как это видно из названия, передает функции событие:

function myFunction(e, add){
    this.setStyle('top', e.client.x + add);
};

$(myElement).addEvent('click', myFunction.bindWithEvent(myElement, 100);

Указатель this в функции myFunction() указывает на объект window, а значит и выполнение функции setStyle() для него не имеет смысла. Чтобы использовать эту функцию для изменения цвета и позиции элементов, мы передаем в функцию контекст и событие при помощи bindWithEvent().

pass()

При помощи функции pass() можно передавать аргументы “родительской” функции, при этом также можно указывать контекст, в котором последняя будет выполняться:

var myFunction = function(){
    var result = 'Аргументы: ';
    for (var i = 0, l = arguments.length; i < l; i++){
        result += (arguments[i] + ' ');
    }
    return result;
}
var myHello = myFunction.pass('hello');
var myItems = myFunction.pass(['peach', 'apple', 'orange']);

// Далее выполняем созданные функции
alert(myHello());
alert(myItems());

attempt()

Функция attempt() просто пытается выполнить "родительскую" функцию. В случае, если в функции выбрасывается исключение, то attempt() возвращает null:

var myObject = {
    'cow': 'moo!'
};

var myFunction = function(){
    for (var i = 0; i < arguments.length; i++){
        if(!this[arguments[i]]) throw('doh!');
    }
};
var result = myFunction.attempt(['pig', 'cow'], myObject); //result = false

Как и перечисленные выше функции, attempt() может принимать контекст выполнения.

create()

Ну и последняя функция в этом обзоре - create(), является самой полнофункциональной, ибо, способна выполнять то, что и все вышеперечисленные функции. Ей достаточно просто указать параметры - периодичность выполнения, задержку, контекст, событие и др.:

var myFunction = function(){
    alert("I'm a function.  ");
};

var myAdvancedFunction = myFunction.create({
    arguments: [0,1,2,3],
    attempt: true,
    delay: 1000,
    bind: myElement
});

Все эти примеры еще раз наглядно демонстрируют гибкость языка JavaScript и мощь библиотеки Mootools, которые дают разработчику большой выбор средств для достижения нужной цели.