YUI 3.x 中的Loader组件
skinnable: true,
submodules: {
在YUI3的种子文件中集成了Loader。YUI3的模块调用都是通过它实现的，如: YUI().use('node', 'base', func)。其实也可以单独使用它。
loader的配置信息：
var loader_config = {
//指定加载完成后执行的回调方法
onSuccess: function(){},
//指定当加载失败时执行的回调方法
onFailure: function(){},
//指定当每个文件加载完时执行的回调方法
onProgress: function(){},
//指定当一个文件加载超时时执行的回调方法
onTimeout: function(){},
//所有回调方法执行的上下文对象。默认为YUI实例对象
context: Y,
//该值将被传到所有回调方法中
data: null,
//元素ID或HTML元素。在指定的HTML元素前插入新的文件
insertBefore: '',
//加载文件指定的编码。默认为UTF-8
charset: 'UTF-8',
//加载组件的基本目录。默认是Y.Env.meta.base(值为http://yui.yahooapis.com/[YUI版本号]/build/)
base: '',
//combo handler的地址。默认是Y.Env.meta.comboBase(值为http://yui.yahooapis.com/combo?)
comboBase: '',
//表示是否使用combo handler加载JS文件
combine: true,
//忽略加载注册在YUI全局上的模块。根据Y.Env.mods判断
ignoreRegistered
//模块路径的根目录。默认为Y.Env.meta.root
root: '',
//超时。默认0。如果指定，该值将用于Get组件，超时后触发超时事件
timeout: 0,
//强制加载的模块列表(array)
force: ['base'],
//忽略加载的模块，指定的模块如果出现在依赖树中将不会被加载
ignore: ['io'],
//默认为true。加载的rollup模块的子模块数量超过3个，则加载rollup模块
allowRollup: true
//过虑所加载模块的路径。调试时用到。
filter: {
searchExp: '-min.js',
replaceStr: '-debug.js'
},
//要加载的模块
required: {
node: true,
io: true
},
//模块信息。默认在Y.Env.meta.modules下
//可以将自定义的module信息merge在一起，modules = Y.merge(Y.Env.meta.modules, myModuleInfo)
moduleInfo: modules,
//皮肤信息。默认在Y.Env.meta.skin
skin: {},
//rollup模块列表(object)。默认从Y.Env.meta.modules中提取
rollups: {},
//加载依赖的可选模板。默认false
loadOptional: false,
//当insert()或calculate()执行时，产生的加载模板的数组
sorted: [],
//已加载过的模块。
loaded: {},
//指示当insert被调用时，依懒树需要重新计算。默认为true
dirty: ture,
//当前所有插入的模块
inserted: {}
};
var loader = new myLib.Loader(loader_config);
属性很多，其实常用的就是那么几个，对比一下YUI 2的：
YUI 2:
var loader = new YAHOO.util.YUILoader({
base: '/yui/build/',
require: ['tabview', 'colorpicker'],
loadOptional: true,
timeout: 10000,
combine: true,
onSuccess: function(){}
});
loader.insert();
YUI 3:
var loader = new Y.Loader({
base: '/yui/build/',
required: {
node: true,
io: true
},
loadOptional: true,
timeout: 10000,
combine: true,
onSuccess: function(){}
});
loader.insert();
差别不大，主要是指定加载模块列表的方式上(加粗部分)。其它不同之处是上下文对象的属性名，YUI3中叫context，YUI2中叫scope，另外，YUI3中放弃了varName这个属性。
自定义模块的配置属性：
var submod1 = {
//必选项, 模块名
name: 'submod_name',
//类型，默认为‘js’。可以设为'js'或'css'
type: 'js',
//必选项，文件相对路径(相对base定义的根路径)
path: ‘filedir/file.js’,
//可选。依懒的模块列表(array)
requires: ['node', 'animation'],
//可选。相关的模块列表(array)
optional: ['io', 'dd'],
//将替代的模块列表(array)。如果自定义模块是rollup模块，这里指定它将替代的模块
supersedes: [],
//在指定的模块列表后面参加(array)。
after: [],
//可替代的模块数超过设定，则自动用rollup模块替代
rollup: 3,
//文件全路径，定义此项将代替path的设置
fullpath: '',
//可选。是否调入皮肤文件
//可选。包含的子模块列表(object)
‘sub-submod1’: {
requires: ['node', 'base']
}
}
};
对比YUI 2自定义模块的配置属性，YUI 3主要增加对rollup模块的定义(即由一组子模块组成的模块)。当allowRollup为true时，同时请求的子模块的数量大于rollup设定的数量，就加载rollup模块。
添加自定义模块：
loader.addModule(submod1);
添加到加载模块列表中：
loader.require(['submod_name']);
执行加载:
loader.insert();
通过这种方式加载外部资源文件，最大好外是性能提高了（相关介绍:http://bit.ly/HDN4u），同时管理起来很方便。
六月 1st, 2009 at 7:09 上午
[...] 1. YUI 3中的Loader组件 http://hikejun.com/blog/?p=214 2. YUI Team的Todd Kloots讲“Developing an Accessible Web 2.0 Widget Framework” [...]