Антон Шевчук » JavaScript http://anton.shevchuk.name Web-разработчик Wed, 01 Feb 2012 12:54:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Google Closure для начинающих. Компоненты http://anton.shevchuk.name/javascript/google-closure-for-beginners-components/ http://anton.shevchuk.name/javascript/google-closure-for-beginners-components/#comments Tue, 14 Jun 2011 10:06:19 +0000 Anton Shevchuk http://anton.shevchuk.name/?p=1789

Продолжим изучение Google Closure Library. В данной статье я постараюсь отклонится от «jQuery way» и продемонстрировать как удобны в использовании и просты в создании компоненты фреймворка.

Давненько я технических статей не писал, отвыкли небось, но отвлекать не буду, читайте на здоровье ;)

Это все же, в большей степени, перевод статьи из официальной документации, но он слегка сокращен и адаптирован

Много вкусного несет в себе пакет goog.ui, я совсем чуть-чуть рассказывал о нем в предыдущей статье, но напомню — этот пакет содержит в себе готовые компоненты для реализации интерфейсов: кнопки, меню, календари, и т.д.

Основой всех компонентов является класс goog.ui.Component, и для создания своих компонентов без него не обойтись. Он требует от нас определенную структуры класса состоящую из шести методов, которые описывают жизненный цикл компонента (в хронологическом порядке):

Метод Описание метода (жизненного цикла)
constructor создание компонента
createDom() создание DOM структуры компонента
decorateInternal() (optional)
enterDocument() после создания DOM структуры будет запущен данный метод (обработчики событий вешаем тут)
exitDocument() перед удалением DOM структуры (чистим обработчики событий)
dispose() удаление компонента

Отдельно особняком стоит метод canDecorate(existingElement) — он расскажет нам можно ли создать компонент основываясь на уже существующих элементах (existingElement). По умолчанию, суперкласс всегда возвращает true.

И так, перейдем к созданию своего компонента…

Инициализация

Начинается все с шага ноль — подключения goog.ui.Component, и объявления имени нашего компонента.

goog.provide('tutorial.component');

goog.require('goog.ui.Component');

Теперь шаг первый — это создание конструктора компонента:

tutorial.component = function(opt_label, opt_domHelper) {
    // вызов конструктора предка
    goog.ui.Component.call(this, opt_domHelper);

    /**
    * Заголовок виджета
    * @type String
    * @private
    */
    this.initialLabel_ = opt_label || 'Link';

    /**
    * Наш обработчик событий
    * @type goog.events.EventHandler
    * @private
    */
    this.eh_ = new goog.events.EventHandler(this);

    /**
    * Обработчик клавиатуры, у нас в компоненте не используется, но правила именования следует соблюдать
    *
    * @type {goog.events.KeyHandler?}
    * @private
    */
    this.kh_ = null;
};
// наследуем goog.ui.Component
goog.inherits(tutorial.component, goog.ui.Component);

Создание DOM структуры

После создания экземпляра компонента необходимо создать соответствующую DOM структуру, для этого потребуется реализовать метод createDom() и decorateInternal() (опционально):

createDom() создание DOM структуры компонента, и сохранение в this.element_
decorateInternal() (optional) создаем компонент используя уже существующую DOM структуру, и так же сохраняем в this.element_

Ну и пример кода:


/**
 * создаём необходимую нам DOM структуру
 * в нашем примере необходим лишь один div
 */
tutorial.component.prototype.createDom = function() {
    // вызываем decorateInternal который внесет изменения в новосозданный элемент
    this.decorateInternal(this.dom_.createElement('div'));
};

/**
 * изменяем существующую структуру под наши нужды
 *
 * @param {HTMLElement} element DIV который мы изменяем
 */
tutorial.component.prototype.decorateInternal = function(element) {
    tutorial.component.superClass_.decorateInternal.call(this, element);

    var elem = this.getElement();
    goog.dom.classes.add(elem, 'tutorial-component');
    goog.dom.setTextContent(elem, this.initialLabel_);

};

Еще один шаг — после того как построили DOM

Зачастую, инициализация компонента требует уже заранее подготовленную структуру DOM. К примеру, вы создаете popup меню и вам необходимо повесить обработчик на div с id=”menu”, но этот элемент мы создаем лишь на этапе createDom, таким образом у нас получается неувязочка, но не стоит беспокоится, создатели фреймворка приберегли на этот случай метод enterDocument():

enterDocument() в данном методе реализуют функционал, который требует наличие структуры компонента в DOM

Реализуя метод enterDocument() необходимо всегда вызывать одноименный метод суперкласса, который вызовет все дочерние компоненты. Собственно, в методе enterDocument() лучше всего описывать методы, которые вешают обработчики событий на элементы DOM, и это тем более обязательно для элементов, которые не являются частью компонента (а лишь добавляют нам пачку зависимостей =).

Но вернемся к нашему примеру:

tutorial.component.prototype.enterDocument = function() {
    // вызываем метод супер класса
    tutorial.component.superClass_.enterDocument.call(this);

    // простой обработчик на click
    this.eh_.listen(
        this.getElement(),
        goog.events.EventType.CLICK,
        this.onDivClicked_
    );
};

Резюмируя — не хочешь проблем с обработчиками — вешай их в enterDocument().

Методы render() и decorate()

Если мы все делали правильно, то можем попробовать инициализировать свой компонент используя метод render():

var comp1 = new tutorial.component("Button");
     comp1.render(goog.dom.$('button1'));

Метод render() вызывает createDom(), получившийся element_ помещает в DOM и затем вызывает enterDocument(). Если метод render() дергать с параметром Element (в примере выше это “button1″), то element_ будет помещен внутрь него, иначе станет потомком body.

В примере есть и второй способ вызова компонента:

var comp2 = new tutorial.component("Button Two");
     comp2.decorate(goog.dom.$('button2'));

Метод decorate() получает уже готовый element_ в качестве параметра, который и скармливает методу decorateInternal(), и затем точно так же вызывается enterDocument().

Внутри компонента вы не должны вызывать методы render() или decorate(). Хотя, если вы не используете методы render() или decorate(), следует вызывать enterDocument() после того как будут добавлены все необходимые элементы компонента в DOM

«Я тебя породил, я тебя и уничтожу»

Создавая компонент не забИвайте описывать методы для подчистки DOM’а после его удаления, для этого следует подчистить все, что мы наворотили в методах createDom() и enterDocument(). В этом нам помогут следующие методы:

exitDocument() вызывается перед удалением DOM структуры — тут чистим обработчики событий
dispose() удаление компонента и DOM элементов

Ну и пример метода exitDocument():

tutorial.component.prototype.exitDocument = function() {
    tutorial.component.superClass_.exitDocument.call(this);

    this.eh_.unlisten(
        this.getElement(),
        goog.events.EventType.CLICK,
        this.onDivClicked_
    );

    this.eh_.unlisten(
        this.getElement(),
        [goog.events.EventType.MOUSEOVER, goog.events.EventType.MOUSEOUT],
        this.onDivHover_
    );
};

Обратите внимание на вызов метода exitDocument() нашего суперкласса — данная махинация необходима для вызова методов exitDocument() у всех дочерних компонентов (если таковые имеются). Этот вызов обязателен!

Теперь dispose():

tutorial.component.prototype.dispose = function() {
    if (!this.isDisposed()) {
        tutorial.component.superClass_.dispose.call(this);
        this.eh_.dispose();
        if (this.kh_) {
          this.kh_.dispose();
        }
    }
};

Опять же — дергаем супер класс, затем подчищаем обработчики событий.

В заключение

Как видите — в создании компонента нет ничего сложного, стоит лишь следовать простым правилам, которые диктует на фреймворк, и вы не запутаетесь и все будет работать.

И да, пощупать пример можно на страничке closure-tutorials/component.html.

Читаем еще

Offtopic

Я тут еще в твиттер на досуге пишу, так что следите и не пропустите ;)

Другие посты на эту тему

]]> http://anton.shevchuk.name/javascript/google-closure-for-beginners-components/feed/ 3 Google Closure руководство для начинающих http://anton.shevchuk.name/javascript/google-closure-for-beginners-with-examples/ http://anton.shevchuk.name/javascript/google-closure-for-beginners-with-examples/#comments Tue, 18 Jan 2011 16:18:37 +0000 Anton Shevchuk http://anton.shevchuk.name/?p=1653

Мне как всегда не сидится на месте, в этот раз я взялся за Google Closure Library.

В заголовке красуется «для начинающих», но мы то знаем, если вы добрались до Closure, то ваш уровень уже далек от озвученного, хотя основы мы будем проходить по натоптанному пути.

Подключение библиотеки

Для подключения Closure нам понадобиться скачать библиотеку с домашней странички проекта либо используя SVN, и подключить используя простой синтаксис:

<script type="text/javascript" src="js/closure/goog/base.js"></script>

Насчет создания единого CDN хранилища для своей библиотеки Google ответил кратко:

Closure Library differs from a lot of other JavaScript libraries in that it’s very broad and large and, in general, every class or namespace is stored in its own file, so just what is needed can be included in an app. As such, it’s infeasible to require users to pull all of Closure as they would another library in the AJAX APIs, as the download would be very large and split over a lot of individual requests. So we don’t have any immediate plans for AJAX API support.

Хотя, если посмотреть внимательно на тот же Dojo Toolkit, то при похожей архитектуре у них есть возможность организации CDN из коробки.

Подключение пакетов

Closure состоит из отдельных пакетов, которые необходимо подключать по отдельности:

goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.EventType');

Про расчет зависимостей между пакетами — не стоит беспокоиться, они позаботятся о себе самостоятельно (по крайней мере постараются, если им прописаны зависимости).

Поиск DOM элементов

Тут все просто и очень похоже на … обычный JavaScript, т.е. универсального врапера который нам предоставляет jQuery у нас нет, а есть пару пакетов:

// подключаем DOM пакет
goog.require('goog.dom');
// еще один, который базируется на коде Dojo, и обеспечивает подмену QuerySelectorAll
goog.require('goog.dom.query');

Ну теперь непосредственно о выборках:

// получаем элемент по ID
goog.dom.getElement('header')
// или
goog.dom.$('header')

// получаем первый элемент с определенным классом
goog.dom.getElementByClass('myclass')
// или все
goog.dom.getElementsByClass('myclass')

Очень часто придется использовать метод getElementsByTagNameAndClass, т.к. он достаточно универсален:

// получаем все DOM элементы
goog.dom.getElementsByTagNameAndClass()

// получаем все <p class="myclass">
goog.dom.getElementsByTagNameAndClass('p','myclass')

// или используя алиас
goog.dom.$$('p','myclass')

// получаем все <div> элементы
goog.dom.$$('div')

