js面向对象编程:数据的缓存

   js也可以通过缓存数据,来加快处理速度。在必要的时候使用空间还换取时间还是值得的。例如需要很长时间才能完成的计算,就可以把计算结果缓存到客户端,以后就可以直接使用缓存的计算结果,不在重复计算。

1简单函数的计算结果的缓存 2递归函数的计算结果的缓存  3Ajax读取数据的缓存


1简单函数的计算结果的缓存

例如:

     //共用函数,封装内部调用,缓存计算结果
     function memorize(f)
		 {
		  var cache={};
		  return function(){
		   var key=arguments.length+Array.prototype.join.call(arguments,",");//参数长度和参数作为属性值
		   if(key in cache) //存在则直接读取缓存数据
		   {
		     return cache[key];
		   }
		   else
		   {
		     return cache[key]=f.apply(this,arguments);//不存在,则计算,并缓存计算结果
		   }
		  }
		 }
具体使用
	 //模拟需要很长时间的计算的函数
    function TestFunction(x)
	{
	  return x*x;
	}
	
	  //测试,调用
	  function test(){       
		   var t=memorize(TestFunction);
		     var k=t(6);//	第一次调用需要计算
		     var k2=t(6);//第二次直接读取换缓存,不在计算
			  alert(k2);
	     }

2递归函数的计算结果的缓存

具体使用

 function test2(){       
		   var t=memorize( function(x){//递归函数计算X的阶乘
		     if(x<=0){return 1;}
	         else{ return x*t(x-1) }
		   });
		     var k=t(6);//缓存了6至1的阶乘		   
		     var k2=t(7);//只需要调用一次,计算6阶乘时使用了缓存
			  alert(k2);
	     }

3Ajax读取数据的缓存

  对于Ajax的缓存也可以使用类似的方式,其实还是从https://github.com/devbridge/jQuery-Autocomplete中学习来的

   原理其实和上边的是一样的。

 核心部分整理如下:

      function Autocomplete()
{
   this.cachedResponse = {};//缓存的数据保存的容器
   this.badQueries = [];//查询后,没有满足条件的查询

}	  
   Autocomplete.prototype.clearCache = function ()//清空缓存
   {
      this.cachedResponse = {};
     this.badQueries = [];          
  },
  Autocomplete.prototype.getSuggestions=function (q) {//读取数据
            var response,
                that = this,
                options = that.options,
                serviceUrl = options.serviceUrl,
                data,
                cacheKey;
            options.params[options.paramName] = q;
            data = options.ignoreParams ? null : options.params;
            cacheKey = serviceUrl + '?' + $.param(data || {});//缓存的键是URL和传递的参数组成
            response = that.cachedResponse[cacheKey];//获取缓存的数据
            if (response && $.isArray(response.suggestions)) {//如果有缓存
                that.suggestions = response.suggestions;
                that.suggest();
            } else if (!that.isBadQuery(q)) {// 没有查询过,而且不是查询后没有满足条件的查询             
                that.currentRequest = $.ajax({//没有缓存通过Ajax读取数据
                    url: serviceUrl,
                    data: data,
                    type: options.type,
                    dataType: options.dataType
                }).done(function (data) {
                    that.currentRequest = null;
                    that.processResponse(data, q, cacheKey);//缓存数据
                    options.onSearchComplete.call(that.element, q);
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    options.onSearchError.call(that.element, q, jqXHR, textStatus, errorThrown);
                });
            }
        }

可以看到核心还是和上边的情况是一样的,只是缓存数据的键变成了Ajax的URL和传递的参数

  

js面向对象编程:数据的缓存,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。