Разработка насыщенных веб-интерфейсов

jQuery UI как инфраструктура для плагинов

Введение

jQuery UI больше всего известен как набор готовых виджетов. Главное их преимущество, на мой взгляд, — консистентное API: каждый виджет управляется одинаково. Второе их преимущество — они хранят свое состояние: если повторно навесить виджет на элемент, то результатом будет уже существующий инстанс виджета.
Но jQuery UI — это не только набор окошечек и табов (далеко не всеми любимых). Это еще целая инфраструктура для создания своих виджетов: с удобным консистентным API, с хранением состояния и с возможностью наследования. Как ни странно, это для многих новость, в результате чего и появилась эта статья — так же, как это было новостью для меня всего несколько месяцев назад.

Лирическое отступление

Дабы не тратить время и место, везде ниже по коду подразумевается, что window.$ == window.jQuery, undefined никто не испортил, и что мы подключаем jQuery, только jQuery и ничего, кроме jQuery, и что все объявления обернуты в нечто вроде этого:

(function($) {
  // наш код
})(jQuery)
* This source code was highlighted with Source Code Highlighter.


Так же подразумевается, что читатель неплохо знаком с jQuery и хотя бы читал документацию от jQuery UI.

Магия $.widget

Вся магия заключается в методе $.widget. Он принимает 2 (или 3 — в случае наследования) параметра. Официально этот метод называется «фабрика виджетов».
Первый параметр — строка, она содержит неймспейс и собственно имя виджета, разделенные точкой. Например, "my.myWidget". Неймспейс обязателен; вложенность не поддерживается. Второй параметр — литерал объекта, который, собственно, и описывает наш виджет:

$.widget("my.myWidget", {
  options: {
    greetings: "Hello"
  },
_create: function() {
    this.element.html(this.options.greetings);
  }
})
* This source code was highlighted with Source Code Highlighter.


Функция, лежащая в поле под именем _create, служит конструктором, и будет вызвана при создании инстанса виджета; на этот инстанс и указывает this.
this.element — это элемент, на который был навешен виджет. Это всегда одиночный элемент, а не коллекция (как в случае обычных плагинов); если навешивать виджет на jQuery-объект, который содержит больше одного элемента, то будет создано столько инстансов, сколько элементов.
В поле options хранятся дефолтные настройки виджета. Это поле наследуется, так что оно всегда будет в виджете, даже если не объявлять его явно.
Если при вызове виджета передать объект, то переданный объект будет «смерджен» (с помощью метода $.merge) с дефолтными настройками еще до вызова _create.
За работу с настройками отвечает метод setOption: 

$.widget("my.myWidget", {
  options: {
    greetings: "Hello"
  },
  _create: function() {
    this._render();
  },
  _render: function() {
    this.element.html(this.options.greetings);
  },
  setOption: function(key, value) {
    if (value != undefined) {
      this.options[key] = value;
      this._render();
      return this;
    }
    else {
      return this.options[key];
    }
  }
})
* This source code was highlighted with Source Code Highlighter.


Используется это так же, как в любом стандартном виджете:

var mw = $('.mywidget').myWidget({greeting: 'Hi there!'})
console.log(mw.myWidget('option', 'greeting')); // 'Hi there!'
mw.myWidget('option', 'greeting', 'O HAI CAN I HAZ CHEEZBURGER?');
* This source code was highlighted with Source Code Highlighter.

Приватные и публичные методы

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

$.widget("my.myWidget", {
    options: {
        greetings: "Hello"
    },
    _create: function() {
        this._render();
    },
    _render: function() {
        this.element.html(this.options.greetings);
    },
    sayHello: function(saying) {
        alert(saying);
    },
    _setOption: function(key, value) {
        if (arguments.length == 1) {
            this.options[key] = value;
            this._render();
            return this;
        }
        else {
            return this.options[key];
        }
    }
})
// …
mw.myWidget("sayHello", 42);
* This source code was highlighted with Source Code Highlighter.


Но для этого этот метод должен быть публичным. Как сделать метод публичным в парадигме UI-ных плагинов? Это просто: публичными методами движок виджетов считает те, имена которых не начинаются с подчеркивания. Все остальные методы — приватные. Поля виджетов, не являющиеся функциями, всегда только приватные.
Это, конечно, не в полном смысле public и private методы, а их эмуляция, впрочем, достаточная для того, чтобы разграничить доступ.

Коллбэки

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

$.widget("my.myWidget", {
  options: {
    greetings: "Hello"
  },
  _create: function() {
    this._render();
  },
  _render: function() {
    this.element.html(this.options.greetings);
    this._trigger("onAfterRender", null, {theAnswer: 42})
  }
})
// …
var mw = $(".mywidget").myWidget(
  {
    greeting: "Hi there!",
    onAfterRender: function(evt, data) {
      console.log(data.theAnswer)
  }
})

* This source code was highlighted with Source Code Highlighter.


Это эквивалентно старому доброму .bind в таком виде:

mw.bind('onAfterRender.myWidget', function(evt, data) {console.log(data.theAnswer)})
* This source code was highlighted with Source Code Highlighter.

Деструкторы

Идущие «из коробки» виджеты имеют обыкновение генерировать кучу разметки. Хорошо это или плохо — вопрос дискусионный. Но, отчасти поэтому, отчасти потому, что ссылка на инстанс виджета записывается в expando-атрибут DOM-элемента — надо вызывать деструктор, когда вы уничтожаете виджет.
В качестве деструктора вызывается метод под названием destroy. К сожалению, его всегда надо вызывать явно. Чтобы было полное счастье, внутри деструктора должен быть следующий вызов:

$.Widget.prototype.destroy.call(this);
* This source code was highlighted with Source Code Highlighter.

Наследование

Одна из самых вкусных вещей, хотя по ней практически нет информации.
Если вторым аргументом передать какой-то другой виджет A (наш виджет в этом случае идет третьим аргументом), новый виджет B будет его потомком.
Предположим, в нашем приложении — куча диалоговых окон, и все — модальные. При этом они не должны закрываться по Esc. Писать каждый раз вот такое совсем не хочется:

$('.dialog').dialog({
  modal: true,
  closeOnEscape: false,
  // … еще куча настроек, которые тоже могут быть
  // одинаковы для всех диалогов…
})
* This source code was highlighted with Source Code Highlighter.

Мы можем отнаследоваться от стандартного диалога и переопределить дефолтные настройки:

$.widget("my.mydlg", $.ui.dialog, {
  options: {
      modal: true,
     closeOnEscape: false,
  },
  _create: function() {
      $.ui.dialog.prototype._create.call(this);
  }
})
* This source code was highlighted with Source Code Highlighter.


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

Заключение

Мне кажется, что UI-ные виджеты — это неплохое средство модуляризации кода. В небольших и средних проектах они сами себе могут обеспечить достаточную инфраструктуру приложения.
При этом не надо тащить весь, довольно увесистый, jQueryUI — достаточно компонента core.
Паттерн, который лежит в основе этого виджетного движка, создатели называют bridge (хотя, конечно, метод $.widget— это фабрика). Допилив метод $.widget напильником, можно получить виджеты, которые сами читают свои настройки из разметки, сами находят витальные для себя элементы, и автоматически организовываются в иерархическую структуру. Но это явно тема для отдельной статьи.

MS SilverLight

Источники информации:

http://www.keldysh.ru/papers/2006/prep75/prep2006_75.html - Особенности реализации насыщенных пользовательских интерфейсов Веб-приложений

Китаев Е.Л., Кузьмичев Д.Л., Слепенков М.И.

http://www.symfony-project.org/jobeet/1_4/Propel/en/01

Practical symfony

Day 1: Starting up the Project

http://www.symfony-project.org/jobeet/1_4/Propel/ru/04 Practical symfony

День 4: Вид и контроллер

http://ru.wikipedia.org/wiki/JQuery jQuery
http://ru.wikipedia.org/wiki/Yahoo!_UI_Library

Стандарты в веб-разработке