// получаем все элементы с class="myclass"
goog.dom.$$(null, 'myclass')

// получаем все <div> с классом "myclass" внутри элемента id="id"
goog.dom.$$('div', 'myclass', goog.dom.$('id'))

Если вам и этого показалось мало, тут на помощь приходит document.QuerySelectorAll, ну а точнее его врапер, который основывается на коде Dojo Toolkit (кому нужны эти подробности?):

// так работает
goog.dom.query('h1+h2, a:last-child')

Еще стоит упомянуть поиск элементов среди предков:

// все предки
goog.dom.getAncestorByTagNameAndClass(goog.dom.$('id'))

// лишь <div> элементы
goog.dom.getAncestorByTagNameAndClass(goog.dom.$('id'), 'div')

// все предки с классом class="myclass"
goog.dom.getAncestorByTagNameAndClass(goog.dom.$('id'), null, 'myclass')

// все <div> элементы с классом class="myclass"
goog.dom.getAncestorByTagNameAndClass(goog.dom.$('id'), 'div', 'myclass')

Манипуляции с DOM

Кроме как взять готовое, можно создать DOM элемент ручками:

// создаем элемент
var newHeader = goog.dom.createDom('h2', {'style':'color:red;', 'class':'title'}, 'Hello World!');
// или
var newHeader = goog.dom.$dom('h2', {'style':'color:red;', 'class':'title'}, 'Hello World!');
// добавляем к DOM
goog.dom.appendChild(document.body, newHeader);

Изменяем классы и стили

Ничего сложного, приведу лишь наглядные примеры, начну с работы с классами:

// нам понадобится goog.dom.classes
goog.require('goog.dom.classes');

// устанавливаем имя класса(-ов) элементу
goog.dom.classes.set(goog.dom.$('id'), 'className') 

// получаем все классы элемента
goog.dom.classes.get(goog.dom.$('id'))

// добавляем класс или несколько
goog.dom.classes.add(goog.dom.$('id'), 'className', 'anotherClass') 

// удаляем классы или несколько
goog.dom.classes.remove(goog.dom.$('id'), 'className', 'anotherClass') 

// переключаем класс с одного на другой
goog.dom.classes.swap(goog.dom.$('id'), 'fromClass', 'toClass') 

// добавляем и удаляем классы одним махом
goog.dom.classes.addRemove(goog.dom.$('id'), 'addClass', ['removeClass']) 

// проверяем наличие класса
goog.dom.classes.has(goog.dom.$('id'), 'className') 

// добавляем/удаляем класс по флагу
goog.dom.classes.enable(goog.dom.$('id'), 'className', true||false) 

// "мигаем" классом - если есть удаляем, нет - добавляем
goog.dom.classes.toggle(goog.dom.$('id'), 'className')

Работа со стилями тоже не многим сложнее:

// подключаем
goog.require('goog.style');

// получаем значение атрибута
goog.style.getStyle(goog.dom.$('id'), 'color') 

// устанавливаем значения
goog.style.setStyle(goog.dom.$('id'), 'color', '#ff0000')
// или
goog.style.setStyle(goog.dom.$('id'), { 'margin-top':'20px', 'margin-bottom':'20px' })

Поиграемся с размерами:

// получение размеров
goog.style.getSize(goog.dom.$('id'))
// задание размеров
goog.style.setSize(goog.dom.$('id'), width, height)
// или
goog.style.setSize(goog.dom.$('id'), new goog.math.Size(width, height)) 

// задаем высоту
goog.style.setHeight(goog.dom.$('id'), height)
// задаем ширину
goog.style.setWidth(goog.dom.$('id'), width)

Расположение элементов: 

// указываем top и left
goog.style.setPosition(goog.dom.$('id'), left, top)
// или
goog.style.setPosition(goog.dom.$('id'), new goog.math.Coordinate(x, y)) 

// получаем offsetLeft и offsetTop свойства элементов
// нам вернется объект goog.math.Coordinate
goog.style.getPosition(goog.dom.$('id')) Opacity manipulation:

Прозрачность и видимость элементов:

// устанавливаем значение opacity
goog.style.setOpacity(goog.dom.$('id'), 0.5)
// устанавливаем значение opacity
goog.style.getOpacity(goog.dom.$('id')) 

// прячем элемент
goog.style.setStyle(goog.dom.$('id'), "display", "none");
// или
goog.style.showElement(goog.dom.$('id'), false); 

// показываем
goog.style.setStyle(goog.dom.$('id'), "display", "");
// или
goog.style.showElement(goog.dom.$('id'), true);

Работаем с событиями

Если вы работали с событиями в JavaScript’е или в jQuery, то для вас тут будет все знакомо, пожалуй стоит упомянуть, что привычного по jQuery DOM ready в Closure нет:

The short story is that we don’t want to wait for DOMContentReady (or worse the load event) since it leads to bad user experience. The UI is not responsive until all the DOM has been loaded from the network. So the preferred way is to use inline scripts as soon as possible.

Хотя, есть возможность повесить обработчик, но его не принято использовать:

goog.events.listen(window, goog.events.EventType.LOAD, function() {
    // тут код вашей функции
});

Это немного сбивает с толку, и вы даже можете встретить использование <body load=”…”>. В остальном, в Closure велосипед не изобрели и работа с событиями похожа на большинство существующих фреймворков, вот что нам необходимо сделать:

// подключаем
goog.require('goog.events');
goog.require('goog.events.EventType');

/**
 * "Вешаем" свой обработчик используя метод goog.events.listen
 *
 * @param {EventTarget|goog.events.EventTarget} src
 * @param {string|Array.<string>} type
 * @param {Function|Object} listener
 * @param {boolean=} opt_capture
 * @param {Object=} opt_handler
 */
goog.events.listen(src, type, listener, opt_capture, opt_handler);

// пример
goog.events.listen(
    goog.dom.$('id'),
    goog.events.EventType.CLICK, // == "click"
    function(event){
         /*...*/
    }
);

Чуть-чуть пояснений:

  • src — источник события, обычно это некий DOM элемент, но по факту любой объект с методом dispatchEvent()
  • type — имя события, или массив имен
  • listener — наша функция-обработчик события
  • opt_capture — необязательны булевый параметр, отвечает за то, в какой момент будет происходить перехват события — всплытия или погружения
  • opt_handler — необязательный параметр, позволяет перебиндить this для нашей функции (так которая listener)

Еще немного примеров:

// если нам необходимо обработать событие лишь единожды
goog.events.listenOnce(goog.dom.$('id'), 'click', function(event){ /*...*/ } );

// добавляем обработчик
var key = goog.events.listen(goog.dom.$('id'), 'click', myFunction);
// и удаляем
goog.events.unlistenByKey(key); 

// добавляем
goog.events.listen(goog.dom.$('id'), 'click', myFunction, true);
// и удаляем
goog.events.unlisten(goog.dom.$('id'), 'click', myFunction, true);

// удаляем все обработчики
goog.events.removeAll(goog.dom.$('id'));
// со всего
goog.events.removeAll();

Ух, много текста, но вы не отчаивайтесь, сохраните лучше шпаргалку в избранном ;)

Разрабатываем пакет

Когда решите, что в вашем проекте требуется нечто большее, чем всплывающие подсказки, то значит вы созрели для написания своих пакетов, и да это тоже не сложно. Стоит начать приблизительно со следующего кода:

// это имя нашего пакета
goog.provide('tutorial.simple');

// наши зависимости
goog.require('goog.dom');
goog.require('goog.style');

/**
 * constructor и этим все сказано
 */
tutorial.simple = function() {
    /* code here */
};

Теперь стоит немного расширить функционал, надо бы получить какой-то элемент и провести с ним какие-нибудь махинации:

/**
 * @param {Element} el
 */
tutorial.simple = function(el) {
    this.el = el;
};

/**
 * @type {Element}
 */
tutorial.simple.prototype.el = null;

/**
 * меняем цвет текста элемента на красный
 */
tutorial.simple.prototype.red = function(color) {
    goog.style.setStyle(this.el, {"color":color});
};

Теперь как работать с этим кодом-то:

<script type="text/javascript" src="js/closure/goog/base.js"></script>
<script type="text/javascript" src="js/simple.js"></script>
<script type="text/javascript">
var simple = tutorial.simple(document.getElementById("header"))
     simple.red();
</script>

Если у вас прописаны зависимости, то вторая строчка преобразуется в лаконичную goog.require(‘tutorial.simple’);

AJAX

Как же это, писать статью о JavaScript фреймворке и не упомянуть работу с AJAX — конечно же тут есть свой врапер, работа с ним дело не хитрое и каждому по плечу, вот пример:

// потребуется
goog.require('goog.net.XhrIo');

// ну и пример загрузки контента
// воспользуемся статическим методом goog.net.XhrIo.send
// первым параметром идет URL, затем callback
// имя метода и данные передаваемые на сервер
goog.net.XhrIo.send('ajax/response.json', function(ev){
    // берем JSON
    var data = ev.target.getResponseJson();

    // находим некий контейнер на страничке
    var container = goog.dom.$('articles');

    // идем в цикле по статьям из ответа сервера
    goog.array.forEach(data.articles, function(article){
          // создаем элементы
          var title = goog.dom.$dom('h2', {'innerHTML':article.title});
          var content = goog.dom.$dom('p', {'innerHTML':article.content});

          // добавляем их в контейнер
          goog.dom.appendChild(container, title);
          goog.dom.appendChild(container, content);
    })
}, 'POST', 'give=data&or=lost');

Хватит наверное уже вступительной информации, пора переходить к примерам… Хотя вся приведенная информация удобно представлена в виде шпаргалки

Выдвижная панель

Простой пример, для начала — слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример):

Для реализации данного функционала нам понадобится пакет “AnimatedZippy“:

goog.require('goog.dom');

/* zippy */
goog.require('goog.ui.AnimatedZippy');
goog.require('goog.ui.Zippy');
goog.require('goog.ui.ZippyEvent');

После создания DOM элементов, т.е. внизу HTML страницы пишем код, который должен состоять из одной строки, если бы не мои комментарии:

new goog.ui.AnimatedZippy(
    'button',  // id элемента/элемент который отвечает за управление
    'panel',   // id элемента/элемент который будет открываться/закрываться
    false      // состояние по умолчанию - false - закрыт
);

Для того, чтобы у нас был индикатор со стрелочкой, необходимо описать следующий CSS (за применение данных стилей отвечает сама пакет):

/* открыто */
.goog-zippy-expanded {
  background: url(images/white-arrow.gif) no-repeat right 12px;
}
/* закрыто */
.goog-zippy-collapsed {
  background: url(images/white-arrow.gif) no-repeat right -50px;
}

Магические исчезновения

Еще один незамысловатый пример код — пришел, увидел, скрыл с глаз долой:

Логика элементарна — при клике не картинке с class=”delete” находим родительский элемент и скрываем его:

// инициализация
goog.require('goog.dom');
goog.require('goog.array');  // не обязательно, но стоит знать о данном пакете, и уметь использовать
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.fx');
goog.require('goog.fx.dom');

/* ... */
goog.array.forEach(goog.dom.getElementsByClass('delete'), function(el) {
    // обработчик событий
    goog.events.listen(
        el,   /* DOM ELement*/
        goog.events.EventType.CLICK,    /* событие, либо константа, либо просто строкой "click" */
        function(ev) {                   /* функция, будет вызвана по событию */
            var anim = new goog.fx.dom.FadeOutAndHide(el.parentNode, 400);
                anim.play();
            ev.preventDefault(); // отменяем событие по умолчанию
        });
});

Анимация

Более сложный пример, будет засталять квадрат двигаться, изменять размер и прозрачность (см. пример):

Для этого нам понадобятся следующие пакеты:

goog.require('goog.fx');
goog.require('goog.fx.dom');
/* реализация очередей для анимации */
goog.require('goog.fx.AnimationQueue');
goog.require('goog.fx.AnimationSerialQueue');
goog.require('goog.fx.AnimationParallelQueue');

Теперь непосредственно код, который будет отвечать за все превращения и перемещения:

// функция, которая вызывает при клике на ссылку "Run"
function run() {
    // берем наш box
    var elem = goog.dom.getElement("box");

    // создаем очередь анимации
    var queue = new goog.fx.AnimationSerialQueue();
        // изменение прозрачности за 1.2 секунды с 1 до 0.1
        queue.add(new goog.fx.dom.Fade(elem, 1, 0.1, 1200));
        // перемещаем элемент из текущего положение до координат 400,100 за 2 секунды
        queue.add(new goog.fx.dom.SlideFrom(elem,
                [400, 100], 2000,
                goog.fx.easing.easeOut
              ));
        // анимация из функции animationInner, листинг ниже
        queue.add(animationInner(elem));
        // анимация из функции animationInner2, листинг ниже
        queue.add(animationInner2(elem));
        // опять перемещение, до координат 100,100
        queue.add(new goog.fx.dom.SlideFrom(elem,
                [100, 100], 500,
                goog.fx.easing.easeOut
              ));
        // запускаем анимацию
        queue.play();
}

function animationInner(elem){
    // создаем очередь анимаций, которые будут происходить параллельно
    var innerAnim = new goog.fx.AnimationParallelQueue();
        // прозрасность
        innerAnim.add(new goog.fx.dom.Fade(elem, 0.1, 0.5, 2000));
        // перемещение
        innerAnim.add(new goog.fx.dom.SlideFrom(elem,
                [400, 300], 2000,
                goog.fx.easing.easeOut
              ));
        // изменение размеров с 100х100 до 20х20
        innerAnim.add(new goog.fx.dom.Resize(elem,
                [100, 100], [20, 20], 2000,
                goog.fx.easing.easeOut
              ));
    // возвращаем анимацию, дабы поставить ее в другую очередь
    return innerAnim;
}

function animationInner2(elem){
    var innerAnim = new goog.fx.AnimationParallelQueue();
        // прозрачность
        innerAnim.add(new goog.fx.dom.FadeIn(elem, 1200));
        // перемещение
        innerAnim.add(new goog.fx.dom.SlideFrom(elem,
                [100, 300], 1200,
                goog.fx.easing.easeOut
              ));
        // изменение размеров
        innerAnim.add(new goog.fx.dom.Resize(elem,
                [20, 20], [100,100], 1200,
                goog.fx.easing.easeOut
              ));
    // возвращаем анимацию, дабы поставить ее в другую очередь
    return innerAnim;
}

Вот такой код, как мы можем заметить, кода поболее чем при использовании jQuery.

Гармошка

Знаю по jQuery, пример создания «гармошки» из элементов пользуется популярностью, в данном руководстве я тоже не смог обойти его стороной, благо это не так трудно, нам необходимо: при клике на заголовке открыть последующий параграф; при повторном клике — скрыть; одновременно открытым должен быть лишь один элемент.

Для реализации, нам потребуются следующие пакеты:

goog.require('goog.ui.AnimatedZippy');
goog.require('goog.ui.Zippy');
goog.require('goog.ui.ZippyEvent');

Ну и сама реализация с комментариями:

var panels = goog.dom.$$('h3');
var anims  = {};
var open   = null;

// для каждой панельки (в данном случае это теги H3)
goog.array.forEach(panels, function(pane){
    // создаем анимацию, знакомую нам по примеру с панелькой
    var animation = new goog.ui.AnimatedZippy(pane, goog.dom.getNextElementSibling(pane));

    // создаем обработчик события и вешаем его на событие анимации
    // листинг функции чуть ниже
    goog.events.listen(animation, goog.ui.Zippy.Events.TOGGLE, zippyToggle);

    // сохраняем идентификатор анимации - он нам еще понадобится
    anims[goog.getUid(animation)] = animation;
});

function zippyToggle(event) {
    // получаем идентификатор "цели"
    var uid = goog.getUid(event.target);

    // реализуем логику скрытия других панелей
    if (event.expanded) {
        if (open) {
            anims[open].setExpanded(false);
        }
        open = uid;
    }
}

Гармошка, вариант 2

Небольшое изменение предыдущего варианта — сделаем открытие/закрытие одновременным, и откроем панельку по умолчанию, для этого потребуется не так много изменений в коде:

// открытый элемент (отсчет с 0, если кто забыл)
var def    = 2;

goog.array.forEach(panels, function(pane, ind /* добавляем порядковый номер в цикл */){
    // добавляем проверку на совпадение ind и def
    var animation = new goog.ui.AnimatedZippy(pane, goog.dom.getNextElementSibling(pane), (def==ind));
    // отслеживаем другое событие
    goog.events.listen(animation, goog.fx.Animation.EventType.BEGIN, zippyToggle);
    anims[goog.getUid(animation)] = animation;
});

Анимация для события hover

Данный пример реализует анимацию для события hover — в меру симпатично и функционально:

Для реализации потребуется:

// DOM
goog.require('goog.dom');
goog.require('goog.dom.query');
// forEach
goog.require('goog.array');
// события
goog.require('goog.events');
goog.require('goog.events.EventType');
// анимация
goog.require('goog.fx');
goog.require('goog.fx.dom');
goog.require('goog.fx.AnimationQueue');
goog.require('goog.fx.AnimationSerialQueue');
goog.require('goog.fx.AnimationParallelQueue');

Код реализации:

// для каждой ссылки в элементе с class=menu
goog.array.forEach(goog.dom.query('.menu a'), function(el){
   // скрыть следующий элемент в доме
   goog.dom.getNextElementSibling(el).style.display = 'none';

   // вешаем обработчик на событие MOUSEOVER
   goog.events.listen(el, goog.events.EventType.MOUSEOVER, function(ev){
        // находим следующий элемент - это <em>
        var em = goog.dom.getNextElementSibling(this);
        // создаем очередь анимации
        var anim = new goog.fx.AnimationParallelQueue();
            anim.add(new goog.fx.dom.FadeInAndShow(em, 1500));
            anim.add(new goog.fx.dom.Slide(em,
                    [-15, -85], [-15, -75], 1500,
                    goog.fx.easing.easeOut
                  ));
        // запускаем
        anim.play();
    }, false,  el);

   // вешаем обработчик на событие MOUSEOUT
    goog.events.listen(el, goog.events.EventType.MOUSEOUT, function(ev){
        // находим следующий элемент - это <em>
        var em = goog.dom.getNextElementSibling(this);
        // создаем очередь анимации
        var anim = new goog.fx.AnimationParallelQueue();
            anim.add(new goog.fx.dom.FadeOutAndHide(em, 500));
            anim.add(new goog.fx.dom.Slide(em,
                    [-15, -75], [-15, -85], 500,
                    goog.fx.easing.easeOut
                  ));
        // запускаем
        anim.play();
    }, false,  el);
})

Анимация для события hover. Вариант 2

Наличие лишнего тега <em> лишь для подсказки меня не радует, куда как лаконичней использовать атрибут title тега <a>:

<ul class="menu">
    <li>
        <a href="http://anton.shevchuk.name" title="Personal Blog">Anton Shevchuk</a>
    </li>
    <li>
        <a href="http://hohli.com" title="My open source projects">My Projects</a>
    </li>
    <li>
        <a href="http://photo.hohli.com" title="Full size photos under CC">Photoblog</a>
    </li>
</ul>

Теперь посредством Javascript’a создадим элемент <em>, и добавим в существующий код:

goog.array.forEach(goog.dom.query('.menu a'), function(el){
    goog.dom.append(el.parentNode, goog.dom.$dom('em', {'style':'display:none;', 'innerHTML':el.title}));

    /* код из предыдущего листинга */

});

Результат не отличим визуально от предыдущего.

Кликабельные блоки

Теперь решим следующую задачу, у нас есть блок текста, внутри которого есть ссылка, при клике на ссылку должен осуществляться переход по ссылке:

Подключаем пакеты:

goog.require('goog.dom');
goog.require('goog.array');
goog.require('goog.events');
goog.require('goog.events.EventType');

Создаем обработчик события для каждого <li>:

goog.array.forEach(goog.dom.$$('li'), function(el){
    goog.events.listen(el, goog.events.EventType.CLICK, function(ev){
        // находим первую ссылку в контексте нашего <li>
        var link = goog.dom.$$('a', null, this)[0];
        // переходим по ссылке
        window.location = link.href;
        ev.preventDefault();
    }, false,  el);
});

Смотрим на пример в живую.

Складывающиеся панельки

Данный пример чем-то схож с «гармошкой», но добавлено немного полезны фич:

Задача требует от нас следующих действий:

  • скрываем все элементы <div class=message_body> после первого
  • скрываем все элементы <li> после пятого
  • клик по <p class=message_head> — вызывает изменение отображение (показываем/прячем) для следующего элемента <div class=message_body>
  • клик по <a class=collpase_all_message> — скрывает все <div class=message_body>
  • клик по <a class=show_all_message> — скрывает элемент, и отображает <a class=show_recent_only>, так же скрывает все элементы <li> после пятого
  • клик по <a class=show_recent_only> — скрывает элемент, и отображает <a class=show_all_message>, так же отображает все <li> после пятого

Нам потребуются:

goog.require('goog.dom');
goog.require('goog.dom.query');
goog.require('goog.array');

// события
goog.require('goog.events');
goog.require('goog.events.EventType');

// работа со стилями
goog.require('goog.style');

