Pull to refresh

Классы в MooTools.

MooTools *
Создать свой класс в MooTools очень просто:
//Example 1
var someClass=new Class({

   initialize: function(){
      alert('Hello, world!');
   }

});
* This source code was highlighted with Source Code Highlighter.


Всё, класс готов. Теперь можно создавать объекты данного класса:

var classObject=new someClass();* This source code was highlighted with Source Code Highlighter.

Результат — алерт со словами: «Hello, world».
пример 1

initialize — конструктор класса. Вызывается автоматически при создании экземпляра класса. (не вызывается, если первый аргумент при создании объекта класса — $empty)

У класса могут быть методы:

//Example 2
var testClass=new Class({

   initialize: function(element){
      this.element=$(element);
   },
   
   draw: function(){
      this.element.setStyles({
         'background-color': 'red',
         border: 'solid 1px blue'
      });
   },
   
   hide: function(){
      this.element.setStyle('display', 'none');
   },
   
   show: function(){
      this.element.setStyle('display', 'block');
   },
   
   toggle: function(){
      this.element.style.display == 'none'? this.show(): this.hide();
   }

});
* This source code was highlighted with Source Code Highlighter.


Здесь четыре метода(не включая конструктора) — draw, hide, show и toggle.

draw делает элемент крассным с синей границей

hide скрывает элемент

show показывает элемент

toggle изменяет видимость элемента

Пример использования:
var elMgr= new testClass('el');

elMgr.draw();

(function(){
   elMgr.toggle();
}).periodical(1000);
* This source code was highlighted with Source Code Highlighter.


Результат — элемент делается красным, и мигает каждую секунду.
пример 2

Обратите внимание, чтоб вызвать метод show из метода toggle используется this.show(); this — это магическая переменная.


Implements



Магическое свойство Implements добавляет новые методы в класс. Классический пример — добавление метода setOptions.

//Example 3
var exampleClass3=new Class({

   Implements: [Options],

   options: { // опции по умолчанию
      bgColor: 'red',
      borderWidth: 1
   },

   initialize: function(element, options){
      this.setOptions(options);
      this.element=$(element);
   },
   
   draw: function(){
      this.element.setStyles({
         'background-color': this.options.bgColor,
         'border-style': 'solid',
         'border-color': 'black',
         'border-width': this.options.borderWidth
      });
   }

});
* This source code was highlighted with Source Code Highlighter.


Implements: [Options] означает — добавить все методы класса Options в данный класс. Класс Options имеет только один метод — setOptions.

Если опции не заданы, будут использованы опции по умолчанию (цвет — красный, толщина границы — 1px).

Примеры использования класса:

var elMgr=new exampleClass3('el', {
   bgColor: 'yellow'
});
* This source code was highlighted with Source Code Highlighter.

пример 3


Implements обычно используется чтоб добавить методы в новый класс. А так добавляются методы в уже созданый класс:

//example 4
someClass=new Class();
         
someClass.implement({

   extraMethod: function(){
      alert('Я — добавленный метод');
   }

});

(new someClass).extraMethod();
* This source code was highlighted with Source Code Highlighter.


Результат — алерт: «Я — добавленный метод»
пример 4

Вопрос: «А если я добавлю метод, который уже существует, что произойдет?».
Ответ: «В классе будет только новый метод, про старый можете забыть, его не вернуть.»


Extends



Ещё одно магическое свойство — Extends. С помощью него создаюется новый класс расширяющий существующий. Пример:

Расширим класс из первого примера (Hello, world):

//example 5
var extendedSomeClass=new Class({

   Extends: someClass,
   
   initialize: function(){
      this.parent();//вызываем метод initialize базового класса
      alert('extended Hello, world!');
   }

});

new extendedSomeClass();
* This source code was highlighted with Source Code Highlighter.


Результат — алерт «Hello, world!» из метода initialize базового класса и алерт «extended Hello, world!»
пример 5

Вопрос: «А есть ещё какие-нибудь магические методы, кроме Implements и Extends?»
Ответ: «Нет, но можно добавить в Class.Mutators, пример — Binds Mutator»


Class.Extras



В MooTools есть несколько классов, которые очень часто используются. Это классы Options, Events и Chain. Пример c Options уже был. А вот с Events:

//example 6
var exampleClass6=new Class({

   Implements: [Options, Events],

   options: { // опции по умолчанию
      bgColor: 'red',
      borderWidth: 1
   },

   initialize: function(element, options){
      this.setOptions(options);
      this.element=$(element);
   },
   
   draw: function(){
      this.element.setStyles({
         'background-color': this.options.bgColor,
         'border-style': 'solid',
         'border-color': 'black',
         'border-width': this.options.borderWidth
      });
      this.fireEvent('draw');//event draw
   }

});

var obj=new exmpleClass6('el', {
   bgColor: '#561',
   borderWidth: 4
});

obj.addEvent('draw', function(){
   alert('draw выполнен');
});

obj.draw();
* This source code was highlighted with Source Code Highlighter.


addEvent — добавить событие
fireEvent — выполнить событие

В данном примере событие добавлено явно с помощью метода addEvent. Событие можно также добавить, указав его в options с префиксом on и первой прописной:

var obj=new exampleClass6('el', {
   bgColor: '#561',
   borderWidth: 4,
   onDraw: function(){
      alert('draw выполнен');
   }
});
* This source code was highlighted with Source Code Highlighter.

пример 6

В options существует магическое свойство — initialize, выполняемое после конструктора класса:

//example7

var someClass=new Class({

   Implements: [Options],
   
   options:{
      initialize: function(){
         alert('after initialize');
      }
   },
   
   initialize: function(){
      alert('initialize');
   }

});
* This source code was highlighted with Source Code Highlighter.

пример 7



Основы изложены, если есть вопросы — задавайте. Ответы на все вопросы можно найти в документации. И помните, лучшая документация — исходный код.

архив с примерами
Tags:
Hubs:
Total votes 63: ↑44.5 and ↓18.5 +26
Views 2.8K
Comments Comments 43