Первая приятная особенность, с которой приходится столкнуться при работе с 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 . Так код модуль может быть явно подключен на странице.