日期:2014-05-16 浏览次数:20345 次
不论是直接从链接访问服务器获取数据还是使用了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;
?