提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript客户端解决方案缓存提供程序

JavaScript客户端缓存程序解决方案 提供
2023-06-13 09:14:23 时间
相信每一个开发者都知道缓存的重要性。从头至尾有缓存的后台(memcached,xcache等。)来减轻db的压力。对内容分发网络（CDN）缓存中希望你的浏览器缓存那些不止一次的加载资源。当然,有客户端缓存,所以你不要重复昂贵的操作(即使是算法或大量的运算)。

这是介绍的是一个不错的javascript的方面的客户端解决方案,可选配支持HTML5本地存储器.

StartingSimple
复制代码代码如下:

functionCacheProvider(){
//valueswillbestoredhere
this._cache={};
}Featuredetectonlocalstorage
try{
CacheProvider.hasLocalStorage=("localStorage"inwindow)&&window["localStorage"]!==null;
}catch(ex){
CacheProvider.hasLocalStorage=false;
}

这里使用trycatch的主要原因是尽管firefox支持该属性，但是需要在about:config中设置并开启，否则将会报错。所以一个简单的ifelse不能满足需求。

下面我们将增加对象本地存储机制的支持。这个技术是借鉴了ChristopherBlizzard的一篇不错的文章Savingdatawithlocalstorage?forwhichthosewhodidn"tknow,youcanonlystorestring"sintolocalstorage.Thuswehavethis…

in/outJSONparsing
复制代码代码如下:

if(CacheProvider.hasLocalStorage){
Storage.prototype.setObject=function(key,value){
this.setItem(key,JSON.stringify(value));
};

Storage.prototype.getObject=function(key){
returnJSON.parse(this.getItem(key));
};
}

现在就到了我们的三个核心方法了，分别是get,set,和clear.

Coreclassfunctionality
复制代码代码如下:
CacheProvider.prototype={

/**
*{String}k-thekey
*{Boolean}local-getthisfromlocalstorage?
*{Boolean}o-isthevalueyouputinlocalstorageanobject?
*/
get:function(k,local,o){
if(local&&CacheProvider.hasLocalStorage){
varaction=o?"getObject":"getItem";
returnlocalStorage[action](k)||undefined;
}else{
returnthis._cache[k]||undefined;
}
},

/**
*{String}k-thekey
*{Object}v-anykindofvalueyouwanttostore
*howeveronlyobjectsandstringsareallowedinlocalstorage
*{Boolean}local-putthisinlocalstorage
*/
set:function(k,v,local){
if(local&&CacheProvider.hasLocalStorage){
if(typeofv!=="string")){
//makeassumptionifit"snotastring,thenwe"restoringanobject
localStorage.setObject(k,v);
}else{
try{
localStorage.setItem(k,v);
}catch(ex){
if(ex.name=="QUOTA_EXCEEDED_ERR"){
//developerneedstofigureoutwhattostartinvalidating
thrownewException(v);
return;
}
}
}
}else{
//putinourlocalobject
this._cache[k]=v;
}
//returnournewlycacheditem
returnv;
},

/**
*{String}k-thekey
*{Boolean}local-putthisinlocalstorage
*{Boolean}o-isthisanobjectyouwanttoputinlocalstorage?
*/
clear:function(k,local,o){
if(local&&CacheProvider.hasLocalStorage){
localStorage.removeItem(k);
}
//deleteinbothcaches-doesn"thurt.
deletethis._cache[k];
}

};

如何运用？
注意在这篇文章的开始，就说了CacheProvider是可选支配的本地存储，首先然让我们看一个没有本地存储的例子：

getElementsByClassName
复制代码代码如下:
varcache=newCacheProvider;

window.getElementsByClassName=getElementsByClassName||function(c){
varreg=cache.get(c)||cache.set(c,newRegExp("(?:^|s+)"+c+"(?:s+|$)"));
varelements=document.getElementsByTagName("*");
varresults=[];
for(vari=0;i<elements.length;i++){
if(elements[i].className.match(reg)){
results.push(elements[i]);
}
}
returnresults;
};

备注：下次你调用类函数的时候，将会用预先编译好的正则表达式替代够建造一个表达式。


再举一个例子：比如对于大的应用程序需要i18n，你可以缓存一个编译好的html字符串进入本地存储中。
复制代码代码如下:
vari18nCache=newCacheProvider;

if(i18nCache.get("topnav")){
$("#nav").html(i18nCache.get("topnav"));
}else{
ajax("top-nav.tmpl",function(html){
i18nCache.set("topnav",html);
$("#nav").html(i18nCache.get("topnav"));
});
}

除此之外，你开可以做很多外部资源缓存到本地的事情，加油:)

相关文章