在页面中调用一个模块的最简单的方法是通过scirpt标签来引用脚本，或者是将它放在script标签的url指向的combo文件中（combo可以通过手动连接或者支持combo的服务器自动完成）。而将自定义模块集成到YUI Loader中是一个更好的办法，可以极大的改进性能。这种方法很重要的一点是在使用YUI.add()插入模块时引入依赖文件（通过requires的最后一个参数），这样在调用use()时就可以按照正确的顺序调用它们。

对于小的web应用，你可以在页面load时加载所有内容，但是对于大型应用，这样是很不合理的，因为会花费太长的时间。你可以使用很多次use()方法去请求各个模块所需要的文件，然而这种让Loader在模块加载时去查找本模块的依赖文件是非常耗时的，它可能需要建立很多个请求，直到获得它需要的文件为止。相反，你可以预先告诉Loader各个模块和它的依赖文件，这样，当遇到这个模块时，加载器就可以并行的对它们进行处理。

为此，你需要为YUI Lodaer添加模块说明和要求来建立模块依赖关系，最简单的方法就是建立一个包含这些信息的yui_config.js文件（可以改为其他名字），如下所示：

将这段代码放在常规的<script>标签内，并放在第一个YUI().use()代码段之前。它用来配置（YUI）库加载前需要的一些全局属性。，就像以前你必须放在YUI().use()的第一个参数一样，现在YUI可以代替你做这些。你可以使用这儿所列的任何配置项。

filter：“min”：产品代码（去除注释后的最简版本）；

debug：bebug版本（带有一些log语句，包含console组件）；

raw：非最简版本（不带log，含有注释）；其中后两者通常只应用于开发环境中。

combine：这个配置项仅仅应用在combo后一些难解决的bug的查找时。

gallery：如果你使用了gallery模块，填上它的版本号。

group：这个属性用来描述你的模块。

首先是组的名称，这里叫‘js’，也可以是其他名称。 你可以为放置在相同位置的一系列文件创建一个这样的组，每个组的第一个参数用来声明文件的根路径（可以是相对路径或者绝对路径）。除base之外，还有一些组的基本属性，具体请参照这儿。

最后是modules属性，需要在这列举这个组的所有模块。调用每个模块的关键词是模块的名称，也就是你在YUI().add()和YUI().use()的第一个参数。path是模块相关文件的位置，可以是在base基础上的相对路径，如果文件放在其他地方，也可以用全路径。其他的属性可以在这儿找到，和放在YUI.add()结尾的一样。requires属性里面可以是YUI modules, gallery modules或者你自己创建的modules，无论是这个组的还是其他组的。此外，如果设置skinnable:true的话，皮肤会被自动加载，就像我在文章开头所讲的那样。

为了简化这些工作，我创建了一个Windows脚本文件，可以为我自动配置YUI_config。它会扫描并阅读每一个模块文件，并提取出每一个YUI.add中的参数。对于我来说，它很有用，但并不一定适合你。

结语

YUI3非常灵活，你可以通过很多方法建立你的模块。比如通过Y.Base来派生，其实我也不是经常这么做，只是偶尔会用到，但在复杂系统中，依然非常推荐使用Y.Base。

原文：http://ued.taobao.com/blog/2011/04/14/a-recipe-for-a-yui-3-application/

本文链接：http://www.blueidea.com/tech/web/2011/8412.asp　

出处：Taobao.com UED Team
责任编辑：bluehearts

上一页 使用YUI 3开发Web应用的诀窍 [8] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。