第二部分 YUI 库

来源：互联网发布：人工智能机器人娇娇编辑：程序博客网时间：2024/04/26 02:44

整个雅虎用户界面库 (Yahoo!User Interface Library, YUI) 解压缩之后接近 50MB，包括素材、示例、测试、文档和包含主库的3种类型的文件。可以在 http://developer.yahoo.com/yui/ 中找到 YUI 库。

YUI 库划分为如下4个主要的组：

YUI 核心
实用工具
控件/窗口部件
CSS工具

每个组又划分为个别组件，可以根据需要使用这些组件，而无须在站点上包含整个库。所有组件都依赖于 YAHOO Global Object，它负责一些必须的基础性工作。此外，大多数组件还需要 DOM Collection 和 Event Utility 。每个组件都有精简版、标准版以及调试版。调试版将所有类型的信息记录到日志记录器，可用来跟踪组件的内部工作情况。调试版的大小总是最大，而且绝对不应该用在生产环境中。就此而言，也不应该使用标准版，这是因为正如其名称所暗示的那样，它是一个充满空白和注释 (没有日志记录器) 的标准 JavaScript 文件。

将调试版和标准版中的任何一个放在生成环境中都将意味着，为了使组件能够工作，必须强迫访问者下载至少两倍于必要文件大小的数据。这正是创建精简版的原因。精简版只用于生产环境中的部署，这是因为它已经将所有空白和注释删除，并且在其上执行了一些用于节省空间的操作。精简版的效果与使用代码混淆技术的效果差不多，而 YUI 团队并不相信代码混淆技术，这是因为它可能引入程序错误。尽管如此，YUI 组件精简版的大小仍然要比标准版和调试版小很多。

此外，Yahoo! 还通过版本化的 URL 提供了这些文件的托管版本。可以在 http://developer.yahoo.com/yui/articles/hosting/ 中找到所有版本化 URL 的详细的 (以及维护的) 列表。

下面是 YUI 托管文件的版本化 URL 示例：

使用 YUI 托管版本的好处就是性能。这些文件都是通过低延迟服务器提供服务，并且进行全局缓存。

最后，这个库提供了最常用文件的聚合版本，从而减少 HTTP 请求次数。有两个这样的文件：yahoo-dom-event.js 和 utilities.js 很明显，前者包含 YAHOO Global Object、DOM Collection 和 Event Utility 。后者包含这些组件以及 Element Utility、Connection Manager、Drag & Drop Utility 和 Animation Utility。

关于名称空间的名称的注意事项

YUI 的基本原则是全局变量有一定缺陷，无论从性能的角度还是它们容易与其他全局变量冲突来看均是如此。这就是整个 YUI 库只使用了一个全局变量 YAHOO (将其他所有组件都组织在其中) 的原因。在嵌套对象中组织组件，这些嵌套对象的名称清晰地描述了各自的功能。因此，DOM Collection 位于 YAHOO.util.Dom 对象中，而 Event Utility 位于 YAHOO.util.Event 对象中。全局变量 YAHOO 采用大写是为了进一步降低与其他具有相同名称的全局变量产生冲突的可能性。JavaScript 变量是区分大小写的，因此 YAHOO 可以与 Yahoo 和 yahoo 共存，而不会有任何问题。

人们广泛认可的一个事实是，尽管命名空间的名称具有很好的描述性，但是却比较长，而且难以输入。因此，人们引入了快捷方式：

var Y = YAHOO.util.Dom;

var foo = Y.get("foo"); // instead of YAHOO.util.Dom.get("foo");

为了演示该技术，下面几个代码示例使用了快捷方式：

var YD = YAHOO.util.Dom,

YE = YAHOO.util.Event,

YEL = YAHOO.util.Element,

YS = YAHOO.util.Selector;

此外，遵循尽可能少的地使用全局变量的精神，代码示例将倾向于包装在自执行的匿名函数中。这项技术的目的是提供某种 "沙箱" ，所有示例变量的作用域都限制在匿名函数内部：

(function(){

var foo = "This variable is not globally available.";

})();

当然，还可以使用 namespace 函数在 YAHOO Global Object 下创建自定义命名空间，例如：

YAHOO.namespace(foo.bar.baz);

这段代码创建了命名空间 YAHOO.foo.bar.baz 。如果将 YAHOO 作为命名空间字符串的一部分传入，那么它会被忽略，这是因为 YAHOO 是命名空间的隐含部分。因此，下面的代码片段也将创建 YAHOO.foo.bar.baz 名称空间：

YAHOO.namespace("YAHOO.foo.bar.baz");

配置 YUI3 实现

有两种方式在页面上应用 YUI3

1.使用 YUI 种子文件 (seed file) 和自动完成 (self-completion) 功能

如果在页面上包含 YUI seed 模块 (module) (整个 YUI 模块，包含所有子模块)，你的 YUI 应用将使用其内在的loader载入YUI所有的其他功能。YUI可以通过使用单独的HTTP请求，自动完成任何的实现(如果配置正确的话)。对大多数人来说，这是最简单和最高效的使用 YUI 的方法。这种方法的更多信息，请参见 YUI user guide ；大多数的YUI例子使用也是使用的这种方式。当你使用这种方式的时候，你需要依赖唯一的模块就是 YUI 模块。

2.根据需要在网页上包含所有必要的文件

如果你想通过 script 标签直接加载页面上需要的模块，你可以只选择实现需要的模块和子模块。注意，大多数情况下，你不需要一个给定组件的所有子模块 -例如大多数动画不是颜色动画，所以不需要 anim-color 子模块。同样，如果你使用这种方式，那么将不会动态加载所有 YUI 文件，你不需要YUI组件的 get 和 loader 子模块，你可以通过只引入 yui-base 来减少页面大小。