本文主要是介绍YUI Loader，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
具体用法“
http://developer.yahoo.com/yui/yuiloader/#start
YUI Loader
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
扩展YUI Loader
YUI Loader 是YUI的动态载入外部Javascript和CSS文件的整体解决方案。它的可靠、安全、高效，优化了页面的呈现速度，实现了外部Js和CSS的按需加载。
在YUI 2.4.0到2.5.1版本中，YUI Loader 通过其addModule() 方法只能配置一个YUI Loader实例的加载模块信息，无法配置全局的加载模块信息。实际中，能够全局的配置加载文件的模块信息对于统一维护非常的重要，特别是在静态文件服务器设置了上传文件不可以修改和删除情况下。下面是解决这个问题的两个方法：
方法1：修改YUI Loader源文件，引入YAHOO_config.load来配置全局信息
在YUI两个全局变量之一的 YAHOO_config 中,有一个load 属性是用来配置YUI Loader的全局信息的，但是遗憾的是仅仅是2.4.0之前的版本支持。
1、修改YUI Loader源文件
var Y=YAHOO, util=Y.util, lang=Y.lang, env=Y.env;
/*
*在上面一行代码的位置下面加上下面的代码：
*判断当YAHOO_config存在且有load属性时，把YAHOO_config.load赋值给变量Y_load
*/
if('undefined'!== typeof YAHOO_config){
if(lang.hasOwnProperty(YAHOO_config,'load')){
var Y_load = YAHOO_config.load;
}
}
...
this.base = YUI.info.base;
/*把上面一行修改为下面一行，这样可以用过YAHOO_config.load.base来指定YUI组件的路径*/
this.base = (lang.hasOwnProperty(Y_load,'base'))?Y_load.base:YUI.info.base;
...
this.moduleInfo = lang.merge(YUI.info.moduleInfo);
/*把上面一行修改为下面一行，这样可以用过YAHOO_config.load.moduleInfo来指定YUI组件的路径*/
this.moduleInfo = (lang.hasOwnProperty(Y_load,'moduleInfo'))?
lang.merge(YUI.info.moduleInfo,Y_load.moduleInfo):lang.merge(YUI.info.moduleInfo);
2、在YUI Loader文件前写下如下配置文件：
YAHOO_config = {
load : {
base : 'http://cn.yui.yahooapis.com/2.5.1/build/',
/*
* 通用的非YUI组件和不自动加载皮肤的YUI组件
* @name string
* @type string
* @fullpath string
* @requires array
* @optinal array
* @skinnable boolean
*/
moduleInfo : {
/*
*YUI的组件中，有皮肤的组件使用时都会自动加载皮肤
*比如require(['container'])时，会加载container.js，也会加载container.css
*但是实际应用中，往往不会直接使用YUI的默认皮肤
*利用YUI Loader本身的skins属性设置
，只能在具体的YUI实例中使用，且需要满足YUI的文件结构
*利用insert({},'js')方法虽然只能加载Js，但如何require()方法中的CSS也会被过滤掉
*所以最好的方法是全局性的把其skinnable属性值修改为false
*/
'container': {
'type': 'js',
'path': 'container/container-min.js',
'requires': ['dom', 'event'],
'optional': ['dragdrop', 'animation', 'connection'],
'supersedes': ['containercore'],
'skinnable': false
},
'dwncontainercss' : {
'type' : 'css',
'fullpath' : '/lab/2008/extend-yuiloader/container.css'
},
'dwncarouselcss':{
'name' : 'dwncarouselcss',
'type' : 'css',
'fullpath' : '/lab/2008/extend-yuiloader/carousel.css'
},
'dwncarousel':{
'type' : 'js',
'fullpath' : '/lab/2008/extend-yuiloader/carousel-min.js',
'requires':['dwncarouselcss','yahoo','event','dom',
'containercore','animation']
}
}
}
}
请看演示实例1
方法2：利用YAHOO.lang.extend方法封装一个新的Loader
YAHOO.namespace('CN.util');
/* start:YAHOO.CN.util.YUILoader */
YAHOO.CN.util.YUILoader = function(o){
YAHOO.CN.util.YUILoader.superclass.constructor.call(this,o);
this.base = 'http://cn.yui.yahooapis.com/2.5.1/build/';
this.addModule({
'name': 'container',
'type': 'js',
'path': 'container/container-min.js',
'requires': ['dom', 'event'],
'optional': ['dragdrop', 'animation', 'connection'],
'supersedes': ['containercore'],
'skinnable': false
});
this.addModule({
'name' : 'dwncontainercss',
'type' : 'css',
'fullpath' : '/lab/2008/extend-yuiloader/container.css'
});
this.addModule({
'name' : 'dwncarouselcss',
'type' : 'css',
'fullpath' : '/lab/2008/extend-yuiloader/carousel.css'
});
this.addModule({
'name' : 'dwncarousel',
'type' : 'js',
'fullpath' : '/lab/2008/extend-yuiloader/carousel-min.js',
'requires':['dwncarouselcss','yahoo','event','dom',
'containercore','animation']
});
}
YAHOO.lang.extend(YAHOO.CN.util.YUILoader,YAHOO.util.YUILoader);
/* end: YAHOO.CN.util.YUILoader */
YAHOO.CN.util.YUILoader的使用和YAHOO.util.YUILoader的使用 没有任何区别。请看演示实例2
两种方法的优劣比较
方法1的缺点是需要修改YUI Loader的源文件，而方法二2只是外层增加一个壳，比较友好和保险，但方法1直接修改配置文件的方法比方法2每次实例化都需要通过特定方法修改配置文件要高效，特别是当添加或者修改的配置模块间也有依赖关系的时候，方法2很可能会因为过度运算而死掉。例如把实例中的模块container 依赖于dwncontainercss的时候，方法1没有问题（请看演示实例3 ），但方法2下浏览器会提示脚本忙（请看演示实例4 ）。
这篇关于YUI Loader的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
