Как и где мне хранить мои собственные файлы JavaScript YUI3?

Question

Я планирую написать несколько модулей JavaScript, которые должны быть загружены с YUI3. Как мне организовать свои файлы и папки? Есть ли рекомендуемая структура папок? Если я храню свои файлы, похожие на "ядро" или "галерею", должна быть легкая загрузка - или нет?

Нужно ли перечислять каждый модуль в вызове "YUI(). Use...", если я храню свои сценарии следующим образом?

de-mylib-www/mymodules/mod1/mod1-base.js
de-mylib-www/mymodules/mod2/mod2-base.js
de-mylib-www/mymodules/mod3/mod3-base.js
de-mylib-www/mymodules/mod3/mod3-class1.js
de-mylib-www/mymodules/mod3/mod3-class2.js

Answer 1

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

Если вы явно не включите исходные файлы javascript в документ, вам нужно будет уведомить загрузчик YUI о том, что модули существуют и какие у них зависимости. На данный момент существует ошибка в способе загрузки зависимостей для модуля, поэтому вы должны объявить зависимости в двух местах, в конфигурации загрузчика и в качестве постфикса к вашим операторам YUI.add.

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

var cfg = {
    /* other configs */
    modules: {
        'mod3-base': { requires: [ 'mod3-class1', 'mod3-class2' ] },
        'mod3-class1': { /* */ },
        'mod3-class2': { /* */ }
    }
}

// You could pass the config in as an argument:
YUI(cfg).use('mod3-class2', function(Y) {
    // your code
});

// Or set it as a magic global:
YUI_config = cfg; // will implicitly configure all YUI().use statements

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

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

1. Base-base.js
2. Base-build.js
3. Base-pluginhost.js
4. base.js: объединенная копия base-base, base-build и base-pluginhost

Каждый из этих четырех типов имеет три варианта: "сырой" исходный файл, "-min" и "-debug". В зависимости от того, как вы настроили ваш загрузчик, он может искать минимизированные варианты.

Answer 2

Правильный способ сделать это - перечислить модули, которые нужны вашей странице, в YUI.use() вызовите и перечислите модули, которые нужны этим модулям в качестве требований.

Предположим, что вы хотите использовать mod3-class2 на вашей странице и mod3-class2 зависит от mod1-base а также mod3-base, Вы бы хотели что-то вроде этого на своей главной странице:

YUI().use('mod3-class2', function (Y) {
    /* Your code here */
});

Затем вы должны указать mod3-class2Зависимости в mod3-class2.js как это:

YUI.add('mod3-class2', function(Y) {
    /* Module code here */
}, 'module version', {
    requires: ['mod1-base', 'mod3-base']
});

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