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

131 阅读 0 评论 87 点赞

我是靠谱客的博主淡然美女，最近开发中收集的这篇文章主要介绍javascript客户端解决方案缓存提供程序，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

Starting Simple

复制代码代码如下:

 
function CacheProvider() { 
// values will be stored here 
this._cache = {}; 
}Feature detect on local storage 
try { 
CacheProvider.hasLocalStorage = ('localStorage' in window) && window['localStorage'] !== null; 
} catch (ex) { 
CacheProvider.hasLocalStorage = false; 
} 

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

下面我们将增加对象本地存储机制的支持。这个技术是借鉴了Christopher Blizzard的一篇不错的文章 Saving data with local storage – for which those who didn't know, you can only store string's into local storage. Thus we have this…

in / out JSON parsing

复制代码代码如下:

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

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

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

Core class functionality

复制代码代码如下:

 
CacheProvider.prototype = { 

/** 
* {String} k - the key 
* {Boolean} local - get this from local storage? 
* {Boolean} o - is the value you put in local storage an object? 
*/ 
get: function(k, local, o) { 
if (local && CacheProvider.hasLocalStorage) { 
var action = o ? 'getObject' : 'getItem'; 
return localStorage[action](k) || undefined; 
} else { 
return this._cache[k] || undefined; 
} 
}, 

/** 
* {String} k - the key 
* {Object} v - any kind of value you want to store 
* however only objects and strings are allowed in local storage 
* {Boolean} local - put this in local storage 
*/ 
set: function(k, v, local) { 
if (local && CacheProvider.hasLocalStorage) { 
if (typeof v !== 'string')) { 
// make assumption if it's not a string, then we're storing an object 
localStorage.setObject(k, v); 
} else { 
try { 
localStorage.setItem(k, v); 
} catch (ex) { 
if (ex.name == 'QUOTA_EXCEEDED_ERR') { 
// developer needs to figure out what to start invalidating 
throw new Exception(v); 
return; 
} 
} 
} 
} else { 
// put in our local object 
this._cache[k] = v; 
} 
// return our newly cached item 
return v; 
}, 

/** 
* {String} k - the key 
* {Boolean} local - put this in local storage 
* {Boolean} o - is this an object you want to put in local storage? 
*/ 
clear: function(k, local, o) { 
if (local && CacheProvider.hasLocalStorage) { 
localStorage.removeItem(k); 
} 
// delete in both caches - doesn't hurt. 
delete this._cache[k]; 
} 

}; 

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

getElementsByClassName

复制代码代码如下:

 
var cache = new CacheProvider; 

window.getElementsByClassName = getElementsByClassName || function(c) { 
var reg = cache.get(c) || cache.set(c, new RegExp("(?:^|s+)" + c + "(?:s+|$)")); 
var elements = document.getElementsByTagName('*'); 
var results = []; 
for (var i = 0; i < elements.length; i++) { 
if (elements[i].className.match(reg)) { 
results.push(elements[i]); 
} 
} 
return results; 
}; 

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

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

复制代码代码如下:

 
var i18nCache = new CacheProvider; 

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')); 
}); 
} 

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