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

使用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;

?