Сегодня попробую рассказать об одном из самых сложных для меня предметов в программировании – о КЛАССАХ. Этот страшный КЛАСС – это некий контейнер, некое собрание переменных и функций, которые обрабатывают ранее упомянутые переменные, чтобы получить определённый результат. Классы очень полезны при работе над более сложными проектами.
Переменные
Мы уже говорили об использовании хеш-массивов, так что пример ниже не должен никому показаться сложным.
//Создаем новый класс с именем 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(); }
Запуск седьмой демки

Что говорит народ: