Интересную инфраструктуру для создания виджетов предоставляет фреймворк YUI3 . В заметке я хочу кратко описать шаблон для создания и назначение методов жизненного цикла.

Пример минимального виджета:

YUI.add("mywidget", function (Y) {

    var App = Y.namespace("App");

    /* MyWidget конструктор */
    function MyWidget(config) {
        MyWidget.superclass.constructor.apply(this, arguments);
    }

    /* Имя виджета, которое будет использоваться для генерации названий классов и т.п. */
    MyWidget.NAME = "mywidget";

    Y.extend(MyWidget, Y.Widget, {
        initializer: function (config) {},
        destructor: function () {},
        renderUI: function () {},
        bindUI: function () {},
        syncUI: function () {}
    });

    App.MyWidget = Y.Base.build(MyWidget.NAME, MyWidget, []);

}, "0.1", {use: ["widget"]});

Важными методами жизненного цикла виджета являются:

• initializer

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

• destructor

  Метод вызывается во время удаления виджета и используется для очистки экземпляра от созданных DOM-элементов и обработчиков событий. Если все DOM-элементы создавались внутри «bounding box», то нужно будет только «занулить» ссылки на них. Сами элементы и обработчики событий будут удалены автоматически.

• renderUI

  Часть реализации «renderer», ответственная за создание представления виджета. Метод добавляет DOM-элементы, которые необходимы виджету, или изменяет существующие.

• bindUI

  Часть реализации «renderer», ответственная за подключение обработчиков событий изменения атрибутов или DOM-событий.

• syncUI

  Часть реализации «renderer», ответственная за обновление интерфейса виджета на основании его текущего состояния.

Получение данных о состоянии виджета в методах renderUI, bindUI, syncUI выполняется с помощью метода get, наследованного у класса Attribute . Следует отметить, что если используется статическое поле ATTRS у виджета, которое определяет начальное состояние, то в нем следует описать все используемые атрибуты. Если какой-то из них не будет описан, то получить доступ к нему не будет возможности.

Наиболее часто используемыми атрибутами, пожалуй, являются boundingBox и contentBox . Первый содержит ссылку на объект типа Node, который служит контейнером для виджета, а второй — ссылку на контейнер содержимого. Задать разметку для этих контейнеров можно через конфигурационные свойства BOUNDING_TEMPLATE и CONTENT_TEMPLATE соответственно. По умолчанию для них используется просто элемент DIV.

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

YUI().use("mywidget", function (Y) {
    var widget = new Y.App.MyWidget({
        a: 10,
        title: "Sample widget"
    });
    widget.render();
});

В конструкторе указываются, если это необходимо, конфигурационные параметры виджета. Метод render может быть вызван с параметром, определяющий DOM-элемент, где будет отображен виджет. Если он вызван без параметров, как в примере, то виджет отображается в элементе BODY.