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);
这样就可以看到效果了,例子在这里
然而这里还是需要手动对相邻的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']});
例子在这里:
用法:
node.every(time,foo,flag)
time:相邻操作的间隔时间
foo:foo(node),每次操作的回调函数,回调参数是node本身,当函数返回false的时候停止循环
flag:true,立即执行,false,不立即执行,默认为true
node.stopTimer()
停止执行最后的一次timer,这里多次执行startTimer的时候会对node的timer进行叠加,并不去重,这个以后在说
node.startTimer()
开始执行,这里多次开始会叠加执行
猜你喜欢
- 我想大家在用Sql2005一般都是.NET2005自带的SQL Server 2005是SQL Server2005 Express版本的,
- Win7或Windows server 2008中IIS7支持ASP+Access解决方法:1. 让IIS7支持ASPWin7或Window
- 在使用操作XML文件时,我们可以使用Load方法直接加载xml文件即可,在ie和ff下通用。但是是XML字符串,则在两种浏览器下就会有所不同
- 从98年某月某日我的第一个个人猪页诞生.到2008年的今天.宣告了我从事设计行业整整十年.十年,很多变化,从摆弄个人猪页到现在以做设计为生,
- 我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。<div id="
- 内容摘要:在本人上一篇教程《彻底弄懂CSS盒子模式五(定位强化练习) 》有讲到一个很酷的链接面板提示的实例制作,那时主要是用到di
- 比如一个汉字也只会算一个字节,在排版时如果全是汉字,好说,反正没什么差别,但是如果 * 作的字符串有汉字又有英文字母时,就不方便了,以下三个函
- 这次我们讨论的是,区分有单选框的选项和普通的选项~~乍听起来,可能不太理解我说了什么,下面举个例子先~~1、标签的单选~~例如QQ秀的支付流
- 一、 网页设计中的对比原则一件网页设计作品由许多元素构成,它们的重要性各不相同,其中一些元素的重要性要高于其它元素。一些相互关联,而另一些则
- 在SQL Server中,为了查询性能的优化,有时我们就需要对数据表通过建立索引的方式,目的主要是根据查询要求,迅速缩小查询范围,避免全表扫
- asp取得字段属性代码:set AdoX = server.createobject("adox.c
- Oracle中有多种方法可以向数据库或服务器文件系统上载文件,这里主要介绍如下三种:Oracle HTTP Server(OHS)的mod_
- 功能:实现网页内容的即时编辑,增加页面的可用性、交互性。方法1:直接通过textarea标签实现,请运行下边代码:<!DOCTYPE
- 4款JavaScript放大镜特效脚本。准确的说,Anythingzoomer和Bezoom才是正宗的放大镜特效,当鼠标悬浮在图片上时,能放
- 动态生成的IFRAME,设置SRC时的,不同位置带来的影响。以下所说的是在IE7下运行的。IE6下也是同样。在这个blog中,直接点击运行代
- 很多朋友想用SQL2000数据库的编程方法,但是却又苦于自己是学ACCESS的,对SQL只是一点点的了解而已,这里我给大家提供以下参考---
- 一个日期联动选择器javascript源码,年月日联动显示,准确显示日期(包括闰年日期),可自定义日期范围。 【select】 先说清空一个
- 这段程序的方法是利用XMLHTTP来读取腾讯网站的相应HTML代码获取QQ的头像,根据这个想法,我们还
- 代码如下:Set Catalog_object= Server.CreateObject("ADO
- 负责Web编写的前端人员,都清楚可以通过W3验证服务功能,来在线验证自己编写的XHTML代码是否正确,在验证期间,最容易出现的错误往往都是在