注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

使用YUI Loader加载JS  

2011-05-09 22:51:08|  分类: Yui |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

最近公司开始培训自己的框架 (自己所在项目组一直使用YUI2.8)讲如何加载JS和CSS资源,提到一个方法,说白了就是封装YUI的Loader。

其实大家使用加载函数都是两个目的

1.使用加载函数比<script>标签方式看着要优雅很多,并且它可以防止JS阻塞。

2.按需加载,便于JS的管理。


前几天玩了一下labJS,感觉不错,但是用YUI Loader做了一个Demo 加载YUI DataTable,它的速度比labJS的Demo足足快了1秒。

翻看loader源码得出loader运行原理:

Loader 的基本工作原理

1. 将 YUI 自带的所有 modules 信息,存放在一个很大的数据对象里。

2. 根据传入参数和上面的数组,将需要加载的模块按依赖关系排好顺序。核心方法是calculate:

封装成了 6 个辅助方法,其中_sort方法最考验算法。

3. 按照依赖关系排好顺序的模块信息存放在this.sorted属性中。接下来,调用 get 模块加载即可。

(原理摘自 http://blog.csdn.net/phphot/archive/2009/07/06/4325597.aspx

这只是一个简单的过程!!!

那么get模块如何工作呢?如何避免JS阻塞呢?

  _node = function(type, attr, win) {
        var w = win || window, d=w.document, n=d.createElement(type), i;
        for (i in attr) {
            if (attr.hasOwnProperty(i)) {
                n.setAttribute(i, attr[i]);
            }
        }
        return n;
    },
    _scriptNode = function(url, win, attributes) {
        var o = {
            id:   "yui__dyn_" + (nidx++),
            type: "text/javascript",
            src:  url
        };
        if (attributes) {
            lang.augmentObject(o, attributes);
        }
        return _node("script", o, win);
    },
注意_node和_scriptNode两个私有方法,其实get使用的是动态生成<script>标签的方式避免JS阻塞。

 

再看我写的一个Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Complex Example of Multiple Features</title>
<style type="text/css">
body {
    margin:0;
    padding:0;
}
</style>
<script src="../../build/yuiloader/yuiloader-min.js"></script>
<!--begin custom header content for this example-->
<!--end custom header content for this example-->
</head>
<body >

<h1>Complex Example of Multiple Features</h1>
<div >
    <p>A demonstration of several DataTable features combined in one instance. The
features implemented in this example require the Drag and Drop and Animation
utilities.</p>           
</div>
<div id="complex"></div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">

var loader = new YAHOO.util.YUILoader({
        onSuccess: function(){},
        base: "../../build/"
    });
    loader.addModule({        
        name: 'data',
        type: 'js',
        fullpath: 'assets/js/data.js'
    });
    loader.addModule({        
        name: 'init',
        type: 'js',
        fullpath: './js/init.js',
        requires: ["yahoo-dom-event","dragdrop","animation","element","paginator","datasource", "datatable"]
    });
    loader.require("data");
    loader.require("init");
    loader.insert();
</script>
</body>
</html>

一个简单的Datatable例子

 

参考文献 http://www.zhuoqun.net/html/y2008/1118.html

  评论这张
 
阅读(400)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017