Question

我打算编写一些应该加载YUI3的JavaScript模块。我该如何组织文件和文件夹？是否有推荐的文件夹结构？如果我存储类似于“核心”或“图库”的文件应该是一个简单的加载 - 或者不是？

如果我按以下方式存储脚本，是否必须列出“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加载程序模块存在以及它们具有哪些依赖项。目前，为模块加载依赖项的方式为a bug，因此您必须在两个位置声明依赖项，在您的加载器配置中，以及作为YUI.add语句的后缀。

您可以通过两种方式配置加载程序：您可以在调用use之前将config作为参数传递给YUI（），或者您可以将配置分配给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

您需要配置加载程序，以便知道在哪里可以找到模块文件。

通常，加载程序期望每个模块都有自己的目录，该目录包含一个或多个子模块文件和连接的“超级模块”文件。例如，查看“Base”模块，我们看到以下模式：

基base.js
基build.js
基pluginhost.js
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，它使用配置文件生成该包装代码。

我应该如何以及在哪里存储自己的YUI3 JavaScript文件？

2 个答案: