【YUI源码学习】YUI 动态加载机制 Get Utility

 

     【注意】 之前的 YUI 分析都是针对 YUI 2.8 版本。

 

  关于动态加载

       先来说说关于动态加载有哪些个方法，以及动态加载有什么作用。

       有时页面的开发，需要加载很多 js 文件。每个 js 文件加载需要消耗很多时间，而动态加载机制可以使 js 文件在需要的时候加载，加快页面的呈现速度。其本质还是将 script element 添加到 Dom 树里面。

      Google 搜出很多动态加载的文章，其实有提到 4 个方法，其实都是添加一个 script 元素到 head 里面。然而都是异步加载。而第四种方法使用 XHR 去请求，可以同步，不过得声明其同步。且这个只能是在同源策略下。

 

  关于YUI Get Utility

看看 Get Utility 通用使用的地方： 翻译自 YUI/Get Utility 官方网站。

 1 ，跨域资源的获取：因为 XMLHttpRequest 是遵守严格的同源策略，通过 XHR 来获取第三方数据需要服务端的代理。如果是能控制或者完全信任的跨域资源，可以不通过服务端代理而直接加载 script 数据从不同源的地方；而 script 文件，可能是典型 json 格式化的数据，在 load 的时候会立马执行。有一点至关重要，如果你加载的 script file 有恶毒的代码，没有安全的机制可以保证用户不受到恶毒代码的影响，因为浏览器会以完全的权限来执行这些代码。所以记住这一点：不要让用户接触到那些不能彻底信任的数据源。

 

2 ，先进的加载方法：

在富客户端应用中，基于用户动态加载需要的 js 文件和 css 文件变得非常有用， Get utility 提供了动态加载资源的功能。（注意：如果是加载 YUI 里面资源，可以使用 YUIloader 来加载， YUILoader 使用 Get Utility 来加载 YUI 组件，并且对解决 YUI 组件依赖问题）

 

 

现在分析一下 YUI 关于动态加载， 首先 YUI Get Utility 是闭包形式实现，只暴露了部分方法和数据。重点使用到的就是 API 里面看到的。 说说闭包的形式，其实就是域的控制灵活使用。

YAHOO.util.Get = function() { //_next 就只能在 YAHOO.util.Get 中使用得到 , 将其封装了。 var _next=function(){ }; //return 里面是可使用 API ； return { css:function(){}, script:function(){}, . . . . . . }; }

 

YUI 使用的也是通过 createElement ，然后 append script 节点或 node 节点来达到加载，然而不同之处在于有对节点onload事件的监听，且是通过监听来达到同步的效果，使script node按照顺序同步加载完 。    

YUI2.8 里面在关于节点加载onload事件监听上有 bug ，也不怪 YUI ，是各浏览器之战留下的后果。这个放到后面说说。

 

加载原理：

YUI 对 script 和 css 的加载 ，可以一次函数里面多个资源 url 加载， 都还是同步的。对于加载而言， YUI 作为事务来处理，当整个发生中止的时候，会调用定制的 onFailure 方法。 YUI Get 按照 url 定义的顺序一个一个的加载，这个的设计流程是对上一次资源 url 进行 onload 监听，当加载完 才又开始加载下一个 url 资源。

一个是 _next function 另一个是 _track function 。在 next function 中 调用一次，就对 url 数组 shift 一下，去掉第一个元素，且调用 _track 来监听。而在 _track function 监听中， url 的 onloaded 事件处理中对 _next 进行调用，亦是调用下一个 url 。

 

 

再来说说 YUI2.8 中的 bug 存在地方。

先说说关于动态加载中 append node 后，对 node 进行onload监听。 script node 和 css link node 的监听不同，且在各个浏览器中也不同。

 

此图来源 http://www.zachleat.com/web/2010/07/29/load-css-dynamically/

     上图解释：

在 javascript 和 css 这些资源同源的情况下，可以通过 XHR 的方式来获取数据，浏览器都为 onreadystatechange   Event ；

而在不同源的情况下，加载 script node 且进行监听， firefox 和 ie 的 事件名ie为onreadystatechange，firefox为onload ；

css node的监听ie 做的不错，还是和script一样，而firefox却没有 此监听。

 

用firefox和ie这样来区别说明有点浅薄了，在YUI源码中是针对其浏览器所用内核来各个区别对待，

 if (ua.ie) {
            n.onreadystatechange = function() {
               。。。。。。
            };
        } else if (ua.webkit) {

            if (type === "script") {
                   if (ua.webkit >= 420) {
                     n.addEventListener("load", function() {
                      。。。。。。
                     });
               //这里使用轮询的方法来确认script资源加载上去
                } else {
                    var q = queues[id];
                    if (q.varName) {
                        var freq=YAHOO.util.Get.POLL_FREQ;
                        q.maxattempts = YAHOO.util.Get.TIMEOUT/freq;
                        q.attempts = 0;
                        q._cache = q.varName[0].split(".");
                        q.timer = lang.later(freq, q, function(o) {
                            var a=this._cache, l=a.length, w=this.win, i;
                            for (i=0; i<l; i=i+1) {
                                w = w[a[i]];
                                if (!w) {
                                    // if we have exausted our attempts, give up
                                    this.attempts++;
                                    if (this.attempts++ > this.maxattempts) {
                                        var msg = "Over retry limit, giving up";
                                        q.timer.cancel();
                                        _fail(id, msg);
                                    } else {
                                    }
                                    return;
                                }
                            }
                            q.timer.cancel();
                            f(id, url);
                    }, null, true);
                    } else {
                        lang.later(YAHOO.util.Get.POLL_FREQ, null, f, [id, url]);
                    }
                }
            } 

        // FireFox and Opera support onload (but not DOM2 in FF) handlers for
        // script nodes.  Opera, but not FF, supports the onload event for link
        // nodes.
        } else { 
            n.onload = function() {
                f(id, url);
            };
        }

 

  下面代码截至 YUI Get源码  _track function 里面

// FireFox and Opera support onload (but not DOM2 in FF) handlers for // script nodes. Opera, but not FF, supports the onload event for link // nodes. 、、、 } else { n.onload = function() { f(id, url); }; }

图来源的文章 是对 css node 进行伪监听。有兴趣的去看看。

YUI 2.8 中并没有对firefox的css link node实现监听，实现同步，所以一次加载中仅仅能加载一个css资源，在API中YAHOO.util.Get.css的url参数仅为<string> 而不像script 方法中的url参数为<string|string[]>

 

 以上仅个人浅见，有错误的地方欢迎指正。