第二部分 YUI 库

转载 2012年03月24日 16:00:48

整个雅虎用户界面库 (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 示例:
<script type="text/javascript" src="http://yui.yahoo.apis.com/2.7.0/build/yahoo/yahoo-min.js"></script>
使用 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 来减少页面大小。 

3、YUI部分中文文档2

6.4.     AutoComplete 用户在文本输入框中输入文字时,该组件通过输入的内容查找符合输入条件的内容,并显示出所有符合条件的内容,供用户能够很快的完成正确的输入。   ...

EasyDarwin开源音频解码项目EasyAudioDecoder:EasyPlayer Android音频解码库(第二部分,封装解码器接口)

上一节我们讲了如何基于ffmpeg-Android工程编译安卓上的支持音频的ffmpeg静态库:http://blog.csdn.net/xiejiashu/article/details/52524...

[python3教程]第十一章.标准库简介第二部分

还是标准库的内容,如果你只看这些内容肯定是远远不够的,还需要去读文档。当然了这边文章可以当做一个指引。...

cocoapods应用第二部分-私有库相关

利用cocoapods建立私有库 本地库 framework
  • yohunl
  • yohunl
  • 2015年09月15日 18:25
  • 4824

Android高手速成--第二部分 工具库

来自:http://www.cnblogs.com/huwei0814/p/3796670.html 主要包括那些不错的开发库,包括依赖注入框架、图片缓存、网络相关、数据库ORM建模、Andro...
  • jfj545
  • jfj545
  • 2014年12月11日 13:21
  • 337

EasyPlayer Android音频解码库(第二部分,封装解码器接口)

上一节我们讲了如何基于ffmpeg-android工程编译安卓上的支持音频的ffmpeg静态库,这篇文章我们将介绍如何封装安卓的解码器。首先,为了能让我们的app调用调用,我们需要定义一套Java的n...
  • jyt0551
  • jyt0551
  • 2016年09月17日 12:42
  • 623

一步一步学Streams:第二部分(12)实践之创建Streams全库复制环境(2)执行创建

二、进入创建环节,操作如下: 1、 创建streams管理员帐号   建议为streams的管理帐号创建独立表空间,方便管理的维护。 JSSWEB> create tablespace ...
  • xyz846
  • xyz846
  • 2012年03月31日 22:35
  • 1017

【LWJGL2 WIKI】【辅助库篇】Slick-Util库:第二部分-读取声音

原文:http://wiki.lwjgl.org/wiki/Slick-Util_Library_-Part_2-_Loading_Sounds_for_LWJGLJava自带支持WAV和AIF格式,...

YUI2 库与例子都有了

  • 2010年07月02日 11:43
  • 12.9MB
  • 下载

使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)

【原创】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点) 1、首先你要去下面地址下载yahoo类库     http://developer.yahoo.com/yui/ ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第二部分 YUI 库
举报原因:
原因补充:

(最多只允许输入30个字)