// анимация Zippy
goog.require('goog.ui.AnimatedZippy');
goog.require('goog.ui.Zippy');
goog.require('goog.ui.ZippyEvent');

Ну и листинг кода с комментариями:

// функция, которая скрывает/отображает элементы после 5-го
function showMore(flag) {
    // тут используется селектор из CSS3, лучше понимать что он делает ;)
    goog.array.forEach(goog.dom.query('#messages li:nth-child(n+6)'), function(el){
        // скрываем/отображаем элемент
        el.style.display = (flag?'':'none');
    });

    // заменяем кнопочку управления
    goog.style.showElement(goog.dom.$('show_recent_only'), flag);
    goog.style.showElement(goog.dom.$('show_all_message'), !flag);

}
// скроем элементы
showMore(false);

// покажем кнопку id=show_recent_only
goog.style.showElement(goog.dom.$('show_recent_only'), false);

// инициализируем для каждого сообщения AnimatedZippy
var zippy = [];
goog.array.forEach(goog.dom.$$('h4',null,goog.dom.$('messages')), function(pane, index){
    zippy.push(new goog.ui.AnimatedZippy(pane, goog.dom.getNextElementSibling(pane), (index==0)));
});

// обработчик события click для кнопки скрытия текста сообщений
goog.events.listen(goog.dom.$('collpase_all_message'), 'click', function(ev){
    // методом перебора всех элементов из массива zippy
    goog.array.forEach(zippy, function(anim){
        // собственно - складывание
        anim.setExpanded(false);
    });
    ev.preventDefault();
});

// обработчик для кнопки отображения всех сообщений (т.е. всех после 5-го)
goog.events.listen(goog.dom.$('show_all_message'), 'click', function(ev){
    showMore(true);
    ev.preventDefault();
});

// обработчик для кнопки скрытия всех сообщений кроме первых пяти
goog.events.listen(goog.dom.$('show_recent_only'), 'click', function(ev){
    showMore(false);
    ev.preventDefault();
});

Управление комментариями (аля WordPress)

Еще один пример — управление комментариями в стиле wordpress:

Для этого потребуется:

goog.require('goog.dom');
goog.require('goog.dom.query');
goog.require('goog.dom.classes');
goog.require('goog.array');
goog.require('goog.fx');
goog.require('goog.fx.dom');
goog.require('goog.events');
goog.require('goog.events.EventType');

Ну и листинг кода:

// рисуем "зебру", каждому 2-му элементу добавляем класс "alt"
goog.array.forEach(goog.dom.query('.pane:nth-child(2n)'), function(el) {
    goog.dom.classes.add(el, 'alt');
});

// функция, которая создает обработчик для кнопки unapprove
function unapprove(el) {
    // вешаем обработчик на click
    goog.events.listen(el, goog.events.EventType.CLICK, function(event){
        // получаем родителя элемента, которые <div class="pane">
        var pane = goog.dom.getAncestorByTagNameAndClass(event.target, 'div', 'pane');

        // изменяем цвет элемента
        goog.fx.dom.bgColorFadeIn(pane, [255, 240, 120], 2000);
        // добавляем класс
        goog.dom.classes.add(pane, 'spam');

        event.preventDefault();

        // создаем кнопку approve и вешаем на нее соответствующий обработчик
        var button = goog.dom.createDom('a', {'href':'#','class':'btn-approve','innerHTML':'Approve'});
        // обработчик
        approve(button);

        // заменяем кнопку unapprove на созданную approve
        goog.dom.replaceNode(button, event.target);
    });
}

// функция, которая создает обработчик для кнопки approve
function approve(el) {
    // вешаем обработчик на click
    goog.events.listen(el, goog.events.EventType.CLICK, function(event){
        // получаем родителя элемента, которые <div class="pane">
        var pane = goog.dom.getAncestorByTagNameAndClass(event.target, 'div', 'pane');

        // изменяем цвет элемента
        goog.fx.dom.bgColorFadeIn(pane, [200, 240, 180], 2000);
        // добавляем класс
        goog.dom.classes.remove(pane, 'spam');

        event.preventDefault();

        // создаем кнопку unapprove и вешаем на нее соответствующий обработчик
        var button = goog.dom.createDom('a', {'href':'#','class':'btn-unapprove','innerHTML':'Unapprove'});
        // обработчик
        unapprove(button);

        // заменяем кнопку approve на созданную unapprove
        goog.dom.replaceNode(button, event.target);
    });
}

goog.array.forEach(goog.dom.query('.pane .btn-unapprove'), unapprove);
goog.array.forEach(goog.dom.query('.pane .btn-approve'), approve);

// обработчик для кнопок spam
goog.array.forEach(goog.dom.query('.pane .btn-spam'), function(el) {
    goog.events.listen(el, goog.events.EventType.CLICK, function(event){
        // получаем родителя элемента, которые <div class="pane">
        var pane = goog.dom.getAncestorByTagNameAndClass(event.target, 'div', 'pane');

        // анимация фона
        goog.fx.dom.bgColorFadeIn(pane, [250, 200, 200], 2000);
        // прячем
        new goog.fx.dom.FadeOutAndHide(pane, 500).play();
        event.preventDefault();

    });
});
// обработчик для кнопок delete
goog.array.forEach(goog.dom.query('.pane .btn-delete'), function(el) {
    goog.events.listen(el, goog.events.EventType.CLICK, function(event){
        alert("This comment will be deleted!");

        // получаем родителя элемента, которые <div class="pane">
        var pane = goog.dom.getAncestorByTagNameAndClass(event.target, 'div', 'pane');

        // анимация фона
        goog.fx.dom.bgColorFadeIn(pane, [250, 200, 200], 2000);
        // прячем
        new goog.fx.dom.FadeOutAndHide(pane, 500).play();
        event.preventDefault();
    });
});

Галерея изображений

Простейший пример реализации галереи, без перезагрузки страницы. (см. пример):

Листинг с комментариями:

// потребуется
goog.require('goog.dom');
goog.require('goog.dom.query');
goog.require('goog.array');
goog.require('goog.style');
goog.require('goog.events');

// логика
// для каждой ссылки внутри class=thumbs
goog.array.forEach(goog.dom.query('.thumbs a'), function(el) {
    // добавляем обработчик для события clikc
    goog.events.listen(el, 'click', function(ev){
        // событие "по умолчанию" нам не нужно
        ev.preventDefault();
        // заменяем атрибуты "большой" картинки на данные из тега <a>
        goog.dom.setProperties(goog.dom.$("largeImg"), { src: this.href, alt: this.title });
        // так же заменяем текст тега <em> в заголовке
        goog.dom.query('h2 em')[0].innerHTML = "("+this.title+")";
    }, false, el);
});

Стилизируем ссылки

Данный пример хорошо иллюстрирует работу с CSS селекторами, в данном случае — необходимо изменить класс ссылок в тексте в зависимости от того куда она ведет:

Для реализации даной задачи нам потребуются:

goog.require('goog.dom');
goog.require('goog.dom.query');
goog.require('goog.array'); // да я просто ленивый, мне влом писать for
goog.require('goog.style');

И следующий код:

// находим все ссылки в которых href заканчивается на pdf, и добавляем соответствующий класс
goog.array.forEach(goog.dom.query('a[href$=pdf]'), function(el){
    goog.dom.classes.add(el, 'pdf')
});

// находим все ссылки в которых href заканчивается на zip, и добавляем соответствующий класс
goog.array.forEach(goog.dom.query('a[href$=zip]'), function(el){
    goog.dom.classes.add(el, 'zip')
});

// находим все ссылки в которых href заканчивается на png, и добавляем соответствующий класс
goog.array.forEach(goog.dom.query('a[href$=png]'), function(el){
    goog.dom.classes.add(el, 'png')
});

// находим все ссылки которые ведут на внешние ресурсы
goog.array.forEach(goog.dom.query('a:not([href^=http://anton.shevchuk.name]):not([href^=#])'), function(el){
    // добавляем класс external
    goog.dom.classes.add(el, 'external');
    // изменяем target на _blank
    goog.dom.setProperties(el, { target: "_blank" });
});

Использование UI

В Closure так же есть множество пакетов для быстрой реализации пользовательских интерфейсов, собственно приведу небольшой список из всего обилия:

Все UI пакеты имеют два метода render() и decorate() — первый создаёт все необходимые DOM элементы в указанном контейнере, второй же использует заранее созданную структуру и пытается с ней работать. Хотя на этом остановлюсь, если получиться — то о UI я расскажу в рамках следующей статьи.

P.S.

Обычно, после подобных статей, у меня спрашивают — «А лучше ли этот фреймворк, чем jQuery?». И я отвечаю — это разного уровня фреймворки, и предназначены для решения различных задач, если вы успешно справляетесь с использованием jQuery и плагинов, то не стоит сильно заморачиваться, ведь всё и так работает. Если же говорить о Dojo Toolkit — это как двоюродный брат, много общих черт, но они таки разные. И да, те кто говорит, что по Dojo мало документации, то вы наверное не читали документацию по Closure ;)

Другие посты на эту тему

]]> http://anton.shevchuk.name/javascript/google-closure-for-beginners-with-examples/feed/ 33 PHP jQuery Cookbook http://anton.shevchuk.name/php/php-jquery-cookbook/ http://anton.shevchuk.name/php/php-jquery-cookbook/#comments Tue, 04 Jan 2011 12:57:43 +0000 Anton Shevchuk http://anton.shevchuk.name/?p=1673 Давеча, меня попросили написать рецензию на новую книгу от издательства PACKT «PHP jQuery Cookbook», и вот моя оценка готовым блюдам…

Надеюсь я никого не обижу тем, что выложу оглавление книги, и буду идти по нему:

Управление событиями в jQuery

Первая глава посвящена полностью jQuery — основной акцент конечно сделан на события: события мышки и клавиатуры, отправка формы и манипуляции с ее элементами, затронуты методы live и die, но как-то мало о селекторах — лишь ссылка на официальную документацию, я бы привел больше примеров с селекторами форм. В целом, примеры достаточно простые и будут понятны любому новичку.

Связка PHP и jQuery

Данная глава посвящена AJAX’у, тема раскрыта практически полностью, хорошо описана обработка ошибок, за что автор получает плюс в карму ;)

Работа с XML документами и JSON

Каждому формату по главе, и да работа с XML и JSON описано очень хорошо, особенно то что касается PHP части . Порадовало, что автор ссылается на PHP 5.3, за что получает еще один плюс к своей карме.

Работа с формами

Работа с формами — этот момент вызывает ступор у многих web-разработчиков, особенно если требуется динамическая форма, с валидацией, и другими плюшками, а тут всё просто и на примерах — must have (скачайте и посмотрите). За использование filter_var еще один плюс.

