Создание собственных классов в Mootools – Урок 18 – Часть первая


Сегодня попробую рассказать об одном из самых сложных для меня предметов в программировании – о КЛАССАХ. Этот страшный КЛАСС – это некий контейнер, некое собрание переменных и функций, которые обрабатывают ранее упомянутые переменные, чтобы получить определённый результат. Классы очень полезны при работе над более сложными проектами.

Переменные

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

	//Создаем новый класс с именем Klass_first
	//класс содержит две внутренние переменные
	var Klass_first = new Class({
		variable_one : "Я первая переменная",
		variable_two : "Я вторая переменная"
	});

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

var run_demo_one = function(){
	//создадим объект на основне нашего класса Klass_first
	var demo_1 = new Klass_first();
	//Отобразить переменные нашего класса
	alert(demo_1.variable_one);
	alert(demo_1.variable_two);
}

Запуск первой демки

Методы и функции

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

	var Klass_second = new Class({
		variable_one : "Вот значение первой переменной",
		variable_two : "Вот значение второй переменной",
		function_one : function(){
			alert('Значение первой переменной : ' + this.variable_one);
			},
		function_two : function(){
			alert('Значение второй переменной : ' + this.variable_two);
		}
	});

Обратите внимание на использование ключевого слова this. По причине того, что все переменные работают во внутренней среде класса, получать доступ к знчению этих переменных можно только используя слово this, иначе результат работы метода будет значение undefined.

	//работает
	working_method : function(){
		alert('Первое значение : ' + this.variable_one);
		},
	//не работает
	broken_method : function(){
		alert('Второе значение : ' + variable_two);
	}

Вызов методов нового класса работает также, как и вызов переменных класса.

	var run_demo_2 = function(){
		//создаем экземпляр класса Klass_second
		var demo_2 = new Klass_second();
		//вызываем функцию function_one
		demo_2.function_one();
		//вызываем функцию function_two
		demo_2.function_two();
	}

Запуск второй демки

Метод initialize:

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

var Myclass = new Class({
	//определяем функцию инициализации класса с одним параметром
	initialize : function(user_input){
		//создаем переменную для этого класса, чьим значением
		//будут пользовательские данные
		this.value = user_input;
	}
})

initialize: можно использовать для изменения других опций или параметров:

var Myclass = new Class({
	initialize : function(true_false_value){
		if (true_false_value){
			this.message = "Всё, что говориться в этом уроке - правдиво!";
		}
		else {
			this.message = "Всё, что говориться в этом уроке - лживо!";
		}
	}
})
 
//Этот экземпляр класса скажет, что
//"Всё, что говориться в этом уроке - правдиво!"
var myclass_instance = new Myclass(true);
 
//Этот экземпляр класса скажет, что
//"Всё, что говориться в этом уроке - лживо!"
var myclass_instance = new Myclass(false);

Такой принцип определения экземпляра класса работает и в других случаях, только нужно помнить о запятых между каждой парой {ключа/значения}. Эту злосчастную запятую очень легко пропустить и продатить по безобразия много времени в поисках несуществующих багов в коде.

var Klass_third = new Class({
	//запуск функции при определении экземпляра класса
	initialize : function(one, two, true_false_option){
		this.variable_one = one;
		this.variable_two = two;
		if (true_false_option){
			this.boolean_option = "Выбрана опция TRUE";
		}
		else {
			this.boolean_option = "Выбрана опция FALSE";
		}
	},
	//определения методов
	function_one : function(){
		alert('Значение первое: ' + this.variable_one);
		},
	function_two : function(){
		alert('Значение второе: ' + this.variable_two);
	}
});
 
var run_demo_3 = function(){
	var demo_3 = new Class_three("Значение для первой переменной", "Значение для второй переменной");
	demo_3.function_one();
	demo_3.function_two();
}

Запуск третей демки

Внедрение параметров

При создании классов, часто необходимо задать некоторым переменным значения по умолчанию, чтобы, если пользователь не задает никаких значений, классу было бы с чем работать. Это можно сделать вручную, указав необходимые значения в функции инициализации и далее, проверяя кажду переменную на предмет того, было ей передано значение или нет и заменяя дефолтные значения, при необходимости. Но, можно просто подключить класс Options, который входит в состав модуля Mootools Class.extras.

Добавить функционал опций своему классу также просто, как добавить ещё одну пару ключ/значение к опциям инициализации:

	var Myclass = new Class({
	Implements: Options
})

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

	var Myclass = new Class({
	Implements: Options,
	options: {
		option_one : "Значение первого параметра",
		option_two : "Значение второго параметра"
	}
});

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

	var Myclass = new Class({
	Implements: Options,
	options: {
		option_one : "Дефолтное значение первого параметра",
		option_two : "Дефолтное значение второго параметра"
	}
	initialize: function(options){
		this.setOptions(options);
	}
});

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

