//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
Основы изложены, если есть вопросы — задавайте. Ответы на все вопросы можно найти в документации. И помните, лучшая документация — исходный код.
архив с примерами
Распечатать статью