Добавление визуальных эффектов для форм

Конечно, первый пример с игрой крестики-нолики меня немного озадачил, но остальные действительно будут полезны, особенно порадовал удачный пример с корзиной покупок.

Создание прикольных навигационных меню

Созданию различных меню посвящена целая глава, примеры конечно тривиальны, но в этом то и соль подобных книг, я ведь тоже не смог обойти стороной менюшки.

Работа с данными используя PHP и jQuery

Тривиальные задачи (автодополнение, облако тегов) и простые примеры работы с БД (хотя для кого-то они окажутся в новинку), но почему-то без использования PDO.

Улучшаем сайт

Это правильная глава, тут о кросс-доменных запросах пишут и почему-то сюда попала статья о создании jQuery плагинов, но от этого не стало хуже.

Firebug

В конце книги нас решили познакомить с полезным инструментом — Firebug, но как-то скромно.

Оформление книги

Тут чуть-чуть покритикую так как мне не понравилось сразу несколько вещей:

  • Неужели сложно для примеров кода сделать адекватное форматирование?
  • Подсветка синтаксиса, даже элементарная, очень положительно сказывается на читаемости кода
  • Скриншоты с браузера — лучше убрать адресную строку и подобную лабуду, или по крайней мере делать их в одном браузере

Итого

И что мы имеем? Хорошая книга, которая содержит много «правильныx» примеров — простых, доступных, охватывающих большинство задач, которые ставятся web-разработчикам в 90% проектов. Книга рассчитана на начинающих разработчиков, но пригодиться в качестве шпаргалки и для более продвинутой аудитории.

Немного огорчило, что автор забыл про все jQuery плагины, да и про jQuery UI стоило замолвить слово, хотя возможно не тот формат.

Другие посты на эту тему

]]> http://anton.shevchuk.name/php/php-jquery-cookbook/feed/ 7 jQuery для начинающих. Часть 9. Пишем плагины анимации http://anton.shevchuk.name/javascript/jquery-for-beginners-write-animation-plugins/ http://anton.shevchuk.name/javascript/jquery-for-beginners-write-animation-plugins/#comments Mon, 22 Nov 2010 12:58:45 +0000 Anton Shevchuk http://anton.shevchuk.name/?p=1555 jQuery Logo
Новая статья совсем не для начинающих. Будем разрабатывать плагины для расширения анимации, а это уже другой уровень…

Обучаем animate

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

Для начала затравка – метод animate манипулирует объектом $.fx, в себе он содержит следующие методы:

  • cur – возвращает текущее значение атрибута
  • custom – отвечает за запуск анимации
  • hide/show – простые функции hide/show
  • step – каждый отдельный шаг анимации, т.е. вызывается много-много раз
  • update – данная функция отвечает за применение атрибутов

Из всего приведенного мы будем расширять объект $.fx.step. Возьмем достаточно тривиальную задачу – заставим плавно изменить цвет шрифта для заданного набора элементов:

$('p').animate({color:'#ff0000'});

Приведенный выше код не даст никакого эффекта, нам потребуется прокачать $.fx.step:

(function($) {
// color - свойство с которым мы будем работать
$.fx.step.color = function(fx) {

	// настройки анимации
	fx.options;

	// свойство которое изменяем
	fx.prop;

	// начальные значения
	fx.start;

	// результирующие значения
	fx.end;

	// коэффициент, изменяется от 0 до 1
	fx.pos;

	// еденицы измерения
	fx.unit;

};
})(jQuery);

Перед вами основные свойства объекта $.fx – это и есть наши кирпичики, с их помощью будем строить нашу анимацию. Перед работой стоит заглянуть внутрь каждого из приведенных свойств: 

// добавим логирование внутрь нашего плагина
console.log(fx.options, fx.prop, fx.start, fx.end, fx.pos, fx.unit);

/* вывод в консоли:
Object duration=5000 old=false curAnim=Object orig=Object / color / 0 / #ff0000 / 0 / px
Object duration=5000 old=false curAnim=Object orig=Object / color / 0 / #ff0000 / 0.0008351307317917 / px
Object duration=5000 old=false curAnim=Object orig=Object / color / 0 / #ff0000 / 0.0009670080649619717 / px
Object duration=5000 old=false curAnim=Object orig=Object / color / 0 / #ff0000 / 0.0010877292712792586 / px
Object duration=5000 old=false curAnim=Object orig=Object / color / 0 / #ff0000 / 0.0012155411253085835 / px
..
*/

Как и предполагалось – метод вызывается N кол-во раз, в зависимости от продолжительности анимации, при этом fx.pos постепенно наращивает своё значение с 0 до 1 (аналогично ведет себя и параметр fx.state, только знаков после запятой у него поменьше, есть ли еще какая разница – я не знаю).

fx.pos, по умолчанию, наращивается линейно, если надо как-то иначе — то стоит посмотреть на easing плагин или дочитать статью до конца (об этом я уже упоминал в статье Эффекты)

Теперь не мешало бы заставить эту систему работать, начнем с инициализации крайних значений (листинг функции parseColor вы сможете найти в самом примере): 

// инициализация должна проходить лишь однажды
if (fx.state == 0 ) {
	// получаем текущее значение элемента
	var start = $.curCSS(fx.elem,'color');

	// разбираем на составляющие текущее состояние элемента
	// start содержит строку вида rgb(255, 255, 255)
            var res = start.match(/rgb\(([0-9]{1,3}),\s?([0-9]{1,3}),\s?([0-9]{1,3})\)/);

            if (!res) {
                // или #ffffff;
                var res = start.match(/^#(\w{2})(\w{2})(\w{2})$/);
                var rgb = [parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16)];
            } else {
                var rgb = [parseInt(res[1]), parseInt(res[2]), parseInt(res[3])];
            }

	// составляющие запихиваем в fx.start
	fx.start = rgb;

	// разбираем что нам нужно получить, и закидываем в fx.end
	fx.end   = parseColor(fx.end);
}

Теперь необходимо изменить текущее значение свойств и применить его: 

// нехитрое вычисление
var R = Math.round(((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0]);
var G = Math.round(((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1]);
var B = Math.round(((fx.end[2] - fx.start[2]) * fx.pos) + fx.start[2]);

// непосредственно измение свойств элемента
fx.elem.style.color = 'rgb('+R+','+G+','+B+')';

Всё вместе: 

$.fx.step.color = function(fx) {
	// инициализация должна проходить лишь однажды
	if (fx.state == 0 ) {
		// получаем текущее значение элемента
		var start = $.curCSS(fx.elem,'color');

		// разбираем на составляющие текущее состояние элемента
		// start содержит строку rgb(255, 255, 255)
		var res = start.match(/rgb\(([0-9]{1,3}),\s?([0-9]{1,3}),\s?([0-9]{1,3})\)/);

		// составляющие запихиваем в fx.start
		fx.start = [parseInt(res[1]), parseInt(res[2]), parseInt(res[3])];

		// разбираем что нам нужно получить, и закидываем в fx.end
		fx.end   = parseColor(fx.end);
	}
	// нехитрое вычисление
	var R = Math.round(((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0]);
	var G = Math.round(((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1]);
	var B = Math.round(((fx.end[2] - fx.start[2]) * fx.pos) + fx.start[2]);

	// непосредственно измение свойств элемента
	fx.elem.style.color = 'rgb('+R+','+G+','+B+')';
};

Результатом станет плавное перетекание исходного цвета к красному (#F00 == #FF0000 == 255,0,0)

Своя анимация

Теперь, познав основы, можем попробовать анимировать некоторый неизвестный параметр shiver (да пусть дрожат пред нами): 

$('p').animate({shiver:100});

Идем по натоптанному пути: 

(function($) {
	var left;
	$.fx.step.shiver = function(fx) {

		// инициализация должна проходить лишь однажды
		if (fx.state == 0 ) {

			// начальное расположение элемента от левого края
			// дрожать будем по горизонтали
			left = $.curCSS(fx.elem,'left');

			// устанавливаем относительное расположение элемента
			fx.elem.style.position = 'relative';
		}
	};
})(jQuery);

Так же реализуем саму дрожь элемента: 

// если это последняя итерация - вернем всё на своё место
if (fx.now == fx.end) {
	fx.elem.style.left = left;
} else if (Math.round(1000 * fx.pos)%2==0) {
	// четная итерация
	// непосредственно измение свойств элемента
	fx.elem.style.left = - Math.round(Math.random()*fx.end) + fx.unit;

} else {
	// нечетная итерация
	// непосредственно измение свойств элемента
	fx.elem.style.left = + Math.round(Math.random()*fx.end) + fx.unit;
}

Собираем вместе, и смотрим на результат работы…

Пишем свой easing плагин

Возвращаясь к easing’у – мы можем легко написать свою функцию, которой будет следовать анимация. Дабы особо не фантазировать – я взял пример из статьи o MooTools – очень наглядный пример с сердцебиением, которое описывается следующими функциями:

Heart Beat Functions

Теперь напишем соответствующий код: 

$.extend($.easing, {
    /**
     * Heart Beat
     *
     * @param x
     * @param t current time
     * @param b begInnIng
     * @param c change In value
     * @param d duration
     *
     * @link http://habrahabr.ru/blogs/mootools/43379/
     */
    heart:function(x, t, b, c, d) {
        if (x < 0.3)
            return Math.pow(x, 4) * 49.4;

        if (x < 0.4)
            return 9 * x - 2.3;

        if (x < 0.5)
            return -13 * x + 6.5;

        if (x < 0.6)
            return 4 * x - 2;

        if (x < 0.7)
            return 0.4;

        if (x < 0.75)
            return 4 * x - 2.4;

        if (x < 0.8)
            return -4 * x + 3.6;

        if (x >= 0.8)
            return 1 - Math.sin(Math.acos(x));
    }
});

Чуть-чуть расширю пример дополнительными функциями (развернем и скомбинируем): 

heartIn:function (x, t, b, c, d) {
    return $.easing.heartIn(x, t, b, c, d);
},
heartOut:function (x, t, b, c, d) {
    return c - $.easing.heartIn(1 - x, t, b, c, d) + b;
},
heartInOut: function (x, t, b, c, d) {
    if (t < d/2) return $.easing.heartIn(1 - x, t, b, c, d) + b;
    return $.easing.heartOut(1 - x, t, b, c, d) + b;
}

Графически это будет выглядеть так:

HeartIn

HeartOut

HeartInOut

Результат лучше не показывать кардиолагам.

Цикл статей

  1. jQuery для начинающих
  2. jQuery для начинающих. Часть 2. JavaScript Меню
  3. jQuery для начинающих. Часть 3. AJAX
  4. jQuery для начинающих. Часть 4. Селекторы
  5. jQuery для начинающих. Часть 5. Эффекты
  6. jQuery для начинающих. Часть 6. События
  7. jQuery для начинающих. Часть 7. Пишем плагины
  8. jQuery для начинающих. Часть 8. Расширяем фильтры
  9. jQuery для начинающих. Часть 9. Пишем плагины анимации

Другие посты на эту тему

]]> http://anton.shevchuk.name/javascript/jquery-for-beginners-write-animation-plugins/feed/ 10 jQuery для начинающих. Часть 8. Расширяем фильтры http://anton.shevchuk.name/javascript/jquery-for-beginners-filter-extend/ http://anton.shevchuk.name/javascript/jquery-for-beginners-filter-extend/#comments Tue, 19 Oct 2010 10:22:27 +0000 Anton Shevchuk http://anton.shevchuk.name/?p=1556 jQuery Logo

Продолжаем заумные статьи о jQuery, сегодня поведу речь о движке Sizzle и возможности его расширения.

Sizzle — Javascript движок для поиска элементов по CSS селектору, был неразлучен с jQuery, но с некоторых пор так же распространяется как отдельная библиотека, и может использоваться в том же Dojo Toolkit, или в вашем собственном фреймворке

API для расширения фильтров

Для начала приведу пример фильтров, которые вы возможно использовали, да не заглядывали внутрь:

$("div:animated"); // поиск анимированных элементов
$("div:hidden"); // поиск скрытых элементов div
$("div:visible"); // поиск видимых элементов div (противоположен предыдущему)

Почему я привел только эти фильтры? Всё просто — только они не входят в Sizzle, и относятся лишь к jQuery, именно такие плагины мы будем тренироваться разрабатывать. Начнем с кода, который нам поможет разобраться с API:

(function($, window, undefined){
    $.extend($.expr[':'], {
        /**
         * @param element DOM элемент
         * @param i порядковый номер элемента
         * @param match объект матчинга регулярного выражения (ищите PSEUDO в сорцах)
         * @param elements массив всех найденных DOM элементов
         */
        test: function(element, i, match, elements) {
            return true; // элемент подходит нам
            return false; // или нет
        }
    })
})(jQuery, window);

Приведенный код конечно не очень наглядный, поэтому расширю его рабочими примерами:

test: function(element, i, match, elements) {
    // мы можем создавать проверки на основе правил, которые относятся к DOM элементу
    // нам нужны лишь параграфы - $("p:test")
    if (element.tagName.toUpperCase() != 'P') return false;

    // ищем по порядковому номеру
    // $("p:test(4)")
    if (parseInt(match[3]) == (i+1)) {
        return true;
    } else
    // чёт / нечет
    // $("p:test(even)") или $("p:test(odd)")
    if (match[3] == "even" && (i%2==0)) {
        return true;
    } else if (match[3] == "odd" && (i%2==1)) {
        return true;
    } else
    // первый/последний
    // $("p:test(first)") или $("p:test(last)")
    if (match[3] == "first" && (i==0)) {
        return true;
    } else if (match[3] == "last" && (i==(elements.length-1))) {
        return true;
    }
    return false;
}

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

$("p:test");
$("p:test(2)");

// чёт/нечет
$("p:test(odd)");
$("p:test(even)");

// первый/последний
$("p:test(first)");
$("p:test(last)");

Вот таким не хитрым способом можно расширять фильтры, если у вас есть еще примеры возможных плагинов, прошу — комментируйте.

Пример plugin’а

Ну от тривиальных абстрактных задач к чему-то более конкретному — есть несложная задачка: «выделить ссылки в тексте в зависимости от типа: внешняя, внутренняя, якорь», ну и пример текста:

<p>
<a name="p1">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. Ut lacinia quam
nec enim scelerisque porta. In ut lorem ipsum. Proin iaculis viverra rutrum. Maecenas quis
ante enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Vestibulum luctus tristique feugiat. Morbi dictum est dolor,
<a href="http://anton.shevchuk.name">at condimentum nisl</a>. Ut id nunc augue, at luctus
enim. Phasellus urna nunc, aliquam sit amet rutrum ac, imperdiet in nunc. Cras mattis massa
et est sodales ac auctor mi sagittis. Fusce elementum ultrices nunc, eu scelerisque massa
sodales quis. Aliquam bibendum accumsan nibh ut blandit.
</p>
<p>
<a href="index.html">Praesent venenatis dictum ante</a>, ...
</p>
<p>
Aliquam erat volutpat. ... <a href="http://google.com">Curabitur congue enim</a> ... <a href="#p1">Duis lectus tellus</a>, gravida non commodo eu, dictum a tellus. Praesent a nibh vel nisl sodales tincidunt at ac leo.
</p>

Для решения лучше всего подошли бы фильтры для селекторов:

$("a:internal");
$("a:anchor");
$("a:external");

Поскольку из коробки данный функционал не доступен, мы напишем его сами, для этого нам понадобится не так уж и много:

$.extend($.expr[':'], {
    /**
     * Пример определения внешней ссылки
     * остальные фильтры найдете на странице примеров
     *
     * @param element нам понадобится лишь DOM Element
     */
    external: function(element) {
        // у нас ссылка?
        if (element.tagName.toUpperCase() != 'A') return false;
        // есть ли атрибут href
        if (element.getAttribute('href')) {
            // отсекаем ненужное
            if ((element.getAttribute('href').indexOf('/') === 0)             // внутренняя ссылка
                || (element.getAttribute('href').indexOf('#') === 0)        // якорь
                || (element.getAttribute('href').indexOf(window.location.hostname) === 7) // наш домен по http://...
                || (element.getAttribute('href').indexOf(window.location.hostname) === 8) // наш домен по https://...
                    ) {
                return false;
            } else {
                // да, мы нашли правильные ссылки
                return true;
            }
        } else {
            return false;
        }
    }
})

Как вы могли заметить в статье я всегда, нет не так — ВСЕГДА использую фильтр вместе с HTML тэгом который я ищу — $(“tag:filter”). Это один из пунктов оптимизации работы с фильтрами jQuery, иначе ваш фильтр будет обрабатывать все DOM элементы на странице, а это может очень сильно сказаться на производительности. Если же у вас несколько тегов, то пишите так — $(“tag1:filter, tag2:filter, tag3:filter”)

Материалы

Тут всё грустно — нашел лишь скудную официальную документацию, если есть чем поделиться, ну вы поняли…

Цикл статей

  1. jQuery для начинающих
  2. jQuery для начинающих. Часть 2. JavaScript Меню
  3. jQuery для начинающих. Часть 3. AJAX
  4. jQuery для начинающих. Часть 4. Селекторы
  5. jQuery для начинающих. Часть 5. Эффекты
  6. jQuery для начинающих. Часть 6. События
  7. jQuery для начинающих. Часть 7. Пишем плагины
  8. jQuery для начинающих. Часть 8. Расширяем фильтры

Другие посты на эту тему

]]> http://anton.shevchuk.name/javascript/jquery-for-beginners-filter-extend/feed/ 9 Анонс мастер-классов по JavaScript’у http://anton.shevchuk.name/javascript/javascript-master-class-feedback/ http://anton.shevchuk.name/javascript/javascript-master-class-feedback/#comments Mon, 11 Oct 2010 10:01:25 +0000 Anton Shevchuk http://anton.shevchuk.name/?p=1565

Ух, побывал я на прошедшем мастер классе в Харькове. Было это еще летом, а фидбек пишу только сейчас, да еще и совмещаю с анонсом новых, т.е. убиваю двух зайцев одним махом.

Для начала о датах предстоящих мастер-классов:

  • Днепропетровск — 23-24 октября
  • Одесса — 30-31 октября
  • Киев — 4-5 декабря
  • Харьков — 11-12 декабря

Лично мое мнение, если возвращаясь с мастер-класса/тренинга/конференции вы осознаете, что хотя бы 10% услышанной информации были для вас в новинку — значит вы не зря потратили время и деньги. Так же, неоспоримым плюсом является повышение самомотивации и желание свернуть горы ;)

Ну, а теперь непосредственно о самих мастер-классах, расскажу насколько они были полезны лично мне:

Профессиональное javascript-программирование

С данного мастер класса я унёс несколько полезных инструментов, слегка подкачал свои знания по ООП применительно к JS, в целом был доволен. Если же подходить с точки зрения необходимости данного мастер класса лично для вас, то советую ответить на следующие вопросы:

  • Вы знаете как дебажить javascript? А в IE?
  • Вы понимаете почему JS называют прототип-ориентированным языком программирования?
  • Вы знаете что такое «замыкания»?
  • Вы применяли шаблоны проектирования в js приложениях?

Если ответили «нет» хоть раз — то идите.

Сложный AJAX и COMET: тонкости Web 2.0

Тут для меня всё было в новинку, так как в живую с COMET работать не приходилось, и лишь изредка проскакивали заметки в моем RSS ридере. Если вы до этого не работали с COMET, то обязательно сходите — если имеете опыт разработки, ничего нового, я думаю, вы не услышите.

Мастер-класс по клиентской оптимизации

О, это самый полезный мастер-класс из представленных, количество новой и полезной информации было много. Нужен ли он вам? На этот вопрос думаю будет утвердительный ответ, ведь мы так привыкли к оптимизации серверной части, что совсем забываем о том, что между клиентом и сервером ни одна кирпичная перегородка, а тысячи километров и десятки роутеров.

Секреты jQuery

Наверное лишь этот мастер класс прошел для меня без сюрпризов, хотя настолько глубоко в дебри Sizzle я не вникал. И да, если вы не в курсе, что есть Sizzle — то этот мастер класс для вас будет полезен.

Другие посты на эту тему

]]> http://anton.shevchuk.name/javascript/javascript-master-class-feedback/feed/ 1 jQuery для начинающих. Часть 7. Пишем плагины http://anton.shevchuk.name/javascript/jquery-for-beginners-write-plugins/ http://anton.shevchuk.name/javascript/jquery-for-beginners-write-plugins/#comments Fri, 08 Oct 2010 06:39:39 +0000 Anton Shevchuk http://anton.shevchuk.name/?p=1044 jQuery Logo

Если вы читали предыдущие статьи из этой серии, то вы наверное уже пробовали разрабатывать свой плагин, если нет, то можем начать вместе…

Для начала вспомним, для чего нам нужны плагины? Мой ответ — создание повторно используемого кода, и да — с удобным интерфейсом. Давайте напишем такой код, вот простая задачка: «По клику на параграф, текст должен измениться на красный»

Javascript и даже не jQuery

Дабы не забывать истоков — начнем с реализации на нативном javascript’е:

var loader = function () {
    // находим все параграфы
    var para = document.getElementsByTagName('P');
    // перебираем все, и вешаем обработчик
    for (var i=0,size=para.length;i<size;i++) {
        // обработчик
        para[i].onclick = function() {
             this.style.color = "#FF0000";
        }
    }
}
// естественно, весь код должен работать после загрузки всей страницы
document.addEventListener("DOMContentLoaded", loader, false);

Данный код не является кроссбраузерным, и написан с целью лишний раз подчеркнуть удобство использования фреймворка

jQuery, но еще не плагин

Теперь можно этот код упростить, подключаем jQuery и получаем следующий вариант:

$(document).ready(function(){
    $('p').click(function(){
        $(this).css('color', '#ff0000');
    })
});

Таки jQuery плагин

С поставленной задачей мы справились, но где тут повторное использование кода? Или если нам надо не в красный, а в зеленый перекрасить? Вот тут начинается самое интересное, чтобы написать простой плагин достаточно расширить объект $.fn:

$.fn.mySimplePlugin = function () {
    $(this).click(function(){
        $(this).css('color', '#ff0000');
    })
}

Если же писать более грамотно, то нам необходимо ограничить переменную $ только нашим плагином, а так же возвращать this, чтобы можно было использовать цепочки вызовов (т.н. chaining) , делается это следующим образом: 

(function($) {
  $.fn.mySimplePlugin = function(){
     // код плагина ...
     return this;
  };
})(jQuery);

Внесу небольшое пояснение о происходящем, код (function($){…})(jQuery) создает анонимную функцию, и тут же вызывает ее, передавая в качестве параметра объект jQuery, таким образом внутри анонимной функции мы можем использовать алиас $ не боясь за конфликты с другими библиотеками — так как теперь $ находится лишь в области видимости нашей функции, и мы имеем полный контроль над ней

Добавим опцию по выбору цвета и получим рабочий плагин:

(function($) {
    // значение по умолчанию - ЗЕЛЁНЫЙ
    var defaults = { color:'green' };

    // актуальные настройки, глобальные
    var options;

    $.fn.mySimplePlugin = function(params){
        // при многократном вызове функции настройки будут сохранятся, и замещаться при необходимости
        options = $.extend({}, defaults, options, params);

        $(this).click(function(){
            $(this).css('color', options.color);
        });

        return this;
    };
})(jQuery);

Вызов:

// первый вызов
$('p:first,p:last').mySimplePlugin();
// второй вызов
$('p:eq(1)').mySimplePlugin({ color: 'red' });

В результате работы данного плагина, каждый клик будет изменять цвет параграфа на красный, т.к. мы используем глобальную переменную для хранения настроек, то второй вызов плагина изменят значение для всех элементов. Можно внести небольшие изменения, и разделить настройки для каждого вызова (пример):

// актуальные настройки, будут индивидуальными при каждом запуске
var options = $.extend({}, defaults, params);

Работаем с коллекциями объектов

Тут все просто, достаточно запомнить — this содержит jQuery объект с коллекцией всех элементов, т.е. :

$.fn.mySimplePlugin = function(){
     console.log(this); // jQuery
     console.log(this.length); // число элементов
     return this;
};

Если мы хотим обрабатывать каждый элемент то соорудим следующую конструкцию:

// необходимо обработать каждый элемент в коллекции
return this.each(function(){
    $(this).click(function(){
        $(this).css('color', options.color);
    });
});

// предыдущий вариант немного избыточен,
// т.к. внутри функции click и так есть перебор элементов
return this.click(function(){
        $(this).css('color', options.color);
    });

Опять же напомню, если ваш плагин не должен что-то возвращать по вашей задумке — возвращайте this — цепочки вызовов в jQuery это часть магии, не стоит её ломать

Публичные методы

Так, у нас написан крутой плагин, надо бы ему еще докрутить функционала, пусть цвет регулируется несколькими кнопками на сайте. Для этого нам понадобится некий метод «color», который и будет в ответе за всё. Сейчас приведу пример кода готового плагина — будем курить вместе:

// значение по умолчанию
var defaults = { color:'green' };

// наши публичные методы
var methods = {
    // инициализация плагина
    init:function(params) {
        // актуальные настройки, будут индивидуальными при каждом запуске
        var options = $.extend({}, defaults, params);

        return this.click(function(){
           $(this).css('color', options.color);
        });
    },
    // изменение цвета
    color:function(color) {
        $(this).css('color', color);
    },
    // сброс цвета
    reset:function() {
        $(this).css('color', 'black');
    }
};

$.fn.mySimplePlugin = function(method){

    // немного магии
    if ( methods[method] ) {
        // если запрашиваемый метод существует, мы его вызываем
        // все параметры, кроме имени метода прийдут в метод
        // this так же перекочует в метод
        return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
        // если первым параметром идет объект, либо совсем пусто
        // выполняем метод init
        return methods.init.apply( this, arguments );
    } else {
        // если ничего не получилось
        $.error( 'Метод "' +  method + '" не найден в плагине jQuery.mySimplePlugin' );
    }
};

Теперь еще небольшой пример использование данных методов:

// вызов без параметров - будет вызван init
$('p').mySimplePlugin();
// вызов метода color и передача цвета в качестве параметров
$('p').mySimplePlugin('color', '#FFFF00');
// вызов метода reset
$('p').mySimplePlugin('reset');

Для понимания данного кусочка кода, вы должны разобраться лишь с переменной arguments, и с методом apply (тут им целые статьи посвятили — дерзайте)

О обработчиках событий

Если ваш плагин вешает какой-либо обработчик, то лучше всего (читай всегда) данный обработчик повесить в своём собственном namespace:

return this.bind("click.mySimplePlugin",function(){
    $(this).css('color', options.color);
});

Данный финт позволит в любой момент убрать все ваши обработчики, или вызвать только ваш, что очень удобно:

// вызовем лишь наш обработчик
$('p').trigger("click.mySimplePlugin");

// убираем все наши обработчики
$('p').unbind(".mySimplePlugin");

Использование data

Если по какой-то причине вы еще не знакомы с data — то советую прочитать и усвоить незамедлительно. Если же в двух словах — это реестр данных, и все данные привязанные к какому-либо элементу лучше хранить в нем, это же правило касается и плагинов. Если вам надо сохранить состояние плагина — используйте data, если необходим кеш — используйте data, если вам необходимо сохранить … ну думаю понятно. Приведу еще примерчик связанный с инициализацией:

// функция init
function() {
  var init = $(this).data('mySimplePlugin');

  if (init) {
    return this;
  } else {
    $(this).data('mySimplePlugin', true);
    return this.bind("click.mySimplePlugin",function(){
       $(this).css('color', options.color);
    });
  }
}

Источники

Цикл статей

  1. jQuery для начинающих
  2. jQuery для начинающих. Часть 2. JavaScript Меню
  3. jQuery для начинающих. Часть 3. AJAX
  4. jQuery для начинающих. Часть 4. Селекторы
  5. jQuery для начинающих. Часть 5. Эффекты
  6. jQuery для начинающих. Часть 6. События
  7. jQuery для начинающих. Часть 7. Пишем плагины
  8. jQuery для начинающих. Часть 8. Расширяем фильтры

Другие посты на эту тему

]]> http://anton.shevchuk.name/javascript/jquery-for-beginners-write-plugins/feed/ 19 Мастер-классы по JavaScript’у http://anton.shevchuk.name/javascript/javascript-master-class/ http://anton.shevchuk.name/javascript/javascript-master-class/#comments Fri, 04 Jun 2010 07:59:47 +0000 Anton Shevchuk http://anton.shevchuk.name/?p=1296

В ближайшем времени, в Харькове и Киеве, а также Екатеринбурге и Москве пройдут мастер-классы по JavaScript’у. Ведущий — Илья Кантор, создатель http://javascript.ru и http://algolist.manual.ru, в прошлом один из разработчиков фреймворка Dojo Toolkit, человек с большим опытом в создании сложных javascript-приложений.

Темы

  • Профессиональное javascript-программирование
  • Сложный AJAX и COMET: тонкости Web 2.0
  • Мастер-класс по клиентской оптимизации
  • Секреты jQuery

Расписание

  • Харьков — 19 и 20 июня
  • Екатеринбург — 26 и 27 июня
  • Москва — 17 и 18 июля
  • Киев — 24 и 25 июля

Мероприятия платные, но стоимость не кусается. Узнать больше можете на странице http://javascript.ru/mk. И да, коль накладок не будет — встретимся в Харькове ;)

Другие посты на эту тему

]]> http://anton.shevchuk.name/javascript/javascript-master-class/feed/ 3 jQuery для начинающих. Часть 6. События http://anton.shevchuk.name/javascript/jquery-for-beginners-events/ http://anton.shevchuk.name/javascript/jquery-for-beginners-events/#comments Wed, 02 Jun 2010 14:54:03 +0000 Anton Shevchuk http://anton.shevchuk.name/?p=552

Прежде чем приступить к прочтению данной статьи, стоит определиться, что из себя представляют события — для web-странички, событиями будут являться любые действия пользователя – это и ввод данных с клавиатуры, и передвижения мышки, и конечно же “клики” – всё это и есть события. К событиям можно еще отнести события создаваемые скриптами, т.н. триггеры.

Базовые события

Начнем с азов. jQuery работает практически со всеми событиями в JavaScript’е, приведу список функции с небольшими пояснениями:

  • change — измение значения элемента (значение, при потери фокуса, элемента отличается от изначального, при получении фокуса)
  • click — клик по элементу (порядок событий — mousedown, mouseup, click)
  • dblclick — двойной клик по элементу
  • resize — изменение размеров элементов
  • scroll – скроллинг элемента
  • select — выбор текста (актуален только для input[type=text] и textarea)
  • submit — отправка формы
  • focus — фокус на элементе – актуально для input[type=text], но в современных браузерах работает и с другими элементами
  • blur — фокус ушел с элемента – актуально для input[type=text] — срабатывает при клике по другому элементу на странице или по событию клавиатуры (к примеру переключение по tab’у)
  • focusin — фокус на элементе, данное событие срабатывает на предке элемента, для которого произошло событие focus
  • focusout — фокус ушел с элемента, данное событие срабатывает на предке элемента, для которого произошло событие blur
  • keydown — нажатие клавиши на клавиатуре
  • keypress — нажатие клавиши на клавиатуре (порядок событий — keydown, keypress, keyup)
  • keyup — отжатие клавиши на клавиатуре
  • load — загрузка элемента (img)
  • unload — выгрузка элемента (window)
  • mousedown — нажатие клавиши мыши
  • mouseup — отжатие клавиши мыши
  • mousemove — движение курсора
  • mouseenter — наведение курсора на элемент, не срабатывает при переходе фокуса на дочерние элементы
  • mouseleave — вывод курсора из элемента, не срабатывает при переходе фокуса на дочерние элементы
  • mouseover — наведение курсора на элемент
  • mouseout — вывод курсора из элемента

