MooTools 1.3

    image
    image
    Вот и вышел долгожданный релиз MooTools 1.3. Расскажу немного об изменениях в самом фреймворке, и в его «окружении». Между версиями 1.2 и 1.3 довольно много различий, но обо всем по порядку.

    Первое что надо сказать, это то, что существует сборка версии 1.3, которая 100% совместима с 1.2, можно не боятся обновляться.

    Slick

    И так, об отличиях. Самая вкусная вещь в новой версии — это новый css selector engine Slick. Он полностью независим от MooTools, может использоваться отдельно. Он «изкаробки» поддерживает все мыслимые и немыслимые селекторы/псевдо-селекторы, а если вам и этого покажется мало, ничего страшного, всегда есть возможность создать новый.
    Примеры использования вне MooTools:
    Slick.search(document, "div > p.moo:not(.foo)"); // возвращает набор (массив) элементов, даже если под выборку попал только один, если не было выбрано ни одного элемента, возвращает null. Первым параметром идет контекст поиска, вторым селектор.
    Slick.find(document, "div > p.moo:not(.foo)"); // почти то же самое, только теперь возвращается только один, первый попадающий под селектор элемент
    Slick.match(node, "p.moo"); // проверяет на соответствие node указанному селектору
    Slick.contains(node, node2); // проверяет включен ли node2 в node
    

    Внутри MooTools же селекторы используются как обычно.

    А теперь лаконично:
    • Pure-javascript
    • Быстрее на 50% чем старый
    • Поддерживает любой селектор о котором только можно подумать
    • Гибкий, позволяет создавать свои псевдо-селекторы
    • Поддерживает поиск по XML

    Изменения в API

    Ядро

    • $методы теперь в прошлом:
    • $chk(value) => (value != null)
    • $A(item) => Array.from(item)
    • $splat => Array.from
    • $clear => придется использовать нативные clearTimeout или clearInterval
    • $defined => (value != null)
    • $each => Array.each / Object.each в зависимости от контекста
    • $empty => удалено, надо использовать function(){}
    • $extend(source, extended) => Object.append(source, extended)
    • $merge({}, a, b) => Object.merge({}, a, b)
    • $mixin(a, b) => Object.merge(a, b)
    • $lambda => Function.from
    • $random => Number.random
    • $time => Date.now
    • $type => typeOf с одним изменением, для пустых объектов теперь возвращается строка “null”
    • $unlink => Array.clone / Object.clone
    • $arguments => удалено
    • $pick => Array.pick или [a, b, c].pick()
    • $exec => Browser.exec

    А так же
    • Native теперь именуется Type
    • Array.type / String.type / Number.type / и т.д. => Type.isArray / Type.isString / Type.isNumber / и т.д.
    • Hash и $H перенесены в MooTools More

    Browser detection

    • Engine detection => user-agent detection.
    • Browser.Engine => удалено
    • Browser.Engine.trident => Browser.ie
    • Browser.Engine.gecko => Browser.firefox
    • Browser.Engine.webkit => Browser.safari or Browser.chrome
    • Browser.Engine.presto => Browser.opera
    • Browser.Platform.ipod => Browser.Platform.ios

    Array

    • Array.extend => Array.append

    Function

    • myFn.bind(this, [arg1, arg2, arg3]) => myFn.bind(this, arg1, arg2, arg3) или myFn.pass([arg1, arg2, arg3], this)
    • $try => Function.attempt
    • myFn.run(args, bind) => myFn.apply(bind, Array.from(args));
    • myFn.create => используте .pass, .bind, .delay, .periodical
    • myFn.bindWithEvent => устарело

    Element

    • element.injectInside, .injectBefore, .injectAfter, etc => element.inject(context, where);
    • element.grabTop,… => element.grab(context, where)
    • element.hasChild(item) => element.contains(item) &&
    • item != element
    • Selectors.Pseudo => Slick.definePseudo(name, fn)
    • Element.get => больше не поддерживает второго параметра (это используется для анимации, например element.get(‘tween’, options) теперь element.set(‘tween’, options).get(‘tween’))

    С помощю Slick создавать новые елементы стало проще:
    new Element("input", {"id": "someID", "class": "someClass1", "disabled": true}); // Было
    new Element("input#someID.someClass1[disabled=true]"); // Стало
    

    Новые возможности

    • Type.from (Array.from, String.from, Function.from и т.д.) => преобразование типов
    • Fx => унифицированный таймер для всех еффектов

    Окружение

    • MooTools Test Runner => теперь тестирование проходит в автоматическом режиме не только в каждом браузере, но и на сервере
    • Packager => новый инструмент для сбора MooTools под свои нужны.

    Packager

    Packager был разработан для управления проектами. Работает он следующим образом: вы создаете код, в начале каждого файла создаете специальный комментарий, где указываете название, автора, зависимости и т.д., так же создаете конфигурационный файл пакета (проекта), где указываете название, описание, список участвующих в сборке файлов и т.д., packager работает из терминала:
    $ packager register /path/to/project
    $ packager build ProjectName/* > myproject.js
    

    При сборке учитываются внешние зависимости. Под внешними я имею ввиду зависимости от других проектов, которые так же зарегистрированы в Packager. Штука очень удобная, использую для своих проектов уже полгода.

    Резюме

    В целом было переписано около трети кода. Так же много изменений в MooTools More, например появилась поддержка псевдо-селекторов для событий, например:
    element.addEvent('click:once', function(){}); // после клика обработчик будет автоматически удален
    element.addEvent('click:relay(.some-selector)', function(){}); // а тут у нас делегирование
    element.addEvent('keydown:keys(ctrl+s)', function(){}); // думаю тут все ясно
    

    Следующий большой релиз — MooTools 2 (теперь уже точно).
    Репозитории:
    MooTools Core
    MooTools More
    Slick
    Packager

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

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

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

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

      +7
      использую moo порядка уже двух лет, он действительно раскошен ;)
        0
        Будьте добры, подскажите неосведомленному, какая разница между jQuery и Prototype? Я просто работаю с ними, и хотелось бы знать о разнице с Mootols. Спасибо.
          +4
          Prototype 1.* и MooTools довольно похожи, они расширяют прототипы нативных обьектов, разница разве что в API (честно, я не работал с Prototype, это все что знаю), а вот про раздницу между jQuery и MooTools мог бы рассказать, но вместо меня это уже сделал Aaron Newton: jqueryvsmootools.com/
          0
          Кто ж его, бедного, раскосил-то? =)
          0
          «сборка версии 1.3, которая 100% совместима с 1.3»

          Мне одному кажется что эту фразу нужно исправить?
            0
            Спасибо, поправил
          • НЛО прилетело и опубликовало эту надпись здесь
              +2
              Вот это круто: 'keydown:keys(ctrl+s)'

              Еще вроде исправлен баг в IE с полупрозрачными блоками при анимации (шероховатости появлялись), хотя я сам еще не проверял.

              Интересно, насколько Slick медленнее $().getElement() или $$() при аналогичных операциях.

              Теперь остается мечтать о нормальной библиотеке плагинов, чтобы действительно все охватывала и не приходилось рыскать тривиальные вещи типа слайдеров и слайдшоу.
                0

                  +1
                  Интересно, насколько Slick медленнее $().getElement() или $$() при аналогичных операциях.

                  Если честно, не совсем понял ваш вопрос. Наверно ответ должен быть таким:
                  $('a').getElement('b') эквивалентно Slick.find($('a'), 'b');
                  Теперь остается мечтать о нормальной библиотеке плагинов, чтобы действительно все охватывала и не приходилось рыскать тривиальные вещи типа слайдеров и слайдшоу.

                  Ну есть же Forge
                +1
                какой-то деградирующий релиз судя по описанию — только поубирали все.
                доллар ф-ции жалко, мне они нравилисью и плевать на захзламление глобального н.с.
                MooTools люблю
                  0
                  особые тонны ненависти за убиение $chk.
                  но вообще, насколько я понял, они знали про то, что убьют все эти ф-ции уже давно. не понимаю, почему нельзя было повесить лейбу «депрекейтед».
                  до сих пор в неприятном шоке…
                    0
                    Если выбрать режим совместимости с 1.2, то все функции на месте как альясы к новым.
                      0
                      я так понимаю, что они оставили это как временный костыль и рекомендуют не использовать.
                        0
                        @deprecated не сильно меньший костыль. Имхо, если переходить на новую версию по каким-то причинам, нет проблемы в IDE автозаменой развлечься.
                          0
                          if($chk(obj)) заменить на if (obj || obj === 0) автозаменой непросто)
                          если бы он поставили депрекейтид с версии 1.2, то я, когда перешел на Мутулз, просто не использовал бы эти ф-ции, так как знал, что они через полгода перестанут поддерживаться.
                            0
                            if($chk(obj)) заменить на if (obj || obj === 0) автозаменой непросто)

                            Это зависит от того каким вы инструментом пользуетесь
                            если бы он поставили депрекейтид с версии 1.2, то я, когда перешел на Мутулз, просто не использовал бы эти ф-ции, так как знал, что они через полгода перестанут поддерживаться.

                            Это да… На крайний случай можете просто оставить эту функцию (скопировать с 1.2)
                      +1
                      Да, это было известно сразу после релиза 1.2.0 или 1.2.1, только тогда думали делать сразу 2.0, потом в дисскусиях родилась 1.3, и эти изменения перекочевали туда. На счет токо чтоб вешать ярлыки о будущем удалении или переработке функции, это да, надо будет поговорить об этом
                        0
                        Предложение было отклонено, сослались на то, что есть compat layer
                    0
                    крутой релиз. но все никак не могу свыкнуться с отсутствием Function#curry — супер-удобная штука из прототайпа.
                      0
                      function curry() {
                      if (!arguments.length) return this;
                      var __method = this, args = slice.call(arguments, 0);
                      return function() {
                      var a = merge(args, arguments);
                      return __method.apply(this, a);
                      }
                      }

                      засунуть в мутулс — одна строчка
                        0
                        да засунуть то не проблема. проблема в том, что мейнтейнеры не считают эту штуку необходимой и не включают ее в базовый фреймворк.
                          0
                          три или четыре года использовать пропотайп, ниразу не воспользовался :)
                          memoize — вот она да, полезная. А в пропотипе ее нету :)
                      +4
                      Эх, была не была, перевел проект на mootools 1.3 и mootools more 1.3rc1, без compatibility layer)

                      Было около 100 килобайт js-кода, все оказалось просто и безболезненно, поиск/замена, дел на пол-часа, хорошо, что тесты есть.
                        0
                        Мне вот интересно, как распечатать перечень всех компонентов включенных в сборку? Какие компоненты входят в сборку на googleapis или там только core?

                        > Быстрее на 50% чем старый
                        А где собсна бенчмарк?
                          0
                          Мне вот интересно, как распечатать перечень всех компонентов включенных в сборку? Какие компоненты входят в сборку на googleapis или там только core?

                          Если используете Packager для сборки, то смотрите Packager::get_packages()
                          На сайте в разделе download включены все пакеты из этого списка, так же и на googleapis, MooTools More собирается отдельно
                          А где собсна бенчмарк?

                          mootools.net/slickspeed/
                            0
                            Спасибо, исчерпывающе
                              0
                              Правда про ускорение сомнительно, скорее наоборот.

                              final time (less is better) 1.2 — 59, 1.3 — 86

                              По некоторым параметрам отставание вообще в разы.
                            0
                            А кто-нибудь сравнивал Slick и Sizzle? Sizzle всё то же самое умеет
                              0
                              Умеет, но насколько я понял, они по разному работают. В Slick есть парсер, который разбивает селектор на части, и ищет сравнением, а Sizzle ищет с помощью регулярных выражений. Если я правильно понял.
                              0
                              Если сюда кто-нибудь еще заглянет…

                              Попробовал перевести этот способ асинхронной загрузки с jquery на mootools help.yandex.ru/metrika/?id=1111231

                              window.addEvent('domready', function(){
                              var yam = document.createElement(«script»);
                              yam.type = «text/javascript»;
                              yam.src = «mc.yandex.ru/metrika/watch.js»;
                              document.getElementsByTagName(«head»)[0].appendChild(yam);
                              });

                              window.yandex_metrika_callback = function() {
                              window.yaCounterXXXXXX = new Ya.Metrika(XXXXXXX);
                              }

                              В логе драгонфлая все вроде бы работает, но данные не поступают. Как правильно вызвать callback метрики?
                                0
                                В принципе должно работать
                                document.addEvent('domready', function(){
                                    new Element('script', {
                                        type: 'text/javascript',
                                        src: document.location.protocol + '//mc.yandex.ru/metrika/watch.js',
                                        async: 'true'
                                    }).inject(document.head);
                                });
                                

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

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