转自:http://www.zhuoqun.net/html/y2008/1118.html
YUI中有很多核心组件,比如像DOM, Event,几乎每个应用都会用到,但是我觉得在学习这些组件之前,最好先了解一下YUI Loader 这个好东西。YUI Loader 也是一个 YUI 的组件,它的作用就是通过脚本加载页面中需要用到的YUI 组件,说白了,就是在页面加载的时候,动态地在页面中插入<script> 标签,那么它和直接在页面中写 <script> 标签有什么区别呢?好处如下:
1. 可靠;按照依赖顺序加载YUI组件。由于YUI中组件很多,为了平衡代码重用和代码独立,很多组件相互之间都有依赖关系,必须要按照依赖次序加载,不然就 要出错。YUI Loader知道组件之间的依赖关系,如果你加载某个组件的话,YUI Loader就会先把这个组件依赖的所有组件按照次序加载进来,保证不出错。
2. 当页面中已经有YUI组件的时候,利用YUI Loader添加新的组件会比较安全。因为开发者会自己编写一些可重用的YUI组件,所以在加载这些组件的时候页面中可能已经有了YUI其它的组件,如果 自己编写的YUI组件依赖于YUI中其他组件的话,可能会在页面中重复加载一些YUI组件。使用YUI Loader就可以避免这个问题,它不会重复加载那些页面中已经存在的组件,只是把那些页面中不存在的组件加载进来。
3.自动使用集成的(rolled-up)文件。YUI中有些 js 文件集成了很多功能,比如 yahoo-dom-event.js 就集成了YAHOO全局对象,Dom 以及 Event 。YUI Loader会根据情况判断是否使用集成文件,这样的话就会少加载一些js文件,减少了HTTP请求,而页面的HTTP请求对页面加载速度是会有很大影响 的。(关于HTTP请求请看这里 )
提示: 任何一种在客户端脚本中动态加载外部js的方法,或多或少都会对性能有一些影响。如果你追求性能最优的话,那么在页面中直接写<script> 或 <link> 标签会更好。
在使用 YUI Loader 这个组件之前呢,还是要首先引入一个script文件,如下:
<script type=”text/javascript” src=”http://yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js” ></script>
如果你决定使用 YUI Loader 组件的话,就不用单独引入YAHOO全局对象的js文件了,因为YUI Loader 本身就包含了YAHOO全局对象。
下面介绍一下YUI Loader组件中的一些主要参数和方法:
方法:
insert() 方法 :最经常用的一个方法,在配置好YUI Loader之后,使用这个方法把YUI组件动态加载进来。
sandbox() 方法 :有时候动态加载进来的组件可能会和现有的组件有冲突,这个时候就可以使用sandbox() 方法安全地加载组件。该方法通过YUI Connection Manager 来获取组件,并且在一个匿名函数中执行。所以,这个方法只能够加载同一个域下的JS。
addModule() 方法 :用来添加自定义的组件,有以下主要参数(具体看这里 ):
name: 组件的名字,必须是独一无二的,而且不能与YUI自带的组件冲突。
type: 组件类型。js 或者 css
path: 组件的路径,一般都是相对于 YUI Loader中的 base 的相对路径。
fullpath: 组件的完整路径。
requires: 所依赖的YUI组件
参数(全部参数介绍请看这里 ):
require :数组,包含了要加载的组件的模块名。
base :加载组件的默认路径,加载组件的时候YUI Loader会先去这里找。相当于系统变量里的path。
onSuccess :函数,加载成功的时候调用。
onFailure :函数,加载失败的时候调用。
varName :如果你加载的是自定义的组件,当组件加载完毕的时候这个变量就会变成可用的。
最后说一下YUI模块名称 ,说白了,就是YUI组件在 YUI Loader中对应的缩略名,这样就方便了加载,比如,你只需要在require 里加上 “dom” 就可以YUI中的DOM组件。全部对应关系请看这里
OK,我就简单地介绍这么多,由于时间和精力的关系,很多地方写得都不是很详细,而且如果太详细了就是完全翻译文档了,也没什么太大意义。想了解更多还是去官方网站 吧。
另外,附送一篇YUI Blog上关于使用 YUI Loader 减少加载文件大小的分析:
Loading YUI: Seeds, Core, and Combo-handling