//Перезаписываем оба дефолтных значения
var class_instance = new Myclass({
	options_one : "Перезаписываем первое дефолтное значение",
	options_two : "Перезаписываем второе дефолтное значение"
	});
 
//Перезаписываем только одно дефолтное значение
var class_instance = new Myclass({
	options_two : "Перезаписываем второе дефолтное значение"
});

Обратите внимание на использование метода setOptions, который вызывается в методе инициализации. Этот метод – это часть класса Options и он также позволяет устанавливать опции (параметры) после того, как был создан экземпляр класса.

	var class_instance = new Myclass();
	//Устанавливаем первый параметр
	class_instance.setOptions({options_one : "Перезаписать первый параметр"});

После того, как опци (параметры) были установлены, к ним можно обращаться через переменную options:

	var class_instance = new Myclass();
	//Обращаемся к значению первого параметра
	var class_option = class_instance.options.options_one;
	//переменная class_option теперь имеет значение "Дефолтное значение первого параметра"

Если же нужно обратиться к переменной изнутри класса, нельзя забывать про this:

	var Myclass = new Class({
	Implements: Options,
	options: {
		option_one : "Первое дефолтное значение",
		option_two : "Второе дефолтное значение"
	}
	test : function(){
		//обратите внимание на использование this
		//для обращения к классу
		alert(this.option_two);
	}
});
 
var class_instance = new Myclass();
//Следующая строчка выведет сообщение "Второе дефолтное значение"
class_instance.test();

Ну, а если всё вышеперечисленное соединить в один код, получится следующее:

var Klass_fourth = new Class({
    Implements: Options,
	options: {
		option_one : "Дефолтное значение Первого Параметра",
		option_two : "Дефолтное значение Второго Параметра",
	},
	initialize: function(options){
		this.setOptions(options);
	},
	show_options : function(){
		//тут мы используем функцию print_r(), позаимсвованную из PHP
		//немного о ней будет сказано чуть ниже
		alert(print_r(this.options, true));
	},
});
 
var run_demo_4 = function ){
	var demo_4 = new Klass_fourth({
		option_one : "Новое значение первого параметра"
		});
	demo_4.show_options();
}
 
var run_demo_5 = function(){
	var demo_5 = new Klass_fourth();
	demo_5.show_options();
	demo_5.setOptions({option_two : "Новое значение второго параметра"});
	demo_5.show_options();
}
 
//Создадим новый экземпляр класса Klass_fourth
//в который добавим новый параметр - new_option
var run_demo_6 = function(){
	var demo_6 = new Klass_fourth({new_option : "Это значение нового, добавленного параметра"});
	demo_6.show_options();
}

Запуск четвертой демки
Запуск пятой демки
Запуск шестой демки

Вкусняшки!

Наверняка многие знакомы с функцией print_r() из PHP, которая используется в методе show_options:

   	show_options : function(){
   		alert(print_r(this.options, true));
   	}

print_r() – это не родная функция JavaScript, но она была ассимилирована в рамках проекта PHP2JS. Ну, а для тех, кто не знает, что такое PHP, объясню, что функция print_r() возвращает форматированную строку, созданную из пар ключ/значение. Это очень полезная функция для поиска и исправления ошибок. Кому интересен искодный код этой функции можно её найти в исходном коде страницы. Надеюсь все знают, как найти исходный код страницы? Подсказка.

var Klass_fifth = new Class({
	//Подключаем класс Options
	Implements: Options,
	//Устанавливаем дефолтные опции
	options : {
		option_one : "Дефолтное значение первого параметра пятого класса",
		option_two : "Дефолтное значение второго параметра пятого класса",
	},
	//подключаем дефолтные значения
	initialize : function(options){
		this.setOptions(options);
	},
	//определяем метод, выводящий сообщение
	//с форматированной строкой из массива с параметрами
   	show_options : function(){
   		alert(print_r(this.options, true));
   	},
	//определяем метод для обмена значений
	//между двумя параметрами
	swap_options : function(){
		this.setOptions({
			option_one : this.options.option_two,
			option_two : this.options.option_one
		})
	}
});
 
function demo_7(){
	var demo_7 = new Klass_fifth();
	demo_7.show_options();
	demo_7.setOptions({option_one : "Новое значение первого параметра"});
	demo_7.swap_options();
	demo_7.show_options();
}

Запуск седьмой демки

,

  1. Пока нет комментариев.
(никто не узнает)

Код на картинке: