扩展YUI Loader

秦歌 — Wed, 26 Mar 2008 15:45:24 +0000

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

两种方法的优劣比较