Классы в 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



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

    архив с примерами

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 43

      –1
      хабракат
        0
        да, во-первых — хабракат.
        во-вторых, что есть такое в статье, чего нет в учебнике по MooTools?
        в чем уникальность статьи?
          +2
          на русском про классы в мутулз почти нет информации, сама статья уникальна — написана мною.
          Чего нет в учебнике mootools. Незнай про какой учебник конечно имеется ввиду, если mootorial. Щас просмотрел, по-мойму про свойство options initialize там нет (последний пример). А вообще статья для начинающих. Всё есть в документации.
          • НЛО прилетело и опубликовало эту надпись здесь
          +2
          мда, насколько джекверя сексуальнее…
          • НЛО прилетело и опубликовало эту надпись здесь
              +1
              то, что в статье — скорее «внутренности»
              чтобы пользоваться mootools на уровне copy-paste, plugins, «а пускай эта фигня моргнет», совсем не обязательно уметь писать классы в стиле moo
                0
                полгода юзал мутулс исключительно копи-пейст, в последнее время все чаще требуется написать что-то свое, а знаний не всегда хватает. так что спасибо автору.
            • НЛО прилетело и опубликовало эту надпись здесь
              • НЛО прилетело и опубликовало эту надпись здесь
                  +1
                  не могу или не знаю, но кроме варианта — персональный блог, ничего нет.
                    +3
                    а, понял, вначале вступить в блог надо какой-нибудь.
                +3
                И по теме, и ни слова про карму!
                АВЕ, magmoro!
                  +1
                  в избранное, потом буду от друзей отмахиваться статьей, все удобно расписано
                    +1
                    не надо от друзей отмахиваться ;-)
                    0
                    Спасибо за статью, написано подробно и доходчиво.

                    Может создать отдельный блог для Mootools? :)
                      +2
                      да, надо продвигать mootools в массы, а то ситуация с популярностью mootools vs. jquery напоминает opera vs. firefox )

                      п.с. а еще, в релизе 1.2 наконец-то пофиксили баг с наследованием (он был только в бете, в 1.1 не было), когда Class3 наледуется от Class2, а тот от Class1, это вызывало ошибку. я даже постил на форуме багрепорт =)
                        0
                        Кстати, на гугле версию 1.2 пока не хостят.
                        Почему? Т.к. Valerio, основной разработчик, сказал, что надо сначала выпустить 1.2.1 bugfix. При том, что и версия 1.2 очень хороша. Мне, если честно, нравится такой подход.
                          0
                          Баг фиксился заменой self на this в одной строчке кода. Необязательно было дожидаться релиза. ;-)
                            0
                            я в то время не смог найти решение =\ искал на форуме и немного на трекере, а в созданном треде так никто и не помог
                            а вы где нашли? или самостоятельно в коде? )
                              0
                              вообще-то нашел в трекере где-то в середине января этого года — мы тогда с jquery на mootools переезжали в проекте. Оказалось, в Class.Extends ошибочка была ;-)
                                0
                                ох, значит я фигово искал :]
                                вот щас нашел свой тред, он смешной: forum.mootools.net/viewtopic.php? pid=42049
                                это было в конце февраля
                          0
                          Создал блог — habrahabr.ru/blogs/mootools/
                          Предлагаю все статьи, посвященные MooTools, перенести туда.
                            0
                            Точно! Нужен блог для mootools!
                            +1
                            После этого топика мне придется хорошенько пощупать эту мушку :)
                            Хорошо написано.
                              +1
                              Мутулз — лучший фреймворк, который я вообще когда-либо видел. Полный контроль над всем — вот что нужно.
                                +1
                                а вот сайт свой они зря переделали все-таки)
                                  0
                                  Да и вообще функциональность предыдущей версии MooTools была куда лучше нынешней. Сайт какой-то совсем кислый. Я остался на старой версии, разве что из новой взял обновленный domready.
                                    0
                                    Простите, но чем была лучше функциональность предыдущей версии?
                                  +2
                                  зачем выдумывать велосипед?
                                  //Example 1
                                  var someClass=new Class({
                                  
                                     initialize: function(){
                                        alert('Hello, world!');
                                     }
                                  
                                  });

                                  //Example 1
                                  var someClass=new function({
                                  
                                     initialize: function(){
                                        alert('Hello, world!');
                                     }
                                      initialize();
                                  
                                  });

                                  найдите 5 различий
                                    0
                                    там фигурнфе скобки лишние =) опечатка =)
                                      0
                                      ну… короче скобки надо бы поменять по нормальному, думаю поймут все :)
                                        –1
                                        1) снижается вероятность ошибки
                                        2) уменьшается общий объем кода
                                        3) синтаксис приводится к привычному для большинства ОО-языков
                                        4) появляется прямое указание на то, что конструкция var Vasia = new Class призвана создать именно класс, а не функцию. В js синтаксической разницы нет, но, согласитесь, смысловая-то разница есть
                                        5) кроме initialize, у класса есть еще Implements и Extends

                                        В итоге — не писать каждый раз initialize(); + получить более самодокументированный код.
                                          0
                                          А по-моему не надо делать из JavaScript то, чем он не является. Я потому jQuery и люблю, что в ней нет этох «псевдоклассов».
                                            0
                                            зачастую эффективнее/проще использовать имитацию классов, чем вникать в тонкости прототипов или каких-то специальных техник.
                                            mt предоставляет для этого имхо самые удобные средства.
                                              +2
                                              Возможно, но я считаю, что вникать в тонкости языка на котором пишешь — это очень хорошее дело. Я бы даже сказал, необходимое.
                                                +2
                                                несомненно.
                                            +1
                                            >5) кроме initialize, у класса есть еще Implements и Extends
                                            и не менее интересный Mutators :)
                                              0
                                              Кстати, о Mutators было бы хорошо что-нибудь написать. (Это так… Как идея для блога)
                                            –1
                                            Имхо, это изврат — пытыться передалать JavaScript в что-то непонятное такими костылями((
                                              –2
                                              +1
                                              очередной ржавый велоипед с третьим колесом.
                                              а все потомучто ща модно ООП сувать куда надо и ненадо.
                                            –1
                                            Пришлось влезть в проект на этом движке… и как на нем переопределить метод из наследуемого класса?
                                            пипец… ну нафига пихать ооп основанное на классах в язык ооп у которого основан на прототипах.
                                            Если делать муляж так муляж полный, чоб можно было метод родительского класса вызвать в переопределенном методе.

                                            а ведь в родном js всо просто

                                            ChildConstructor.prototype.myMethod=function(){
                                            чота до
                                            ParentConstructor.prototype.myMethod.apply(this,arguments)
                                            чота после
                                            }
                                              0
                                              Алексей, в твоем нативном подходе кроется беда:
                                              если ты переопределишь метод прототипа в наследнике, он переопределится у всех прочих наследников

                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                            Самое читаемое