В блоге «Yahoo! User Interface» появилась большая статься о создании приложений под YUI3.

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

Интересную инфраструктуру для создания виджетов предоставляет фреймворк 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.

Первая приятная особенность, с которой приходится столкнуться при работе с YUI3 , это модульность и динамическая загрузка этих модулей.

Создать модуль можно, например, на основе следующего кода:

YUI.add("mymodule", function(Y) {
    Y.MyModule = function() {
        // конструктор
    };
});

В дальнейшем он используется так:

YUI().use("mymodule", function (Y) {
    var o = new Y.MyModule();
});

Основная задача шаблона — это изолировать модуль и подключать его к экземпляру YUI (переменная Y в YUI.add и YUI.use) только при необходимости.

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

YUI({
    modules: {
        "mymodule":{
            // полный путь к файлу
            fullpath:"mymodule.js",
            // зависимости модуля
            requires: ["dd", "widget"]
        }
    }
}).use("mymodule", function () {
    // код приложения
});

Указав необходимые модулю зависимости (requires) мы тем самым позволяем загрузчику оптимизировать список файлов, которые требуется загрузить и минимизировать число HTTP подключений.

Так же эти зависимости нужно указать в YUI.add

YUI.add("mymodule", function(Y) {
    Y.MyModule = function() {
        // конструктор
    };
}, "1.0", {requires: ["dd", "widget"], use: ["dd", "widget"]});

Данные, которые передаются при объявлении, указывают на то, что требуется для работы модуля, когда он загружен и используется в методе YUI.use . Так код модуль может быть явно подключен на странице.