taobao cdn的缓存？

来源：UEDMAGAZINE 时间：2009-09-19 17:21:00　

jquery有一个插件叫Timer，很有意思，咱来实现一个简版的yui3的node timer。但还是应当首先交代下yui3的node扩展的一些事情，yui3 beta在实现上和pre版相比有很大不同，其中就包括yui原生元素的扩展方式的实现，之前在yui3还是pre的时候写过一篇yui3的链式调用的文章，阐述如何给原生的Node增加自定义方法，也就是实现了一个类似Y.Node.get('#id').fuck()。

在pre版需要使用Node.addDOMMethod方法添加声明，而在yui3beta版这个方法就被去掉了，干脆直接通过在Y.Node.prototype上挂载新方法来实现扩展，这样确实方便了许多，自然，yui对Node的保护也变的较为脆弱，岂不是只通过Y.Node.prototype就可以重载原生的接口？但yui3内在的元素比如node和dom之间的继承的实现仍然采用了pre的思路，只是将那个addDomMethod改成了语义更通用的Y.Node.importMethod（需要扩展的不只有Dom节点）。

再来看node定时器的实现，这里我要实现两个div宽度增长这样一个功能，而且两个div之间的行为不应当相互影响，就类似两个线程同时执行不相互影响。直接裸写代码就应当这样。这里有一个需要注意的地方，就是短时间连续的dom操作可能会造成浏览器假死，就是说实际dom操作已经完成，但在页面上看不到效果，原因在这里。

grow函数的实现：

var grow = function(id){
    setTimeout(function(){
        var _width = Number(Y.Node.get('#'+id).getStyle('width').replace('px',''));
        if(_width >= 500)return;
        Y.Node.get('#'+id).setStyle('width',(_width+1).toString()+'px').
            set('innerHTML',(_width+1).toString());
        setTimeout(arguments.callee,0);
    },0);

这样就可以看到效果了，例子在这里

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Keywords" content="简单的XHTML页面" /><meta name="Description" content="这是一个简单的XHTML页面" /><title>简单的XHTML页面 - asp之家 www.Aspxhome.com</title><script type="text/javascript" src='http://cn.yimg.com/i/yui/3.0.0b1/build/yui/yui-min.js'></script><style>div {height:20px;width:0px;}#t1 {background:green}#t2 {background:blue}</style></head><body><button id="b1">执行过程a</button><button id="b2">执行过程b</button><button id="b3">同时执行ab</button><button id="b4">clear</button><div id="t1"></div><div id="t2"></div></body><script></script></html>

然而这里还是需要手动对相邻的dom操作做settimeout的hack，这里实现了一个everyTime的扩展，可以通过

Y.Node.get('#id').everyTime(10,function(node){
//your code here
},false);

这样就将settimeout的方法的hack封装进node中，不用写那些晦涩难懂的settimeout和callee了。

实现的代码是这样的：

YUI.add('node-timer',function(Y){
    Y.Node.prototype.everyTime = function() {
        var node = this;
        node._ttime = arguments[0];
        if(typeof arguments[1] == 'function'){
            node._timer_f = arguments[1];
        }else {
            throw new TypeError("function must be required");
            return false;
        }
        var _run_now = (arguments[2] == false)?false:true;
        if(_run_now){
            node.startTimer();
        }
    };
    Y.Node.prototype.stopTimer = function(){
        var node = this;
        setTimeout(function(){
            if(!node._timer)return false;
            clearTimeout(node._timer);
        },0);
    };
    Y.Node.prototype.startTimer = function(){
        var node = this;
        node._timer = setTimeout(function(){
            if(node._timer_f(node) == false){
                clearTimeout(node._timer);
                return false;
            }
            node._timer = setTimeout(arguments.callee,node._ttime);
        },node._ttime);
    };
},'',{requires:['node']});

例子在这里：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Keywords" content="简单的XHTML页面" /><meta name="Description" content="这是一个简单的XHTML页面" /><title>简单的XHTML页面 - asp之家 www.aspxhome.com</title><script type="text/javascript" src='http://cn.yimg.com/i/yui/3.0.0b1/build/yui/yui-min.js'></script><style>div {height:20px;width:0px;}#t1 {background:green}#t2 {background:blue}</style></head><body><button id="b1">执行过程a</button><button id="b2">stop过程a</button><br /><button id="b3">执行过程b</button><button id="b4">stop过程b</button><br /><button id="b5">同时执行ab</button><button id="b6">clear</button><div id="t1"></div><div id="t2"></div></body><script></script></html>

用法：

node.every(time,foo,flag)
time：相邻操作的间隔时间
foo：foo(node)，每次操作的回调函数，回调参数是node本身，当函数返回false的时候停止循环
flag：true，立即执行，false，不立即执行，默认为true

node.stopTimer()
停止执行最后的一次timer，这里多次执行startTimer的时候会对node的timer进行叠加，并不去重，这个以后在说

node.startTimer()
开始执行，这里多次开始会叠加执行

标签：Timer,插件,jquery,缓存

投稿

taobao cdn的缓存？

猜你喜欢

用户体验杂谈

23条科学设计你网站的方法

asp查询ip地址源代码

在应用环境中如何构造最优的数据库模式

sqlserver中查询横表变竖表的sql语句简析

SQL中JOIN和UNION区别、用法及示例介绍

asp文章上一篇,下一篇实现代码

Javascript 利用 DOM 特性的两个小技巧

服务器端控件是如何操作的？

利用sql函数生成不重复的订单号的代码

智能录入表格[适合BS模式项目的录入页面]

mysql慢查询的分析方法

CSS应用的必要步骤：样式重设

合理关闭XHTML标签

实战手记：让百万级数据瞬间导入SQL Server

如何对MySQL数据库表进行锁定

小议JavaScript泛式框架架构的逻辑形式

解密SQL Server数据库系统的编译

mysql主从服务器配置特殊问题

ASP中DLL的调试环境配置全攻略