日期:2014-05-16  浏览次数:20339 次

使用Javascript缓存数据与延迟加载收藏

不论是直接从链接访问服务器获取数据还是使用了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;

?