日期:2014-05-16 浏览次数:20427 次
不论是直接从链接访问服务器获取数据还是使用了AJAX动态请求数据,只要一次性的传输数据量很大,还需要用脚本语言来将数据装入某个控件,都有可能导致显示缓慢,比如树形菜单,不需要太多条数据,200条就足够你等待5秒以上。
而基于实际中用户并不需要一次性看到所有数据,我们可以使用脚本来延缓加载,并且能够保证表象的显示,因为我们需要做的就是及时地显示一部分表面数据。
缓存数据包括二种格式:
一种是用户自定义的外部格式,它不属于缓存延迟加载构件,由用户指定,例如:
function DataObject(id,name,age,gender,edu) ...{
this.id=id;
this.name=name;
this.age=age;
this.gender=gender;
this.edu=edu;
}
?一种是缓存延迟加载器的内部格式,它是缓存延迟加载构件的一部分,代码如下:
function CacheData(params,funces) ...{
this.params=params;
this.funces=funces;
}
?它的目的就是封装用户数据格式:params对应用户自定义数据对象,funces对应的是方法名,解释为缓存一个要执行的方法funces,方法的参数为params.
缓存延迟加载器采用双缓冲区,可以一边操作数据,一边装入数据,特别针对树形数据结构:
var cache = ...{
//加载使用的表数据与大小,用于显示,加载表
list: new Array(),
count: 0,
//装入使用的表数据与大小,用于缓存,缓存表
_list: new Array(),
_count: 0,
//加载使用的当前游标
cursor: 0,
//延缓加载的时间间隔
interval:100,
//一次execute方法后的结束处理函数
endfunc:"endfunc();",
//缓存一条数据到内存
add :function(params,funces)...{
this._list[this._count++]=new CacheData(params,funces);
},
//清空数据缓存
clear:function()...{
this.list=null;
this.count=0;
this._list=new Array();
this._count=0;
},
//获取当前正在加载的一行数据
params :function()...{
return this.list[this.cursor].params;
},
funces :function()...{
return this.list[this.cursor].funces;
},
//延迟加载的执行方法
execute: function() ...{
//将缓存数据 从缓存表移动到加载表
this.list=this._list;
this.count=this._count;
//重置缓存表数据
this._list=new Array();
this._count=0;
//遍历调用方法func并将游标定位在其相应参数
for(var i=0;i<this.count;i++) ...{
this.cursor=i;
eval(this.funces);
}
//执行恢复函数
eval(this.endfunc);
//如果缓存数据,再次延迟加载
if(this._count>0) setTimeout("cache.execute();",interval);
else eval("cache.clear();");
}
}
?在函数funces中参数调用必须使用:
var id = cache.params.id; var name = cache.params.iname;
?