YUI学习笔记：YUI Loader

最新推荐文章于 2018-09-14 18:05:00 发布

转载最新推荐文章于 2018-09-14 18:05:00 发布 · 1.1k 阅读

文章标签：

#yui #yahoo #sandbox #manager #脚本 #insert

javascript 专栏收录该内容

34 篇文章

订阅专栏

YUI Loader组件可按依赖顺序加载YUI组件，避免重复加载已存在的组件，并自动使用集成文件减少HTTP请求，提高加载效率。

转自: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