1. Задавайте здесь вопросы о коде, которые не подходят в другие разделы, такие как:
    Дизайн > Верстка
    PHP > Как сделать на PHP
    Скрыть объявление

Mootools (обзор)

Тема в разделе "Web Coding", создана пользователем D@nil, 22 июл 2007.

Статус темы:
Закрыта.
Модераторы: latteo
  1. D@nil

    D@nil

    Регистр.:
    1 окт 2006
    Сообщения:
    338
    Симпатии:
    122
    [​IMG]
    Итак, уже довольно продолжительный отрезок времени вокруг проекта под названием mootools наблюдается ажиотаж, достаточный для того, чтобы, как минимум, обратить внимание на сей инструмент. Все чаще mootools становится предметом различных дискуссий (в основном — на Западе), причем в них частенько участвуют очень влиятельные в сфере веб-разработок люди. И это все при том, что у нас есть такие монстры, как Backbase, Dojo Toolkit и другие.
    К слову, в объеме библиотек, которые входят в состав mootools, кроется часть причин того успеха, который сопутствует описываемому проекту. На официальном веб-сайте на эту особенность mootools постоянно обращается внимание: к примеру, логотип продукта содержит следующую фразу: "mootools — an ultra compact javascript framework". Иными словами, малый объем кода библиотек использует разработчиков в качестве одного из главнейших преимуществ.
    Но так ли это важно для комплексных веб-разработок? Ряд экспертов сходятся во мнении, что все-таки да. Логика понятна: чем больший функционал заложен в меньший объем, тем лучше для результата. Кроме того, небольшой объем библиотеки практически автоматом подразумевает высокий уровень оптимизации кода, из чего вытекает более высокий уровень быстродействия и стабильности framework, а следовательно, и конечного продукта. Иными словами, многие веб-специалисты говорят примерно так о mootools, выделяя скорость, стабильность и компактность описываемых библиотек.
    Максимальный вес mootools составляет около 30 килобайт
    Следующий момент, о котором стоит упомянуть в разговоре о mootools, это его модульность. При использовании данной framework совсем необязательно подключать все библиотеки, ибо разработчик имеет возможность выбирать лишь те модули, которые необходимы ему под какой-то отдельно взятый проект. Отметим, что все скрипты, плагины и addons (то есть вообще все имеющиеся модули) без компрессии «весят» около 30 килобайт. Во время закачки framework с официального сайта мы можем, во-первых, выбрать, какие именно модули нам нужны, а во-вторых, уровень компрессии от высокого до минимального.
    Объектно-ориентированный JavaScript
    В языке JavaScript многим не нравится отсутствие полноценных и, что не менее важно, удобных способов создавать по-настоящему объектно-ориентированный код. Именно по этой причине сегодня существует несколько проектов, которые устраняют данную проблему (к примеру, Prototype или Base.js). Mootools ко всему прочему пригодится и здесь, ибо функционал для объектно-ориентированного программирования на JavaScript — это, условно говоря, фундамент описываемого проекта.
    Сравним подход к решению упомянутой задачи в mootools и в, пожалуй, самой популярной на данный момент JavaScript-библиотеке под названием Prototype. Создание класса в Prototype выглядит следующим образом.

    HTML:
    var  myClass  =  Class.create();  
    myClass.prototype  =  {  
            initialize:  function(){  
                    ...  
            }  
    }; 
    
    Как видим, не совсем красиво, но многие веб-разработчики готовы мириться с подобным положением вещей ради полноценного ОО. С mootools мы делаем то же самое чуть проще, причем наш код будет полностью совместим с кодом, написанным с помощью Prototype.

    HTML:
    var  myClass  =  new  Class({  
            initialize:  function(){  
                    ...  
            }  
    }); 
    Выезжающее меню на mootools
    Более того, если нам вдруг понадобится исключить функцию инициализации, то мы просто укажем при вызове класса в качестве аргумента noinit. Выглядеть это будет так.
    HTML:
    var  myClass  =  new  Class({  
            initialize:  function(){  
                    alert('инициализация!');  
            }  
    });  
    var  myClass01  =  new  myClass('noinit'); 
    Также с mootools у нас появляется возможность расширять с помощью метода extend функционал встроенных в JavaScript классов (и не только встроенных, вообще любых). Это бывает необходимо довольно часто, особенно если наша разработка имеет достаточно большой масштаб. Приведу простой пример.
    HTML:
    String.extend({  
            alert:  function(){  
                    alert(this);  
            }  
    }); 
    
    Затем только что добавленный к классу String метод alert вызывается одной строчкой кода, результатом чего, согласно содержимому метода, будет диалоговое окно со значением строки, к которой был вызван метод. Выглядит это следующим образом.
    HTML:
    'hello'.alert(); 
    В mootools очень много возможностей для работы со специальными эффектами
    Только в рамках функционала, предназначенного для работы с классами, mootools выглядит удачным выбором, но на этом возможности этой framework не ограничиваются. Изучить их все в одной статье мы не сможем, поэтому посмотрим лишь те возможности, которые представляются наиболее актуальными для современного веб-разработчика.
    Работа с элементами
    Еще одной важной особенностью описываемого продукта является заложенный в него функционал для работы с элементами веб-страниц. К примеру, с помощью довольно распространенной для JavaScript-библиотек функции $() мы можем не только сразу же находить необходимый нам DOM-элемент, но и добавлять к этому элементы созданные нами опции. Приведу простой пример.
    HTML:
    $('myElement').addClass('className');  
    $('myElement').removeClass('className'); 
    Причем совсем необязательно для каждой манипуляции вызывать функции $(). Достаточно сделать это лишь один раз.
    HTML:
    var  el  =  $('myElement');  
    el.addClass('className');  
    el.removeClass('className'); 
    Очень важной особенностью объектно-ориентированного программирования является техника под названием chaining. Она позволяет сделать наш код симпатичнее и здорово помогает, когда речь заходит о больших объемах этого кода. Лучше всего это можно проиллюстрировать характерным примером.
    HTML:
    $('myElement').addClass('myClass').setStyle('position',  'absolute'); 
    Если бы мы не использовали chaining, то обозначенный код занимал бы две строчки. Разумеется, выбор между одной и двумя строчками не кажется актуальным, когда мы имеем в виду лишь один отдельно взятый и вырванный из контекста случай, но в полноценном проекте мы имеем, как минимум, сотню подобных и более комплексных ситуаций, и тогда проблема становится острее.
    Проект JoomlaOS использует mootools
    Для того чтобы у нас появилась возможность строить цепочки из собственных методов, необходимо в заключение каждого из них использовать функцию return, причем возвращать мы можем как ссылку на сам объект, так и любую другую информацию вроде строки или массива. Рассмотрим пример.
    HTML:
    Element.extend({  
      makeRed:  function(){  
        this.style.color  =  'red';  
        return  this;  //  в  этом  методе  мы  возвращаем  ссылку  на  объект  
      },  
      makeBlack:  function(){  
        this.style.color  =  'black';  
        return  "Made  black!";  //  в  этом  методе  мы  возвращаем  строку  
      }  
    });  
    //  Поскольку  в  одном  из  методов  мы  возвращаем  строку,  то  нам  нужно  расширить  
    //  функционал  класса  String  
    String.extend({  
      alert:  function(){  
        alert(this);  
        return  this;  
      }  
    });  
    $('element').makeRed()  //  просто  делаем  элемент  красным  
    $('element').makeBlack().alert();  //  делаем  элемент  черным  и  выводим  
                  //  диалоговое  окно  со  значением  возвращенной  
                    //  строки  
    $('element').makeRed().makeBlack().alert();  //  совмещаем  оба  метода 
    Также стоит отметить, что подобные возможности для взаимодействия с DOM-элементами сильно пригодятся во время работы со специальными эффектами, но об этом чуть ниже.
    Специальные эффекты
    Изучение возможностей mootools по части создания и проигрывания различных специальных эффектов в рамках наших веб-страниц начнем с самого примитивного, а в конце рассмотрим эти же вопросы в рамках расширяемости DOM-элементов с помощью описываемого инструмента. Итак, в mootools для работы со специальными эффектами есть два класса: fx.Style и fxStyles.
    Используя fx.Style, мы можем контролировать значение одного css-атрибута. Посмотрим пример.
    HTML:
    var  marginChange  =  new  fx.Style('myElement',  'margin-top',  {duration:500});  
    marginChange.custom(10,  100); 
    Первая строчка кода в примере создает новый специальный эффект для элемента myElement, в ходе которого будет меняться значение css-атрибута margin-top, а продолжительность для эффекта мы указали 500 миллисекунд. Второй строчкой кода мы запускаем специальный эффект, сообщая ему, что значение margin-top должно измениться с 10 до 100.
    С mootools мы получаем больше возможностей для ОО JavaScript
    Разумеется, при использовании лишь одного css-атрибута мы можем создавать исключительно простейшие специальные эффекты. Для более сложных задач стоит применять класс fx.Styles, с помощью которого мы получаем контроль над несколькими css-атрибутами. Снова небольшой пример.
    HTML:
    var  myEffects  =  new  fx.Styles('myElement',  {duration:  1000,  transition:  fx.linear});    
    myEffects.custom({'height':  [10,  100],  'width':  [900,  300]}); 
    Здесь все делается аналогично предыдущему примеру, но с вариациями. Во-первых, в первой строчке кода мы ко всему прочему указываем тип transition, который будет использоваться во время проигрывания специального эффекта. Все типы также хранятся в библиотеке fx. Затем во второй строчке кода мы указываем не только значения «от» и «до», но и сами css-атрибуты, которые должны меняться. С одной стороны, подобное разделение на fx.Style и fx.Styles может запутать, но со временем привыкаешь.
    Еще одно меню на mootools — на этот раз выпадающее
    Как и было обещано в начале рассказа о работе со специальными эффектами в mootools, сейчас мы рассмотрим способ использовать библиотеку fx в связке с функционалом для расширения DOM-элементов. Выглядит это следующим образом.
    HTML:
    
    Element.extend({  
            effect:  function(property,  options){  
                    return  new  fx.Style(this,  property,  options);  
            }  
    });  
    var  myEffect  =  $('myElement').effect('height',  {duration:  1000,  transition:  fx.linear});  
    myEffect.custom(10,  100); 
    
    Данный пример отличается от предыдущих лишь тем, что создается и вызывается специальный эффект при помощи метода effect, который является расширением к нашему элементу myElement. Стоит отметить, что ссылку на элемент мы даем при помощи cлова this во время вызова new fx.Style. Все остальное — в рамках уже описанного способа работы со специальными эффектами в mootools.
    Итог
    Если подводить общий итог, то mootools по праву считается продуктом очень высокого качества, а многочисленные положительные отзывы о нем в индустрии веб-разработок кажутся вполне обоснованными. К сожалению, в рамках настоящего материала не хватило места рассказать обо всех возможностях mootools, поэтому лишь перечислю библиотеки, которые входят в состав полной сборки, с краткими комментариями:
    • Array.js — отвечает за работу с массивами;
    • Element.js — отвечает за работу с DOM-элементами;
    • Function.js — отвечает за работу с функциями;
    • String.js — отвечает за работу со строками;
    • Ajax.js — полноценный функционал для создания и обработки AJAX-запросов;
    • Dom.js — функционал для более глубокого взаимодействия с DOM-элементами, а также CSS query;
    • Drag.js — автоматизация drag'n'drop-функционала;
    • Fx.js — отвечает за работу со специальными эффектами;
    • Accordion.js — виджет «Аккордеон»;
    • Cookie.js — отвечает за работу с cookies;
    • Tips.js — автоматизация функционала, отвечающего за всплывающие подсказки;
    • Window.js — отвечает за работу с объектом window.
    Как видно из списка, возможностей в mootools заложено огромное количество, что вкупе с модульностью инструмента делает эту framework удачным выбором для многих, даже крупных, проектов.

    (с) hostinfo.ru

    http://mootools.net/
     
    E-van нравится это.
  2. spacer123

    spacer123 Постоялец

    Регистр.:
    8 дек 2006
    Сообщения:
    74
    Симпатии:
    9
    Действительно клевая библиотека. Всегда можно взять только те модули, что нужны под конкретную задачу. Достаточно давно пользую для различных сайтов и всем рекоммендую =)
     
  3. olokowiwa

    olokowiwa Прохожие

    Отличный Framework, мой любимый ;) Кстати, эта же команда ребят разрабатывает(-ала) аяксовую cms ( www.mooflex.net ). Годик назад удалось даже демку глянуть, но сейчас вроде приостановили чтоль.
     
  4. D@nil

    D@nil

    Регистр.:
    1 окт 2006
    Сообщения:
    338
    Симпатии:
    122
  5. hansschwanz

    hansschwanz Писатель

    Регистр.:
    20 июл 2007
    Сообщения:
    1
    Симпатии:
    0
    for those who dont know , joomla template maker ROCKETTHEME dot com uses mootools for their Template Menus. but suckerfish is told to be better for navigation
     
  6. E-van

    E-van

    Регистр.:
    12 сен 2006
    Сообщения:
    228
    Симпатии:
    18
    Да, rockettheme активно используют эту библиотеку, вот только одно НО - никаких статей на тему глубокой модификации их шаблонов нет. Автору статьи - респект :)
     
  7. finogeev

    finogeev Прохожие

    А кто может прокунсультировать по данной библиотеке ???
    И дать реальный примерчик ... ???
     
  8. 3lo_13

    3lo_13 Прохожие

    от души за материал большой респект
     
  9. pixelranger

    pixelranger

    Регистр.:
    24 июн 2006
    Сообщения:
    386
    Симпатии:
    117
    Смотри на сайте разработчика, там хватает примеров...
    Заметил такую штуку с библиотекой.. На серваке и локалке хорошо работает, но стоит использовать ее, допустим при верске, без апача, то она не рабоает.Как этот глюк можно исправить?
     
  10. zizop

    zizop Прохожие

    Мне приходилось работать как с mootools так и с jquery, и имхо jquery лучше по всем статьям, взять хотябы туеву хучу плагинов, реализующих огромное кол-во фишек.
    Вообщем смотрите сами, и сравнивайте.
     
Статус темы:
Закрыта.