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