YUI Loader

最新推荐文章于 2021-03-11 19:45:27 发布

折腾数据折腾代码

最新推荐文章于 2021-03-11 19:45:27 发布

阅读量1.9k

点赞数

分类专栏： Web前端文章标签： yui yahoo animation css sandbox string

本文链接：https://blog.csdn.net/shine0181/article/details/6291811

版权

Web前端专栏收录该内容

88 篇文章 0 订阅

订阅专栏

具体用法“

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 ）。