Опробовать события можно на примере с событиями мышки и элементами формы.

Большинство из перечисленных событий можно имитировать непосредственно из самого скрипта: 

<script lang="javascript"> $('#menu li').click(); </script>

Триггеры

Для работы с триггерами в jQuery предопределены следующие функции:

  • bind (type, data, fnc) — добавляет обработчик событий
  • one (type, data, fnc) — добавляет обработчик событий, который сработает лишь раз
  • trigger (event, data) — вызывает обработчики событий
  • triggerHandler( event, data) — вызывает обработчики событий, без вызова события браузера
  • unbind (type, fnc) — удаляет все обработчики событий с элемента
$('.class').bind('click', function(){
    // что-то делаем
});

// вызываем обработчик
$('.class').trigger('click');

// отключаем обработчик
$('.class').unbind('click');

Можно повесить триггер почти на любой объект: 

var obj = {
    test:function() {
        console.log('obj.test');
    }
}

$(obj).bind('someEvent', function(){
   console.log('obj.someEvent');
   this.test();
});

$(obj).trigger('someEvent');

Пространство имен

Обычно, когда мы хотим создать/удалить свой обработчик событий, мы пишем следующий код (чуть выше я об этом уже писал): 

// создаем свой обработчик
$('.class').bind('click', function(){
    // что-то делаем
});
// удаляем все обработчики
$('.class').unbind();

Но как всегда, есть ситуации когда нам необходимо отключить не все обработчики (как пример, надо отключить обработку какого-то контрола определенным плагином), в этом случае нам на помощь приходят пространства имен, использовать их достаточно легко: 

// создаем обработчик
$('.class').bind('click.namespace', function(){
    // что-то делаем
});

// вызываем обработчик
$('.class').trigger('click.namespace');

// удаляем все обработчики в данном пространстве имен
$('.class').unbind('click.namespace');

Еще примерчик, вешаем обработчик, который выводит текст в консоль. 

$('.class').bind('click.namespace', function(){
    console.log('bang');
});
$('.class').trigger('click.namespace'); // вызываем событие, наш обработчик сработает
$('.class').trigger('click');           // тоже работает
$('.class').trigger('click.other');     // событие из другого пространства имен, наш обработчик не будет вызван

Так же, есть поддержка нескольких пространств имен (с версии 1.3, если быть точным): 

$('.class').bind('click.a.b', function(){
    // для пространств a и b
});
$('.class').trigger('click.a'); // вызываем обработчик из пространства a
$('.class').unbind('click.b');  // отменяем обработчик для пространства b

Можно одним махом удалить все обработчики с определенного пространства имен: 

$('.class').bind('click.namespace', function(){}); // обработчик клика
$('.class').bind('blur.namespace', function(){});  // обработчик фокус
$('.class').unbind('.namespace'); // передумали, и все отменили

Работа с live

Очень часто при генерации страниц AJAX’ом возникает необходимость повесить обработчики событий на новые элементы в DOMе, для этой цели служит метод live (первый параметр — имя события, второй — обработчик).

Приведу пример — есть следующая задача:

  1. все внутренние ссылки на страницы должны подгружать контент AJAXом в элемент с id=content
  2. правило №1 верно для ссылок из подгруженного контента

Реализовать первое требование достаточно просто: 

$('a[href^=/]').click(function(event){
    $('#content').load($(this).attr('href'));
    return false; // эквивалентно вызову event.preventDefault(); и event.stopPropagation();
});

Выполнить второе правило тоже легко, достаточно слегка модифицировать предыдущий пример: 

$('a[href^=/]').live('click', function(event){
    $('#content').load($(this).attr('href'));
    event.preventDefault(); // отменяем действие по умолчанию, но не трогаем bubbling - чтобы не мешать другим обработчикам
});

Поддерживаемые события: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup, change, submit, focusin, focusout, mouseenter, mouseleave
Нет поддержки: blur, focus, change, submit

В противовес функции live существует функция die — она убирает отслеживание событий для вновь появившихся элементов.

Хотелось бы отдельно остановиться на принципе работы метода live — данный метод работает благодаря т.н. «всплытию» событий в DOMе — т.е. когда вы кликаете на любом элементе на странице, то в первую очередь событие сработает на этом элементе, если обработчика события нет, или он не говорит, что дальше «всплывать» не надо (сказать он это может так event.stopPropagation()), то событие идет вверх по DOM дереву и инициализирует обработчики у родительского элемента, и так далее пока не достигнет корня — document’a. Таким образом метод live вешает обработчик событий на document, и затем анализирует каждое событие на предмет наличия элементов описанных вами. Это конечно не самый быстрый способ, но его можно ускорить используя метод delegate, его отличие от live только в том, что вы указываете элемент на который вешаете обработчик «live» событий, таким образом пример выше можно записать так:

$('#content').delegate('a[href^=/]', 'click', function(event){
    $('#content').load($(this).attr('href'));
    event.preventDefault();
});

Touch события

Смартфоны с большим сенсорным экраном — это уже не редкость, вот и web-индустрия начинает адаптироваться под пользователей того же iPhone, если же вам понадобилось подобная адаптация, то вам пригодится следующая информация:

События в JavaScript’е:

  • touchstart — аналогично mousedown
  • touchmove — mousemove
  • touchend — mouseup
  • touchcancel — аналогии нет

О том как с ними работать, можно подчерпнуть из статей iPhone Touch Events in JavaScript и Touching and Gesturing on the iPhone

Если же вернутся к CSS, то для того же iPhone подключение внешнего CSS файла будет выглядеть следующим образом: 

<link rel="stylesheet" href="iphone.css" type='text/css' media='only screen and (max-device-width: 480px)' />

Или в самом CSS: 

@media only screen and (max-device-width: 480px) {
  .sidebar {
    display: none;
  }
}

Подробнее читайте в статье iPhone Development: 12 Tips To Get You Started (перевод был тут)

Цикл статей

  1. jQuery для начинающих
  2. jQuery для начинающих. Часть 2. JavaScript Меню
  3. jQuery для начинающих. Часть 3. AJAX
  4. jQuery для начинающих. Часть 4. Селекторы
  5. jQuery для начинающих. Часть 5. Эффекты
  6. jQuery для начинающих. Часть 6. События
  7. jQuery для начинающих. Часть 7. Пишем плагины
  8. jQuery для начинающих. Часть 8. Расширяем фильтры

Другие посты на эту тему

]]> http://anton.shevchuk.name/javascript/jquery-for-beginners-events/feed/ 33 Сравниваем производительность JavaScript фреймворков http://anton.shevchuk.name/javascript/compare-perfomance-javascript-frameworks/ http://anton.shevchuk.name/javascript/compare-perfomance-javascript-frameworks/#comments Mon, 31 May 2010 09:06:05 +0000 Anton Shevchuk http://anton.shevchuk.name/?p=1252
Давненько я не сравнивал производительность JavaScript фреймворков, пора это исправить, и обновить данные двухгодичной давности.

В качестве инструмента я взял тест SlickSpeed и установил на свой хостинг, в списке испытуемых оказались следующие фреймворки:

А так же браузеры, установленные на моей системе:

  • Mozilla Firefox 3.6.3
  • Opera 10.53
  • Google Chrome 5.0.375.55 beta
  • Safari 4.0.3
  • Internet Explorer 8.0

Результаты тестирования

Все тесты проводил 5 раз — для достоверности (т.е. с учетом алгоритма тестирование, результат — среднее значение от 30 запусков). Все расширения браузеров были отключены. Результаты приведены в миллисекундах.

Dojo 1.4.3 jQuery 1.4.2 MooTools 1.2.4 Prototype 1.6.1 Prototype 1.7.2 ExtJS Core 3.1 YUI 3.1.1 Avg
Firefox 3.6.3 62,6 52,6 89,4 68,4 42,8 109,2 54,6 68,51
Opera 10.53 37,2 33,2 61,6 45,2 34,2 70,2 35,6 45,31
Google Chrome 5.0 18,20 13,60 59,40 24,60 13,60 45,00 19,60 27,71
Safari 4.0.3 19,00 14,80 56,40 20,20 13,00 64,80 18,40 29,51
Internet Explorer 8.0 106,40 97,00 371,80 559,40 135,80 276,60 518,40 295,06
Avg 48,68 42,24 127,72 143,56 47,88 113,16 129,32

Сводный график полученных данных:
Chart build on http://charts.hohli.com

Отбросим IE, а то он сильно портит картину:
Chart build on http://charts.hohli.com

Выводы

Самым быстрым фреймворком оказывается jQuery:

  1. jQuery 1.4.2 — 42,24 мс
  2. Prototype 1.7.2 — 47,88 мс
  3. Dojo 1.4.3 — 48,68 мс
  4. ExtJs Core 3.1.0 — 113,16 мс
  5. MooTools 1.2.4 — 127,72 мс
  6. YUI 3.1.1 — 129,32 мс
  7. Prototype 1.6.1 — 143,56 мс

И в «медальном зачете» картина та же — Prototype совсем чуть-чуть отстает:

Dojo 1.4.3 jQuery 1.4.2 MooTools 1.2.4 Prototype 1.6.1 Prototype 1.7.2 ExtJS Core 3.1 YUI 3.1.1
Firefox 3.6.3 4 2 6 5 1 7 3
Opera 10.53 4 1 6 5 2 7 3
Chrome 5.0 3 1 7 5 1 6 4
Safari 4.0.3 4 2 6 5 1 7 3
IE 8.0 2 1 5 7 3 4 6
Total 17 7 30 27 8 31 19

А среди самых быстрых браузеров — Google Chrome, на пятки наступает Safari:

  1. Google Chrome 5.0 — 27,71 мс
  2. Safari 4.0.3 — 29,51 мс
  3. Opera 10.53 — 45,31 мс
  4. Mozilla Firefox 3.6.3 — 68,51 мс
  5. Internet Explorer 8.0 — 295,06 мс

А в «медальном зачете» они обменялись местами:

Dojo jQuery MooTools Prototype Prototype ExtJS Core YUI Total
Firefox 3.6.3 4 4 4 4 4 4 4 28
Opera 10.53 3 3 3 3 3 3 3 21
Chrome 5.0 1 1 2 2 2 1 2 11
Safari 4.0.3 2 2 1 1 1 2 1 10
IE 8.0 5 5 5 5 5 5 5 35

P.S. Если хотите – добавлю еще фреймворки для сравнения, оставляйте ссылку и название функции для тестирования…

Другие посты на эту тему

]]> http://anton.shevchuk.name/javascript/compare-perfomance-javascript-frameworks/feed/ 15