2

我打算编写一些应该用 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
4

2 回答 2

2

要充分利用 YUI 的加载器模式，您必须遵守它的一些规则。就目录模式而言，您的示例看起来几乎完全正确。

除非您在文档中明确包含您的 javascript 源文件，否则您需要通知 YUI 加载器模块存在以及它们具有哪些依赖项。目前，为模块加载依赖项的方式存在错误，因此您必须在两个地方声明依赖项，在加载器配置中，以及作为 YUI.add 语句的后缀。

您可以通过两种方式配置加载器：您可以在调用 use 之前将配置作为参数传递给 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”模块，我们会看到以下模式：

  1. base-base.js
  2. 基础构建.js
  3. base-pluginhost.js
  4. base.js：base-base、base-build 和 base-pluginhost 的串联副本

这四种类型中的每一种都有三个变体，一个“原始”源文件、一个“-min”和一个“-debug”。根据您配置加载程序的方式，它可能会寻找缩小的变体。

于 2011-06-07T21:04:30.930 回答
0

执行此操作的正确方法是在YUI.use()调用中列出您的页面需要的模块，并列出这些模块作为要求需要的模块。

假设您希望mod3-class2在您的页面中使用，这mod3-class2取决于mod1-base和mod3-base。你会在你的主页中想要这样的东西：

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

然后，您将像这样指定mod3-class2's 依赖项mod3-class2.js：

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

您还可以使用YUI 构建工具，它使用配置文件来生成包装代码。

于 2011-03-22T20:07:36.173 回答