Недавно меня сильно пробило на чтение всяческих обучающих материалов, просмотр видео роликов на тему программирования и сайтостроение. Оказывается, в Интернете столько всего, что всё знать вряд ли получится. А жаль:( Очень много информации, как полезной, так и не очень. Уже не помню, на каком именно сайте наткнулся на краткую информацию о самовыполняющихся функциях. Должен сказать, что я не обратил бы на этот термин практически никакого внимания, кроме как просто запомнил бы и, может быть, когда-нибудь, пришлось бы такие функции исползовать, если бы не недавний мой пост про создание интерактивных закладок в браузерах.

В чем суть самовыполняющихся функций? Для этого нужно разобраться в том, как создаются и выполняются обычные функции в JavaScript. Обычно функцию вначале нужно определить, и это можно сделать разными способами и только после этого ее нужно вызвать. Например:

// определяем функцию

var execute = function(){
  $('result').set('text', 'функция execute выполнена');

}
 
//определяем условия ее выполнения
window.addEvent('domready', function(){
    $('exec').addEvent('click', execute);

});

Выполнить execute

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

(function(){

 
// определяем действия в функции
 
})();
//скобки говорят обработчику, что нужно сразу выполнить фунцию,
//определённую немного ранее

Почему я вспомнил, про интерактивные закладки? Потому что они построенны на базе таких функций и когда я пытался понять их структуру и логику, я задавал себе вопрос «зачем там скобки и что они делают?». Вот оно, как просо оказалось.

Пока мне в голову пришел только один пример работы самовыполняющейся функции: добавим еще несколько строчек JavaScript к нашему предыдущему примеру с функцией execute и, через setTimeout() добавим самовыполняющуюся функцию, которая изменит результат выполнения предыдущей функции execute через 2 секунды, потому обратите внимание на текст сообщения над кнопкой вызова. А вот, собственно, и сам код:

var execute = function(){

  $('result').set('text', 'функция execute выполнена');
}

 
var unexecute = function(){
  $('result2').set('text', 'функция execute выполнена');

  setTimeout((function(){
    $('result2').set('text', 'и через 2 секунды определяется и самовыполняется функция unexecute')

  }), 2000)
}
 
window.addEvent('domready', function(){

		$('exec').addEvent('click', execute);
		$('unexec').addEvent('click', unexecute);

	});

Выполнить unexecute

Функции и Mootools 1.2

Добро пожаловать на 4-й урок нашего “курса молодого бойца”. Если вы впервые на моем блоге и сразу попали на эту страницы, то вам стоит посмотреть предыдущие уроки из этой серии. Сегодня мы пойдем немного не по тому пути, т.к. пройдемся немного по основам функций в JavaScript.

Однако, не отходя все таки далеко от нашей основной темы – Mootools – вы должны помнить, где должен находится код ваших функций для использования в Mootools. В одном из наших предыдущих уроков мы рассматривали примеры использования функций внутри события domready.

В основном, конечно же, считается хорошим “программистским” тоном хранить все свои функции вне страницы с HTML кодом и вызывать их с помощью ссылок на js-файлы. Хотя с другой стороны, многие программисты не любят разбрасывать свой код по нескольким файлам, так как потом легче все найти, когда это все на одной странице. В наших уроках мы будем использовать такой шаблон объявления функций и их вызова из события domready:

<script type="text/javascript">
	/* * Тут определяется функция */
	window.addEvent('domready', function() {
		/* *Вызовы функции */
	});
</script>

Все примеры, представленные в этом уроке, используют этот шаблон. Как ни странно, она работают нормально (с условием, что в самом коде ошибок нет!). Под некоторыми примерами есть также и кнопки, с помощью которых можно испытать работоспособность этих примеров. Обращаю внимание на то, что в некоторых функциях я использовал обработчики событий (event handlers), о которых расскажу в следующем уроке.

Основы

В JavaScript существует несколько методов определения функций, а так как мы тут собрались поучить Mootools, будем использовать любимый метод разработчиков этой библиотеки. В следующем примере показана самая простая функция. Мы объявляем переменную, называем ее simple_function и определяем ее как функцию:

var simple_function = function() {

После этого мы добавляем функцию alert, которая запустится при запуске нашей функции:

alert('Самая обычная и простая функция');

В конце концов, добавляем закрывающую фигурную скобку, которая является самым распространенной вещью, которую забывают поставить разработчики (у меня с этой скобкой отдельный счеты…я и так внимательностью не отличаюсь, так что не поставить закрывающую скобку для меня совсем не проблема):

}

Такую ошибку довольно сложно выследить, поэтому я рекомендую при объявлении функций (да и вообще любых других методов, требующих открытие и закрытие скобок – итерации и условия) сразу начинать писать код внутри фигурных скобок. Но и конечно же проверять их наличие никогда не будет лишним.

Все вышеизложенное объединено в следующем примере. После объявления функции, мы вызываем ее уже из события domready, которое выполнит функцию по загрузке страницы. Нажмите на кнопку под кодом примера и получите результат вызова функции simple_function().

//Определяем функцию simple_function
var simple_function = function(){
	alert('Самая обычная и простая функция');
}
 
window.addEvent('domready', function() {
	//Вызываем нашу функцию по загрузке DOMa(страницы)
    simple_function();
});

Тестируем простую функцию

Функция с одним параметром

Очень полезно иметь функции, которые можно вызвать в любом месте файла, а еще более полезным будет возможность передавать параметры этим функциям. Для того, чтобы использовать параметры с функциями, мы их вставляем в скобки после ключевого слова function, вот так:

var имя_функции = function(имя_параметра){
	/*сюда вставляется код функции*/
}

Т.е. это я и многие другие привыкли так объявлять функции (я говорил об этом выше). В JavaScript параметры находятся также в круглых скобках, тогда как скобки находятся после названия функции, как тут:

function имя_функции (имя_параметра) {
	/* код функции */
}

После объявления параметра, переменная будет доступна для работы с ней уже внутри самой функции. Несмотря на то, что называть параметры можно как душе угодно (латинскими буквами), рекомендую предавать их названию как можно больше описания того, для чего они предназначены. Например, если мы передаете в функцию параметр, содержащий название автомобиля, одним из вариантов хорошего названия параметра было бы car_name или даже avto подойдет, вместо чего-то вроде info_ot_usera.

В следующем примере, мы определим функцию, которая будет запрашивать только один параметр (с названием parameter) и вызывает предупреждение (alert()) с этим параметром. Несмотря на то, что первая часть сообщения заключается в единичные кавычки, параметр передается без них. При использовании параметров в сочетании со строками (как в нашем случае), их нужно соединять оператором “+”, как это показано в примере:

var single_parameter_function = function(parameter){
	alert('наш параметр : ' + parameter);
 
window.addEvent('domready', single_parameter_function('Вот это параметр'));

Функция с одним параметром

Передача нескольких параметров

JavaScript не ограничивает в количестве возможных параметров функции, но всегда старайтесь передавать как можно меньше параметров из соображений последующей читабельности кода. Когда объявляются более одного параметра, они отделяются друг от друга запятыми, иначе функция посчитает, что ей передается лишь один параметр. Функции показанной ниже передаются два параметра в виде чисел, сумма которых присваивается переменой:

var third_number = first_number + second_number;

А после этого используется тот же оператор “+”, только уже в другом качестве, чтобы соединить результат в текстовую строку:

alert(first_number + " плюс " + second_number + " равно " + third_number);

На первый взгляд это может выглядеть запутанно, но на самом деле все просто. Если использовать знак плюса (+) с числами, обработчик суммирует числа, а применение его к строкам, соединяет строки в одну.

var two_parameter_function = function(first_number, second_number){
    //Получаем сумму первого и второго числа
    var third_number = first_number + second_number;
	//Отобразить результат
	alert(first_number + " плюс " + second_number + " равно " + third_number);
}
 
window.addEvent('domready', function(){
	two_parameter_function(10, 5);
});

Функция с двумя параметрами

Возврат значений

Отображение результатов функции в окне оповещений может быть полезным, но чаще всего такие результаты нужны для их дальнейшего использования. Для этого, нужно будет использовать функцию return. Следующий пример делает тоже самое, что и предыдущий, только на этот раз мы не будем отсылать результат в окно оповещения (alert()), а просто сделаем результат доступным для дальнейшего использования. Следующий пример возвращает сумму двух чисел из предыдущего примера:

return third_number;

Нужно отметить, что теперь нужно будет внести некоторые изменения и в функцию ‘domready‘, а именно мы добавим переменную return_value, которой передадим результат работы функции, после чего используем ее в окне оповещения.

var two_parameter_returning_function = function(first_number, second_number){
	var third_number = first_number + second_number;
    return third_number;
}
 
window.addEvent('domready', function(){
	var return_value = two_parameter_returning_function(10, 5);
    alert("return value is : " + return_value);
});

Функция с двумя параметрами с возвратом результата

Использование функции как параметра

Событие domready использует в качестве параметра функцию:

window.addEvent('domready', function(){
	/*ваш код*/
});

Функция, передаваемая в качестве параметра, как показано в примере, называется анонимной функцией

function(){
	/*ваш код*/
}

И, раз уж зашел разговор о событии domready, отмечу еще один (к уже указанным двум в первом уроке) метод объявления функций в событии domready:

//создаем функцию для вызова в событии domready
var domready_function(){
	/* ваш код */
}
 
//Назначаем созданную функцию в параметры события
window.addEvent('domready', domready_function);

Пока, вроде, никто ничего не говорил по поводу того, есть ли какая-то разница в производительности и функциональности между всеми методами, так что, как объявлять функции – это сугубо личное дело каждого.

Примеры

Итак, переходим к самой вкусной части этого урока! Предлагаю поиграть с цветом фона одного из блоков на этой странице. Это, конечно, абсолютно бессмысленно, но полезно, с точки зрения понимания того, что можно творить с помощью Mootools или JavaScript. Код в студию:

var changeColor = function(){
 
    //Используем метод get чтобы получить значение цвета из текстовых блоков
    var red = $('red').get('value');
    var green = $('green').get('value');
    var blue = $('blue').get('value');
 
    //Убедимся, что все значения будут в формате целых чисел (метод toInt)
    red = red.toInt();
    green = green.toInt();
    blue = blue.toInt();
 
    //Убедимся, что каждое число - это значение между 1 и 255
    //при необходимости, округляем (метод limit)
    red = red.limit(1, 255);
    green = green.limit(1, 255);
    blue = blue.limit(1, 255);
 
    //преобразовываем формат цвет из RGB в 16-ричную систему исчисления (метод rgbToHex)
    var color = [red, green, blue].rgbToHex();
 
    //устанавливаем цвет блока (метод setStyle)
    $('body_wrap').setStyle('background', color);
}
var resetColor = function(){
 
	//вернуть белый цвет блока
    $('body_wrap').setStyle('background', '#fff');
}
 
window.addEvent('domready', function(){
    //Добавляем события click к каждой кнопке
    //(метод addEvent - подробнее об этом поговорим в следующем уроке
    //который будет готов очень скоро)
    $('change').addEvent('click', changeColor);
    $('reset').addEvent('click', resetColor);
});

h2>На русском

Много планов, но мало времени! Хочется сделать очень многое, а в сутках всего 24 часа, из которых хотя бы 6 нужно поспать, отдохнуть… А еще в нужно семье уделять время, которых у меня теперь… 3.

Но, несмотря на все это, и продолжая переводить 4-й урок по Mootools, в котором речь пойдет о функциях, я наконец закончил делать красивый PDF файл с полным списком функций, методом и всем, всем, всем. Получилось, на мой взгляд, вполне достойно. Конечно, это все можно найти и на сайте Mootools 1.2, но там все разбросано по разделам и если не особо знаешь, в каком разделе может быть функция, то трудновато будет найти ее описание. А я себе соткал из всех тех страниц один файлик PDF, в котором при помощи небольшой команды Поиск можно обнаружить всё тебя интересующее. К сожалению, все это богатство знаний пока только на английском, но и этого большинству учащихся хватит, если нужно посмотреть хотя бы как использовать ту или иную функцию.

Скачать файл могут все желающие по этой ссылке:
Скачать полный список методов и классов Mootools 1.2.

Не забывайте подписаться на RSS ленту моего блога, чтобы вы первые могли получить следующий урок по Mootools.

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

English

Finally, I finished the making of my PDF file, containing the entire Mootools 1.2 Reference. That is I took all the materials on docs.mootools.net and put it into one file, which makes the searching of any Mootools’ function. So when you don’t know the exact category, where a function could be found, you could just search the complete reference PDF-file to find the desired function.

Download the complete Mootools reference.