快捷導(dǎo)航

javascript客戶(hù)端解決方案緩存提供程序

更新時(shí)間：2010年07月14日 01:42:44 作者：

這是介紹的是一個(gè)不錯(cuò)的javascript的方面的客戶(hù)端解決方案,可選配支持HTML5本地存儲(chǔ)器.

相信每一個(gè)開(kāi)發(fā)者都知道緩存的重要性。從頭至尾有緩存的后臺(tái)(memcached,xcache等。) 來(lái)減輕db的壓力。對(duì)內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）緩存中希望你的瀏覽器緩存那些不止一次的加載資源。當(dāng)然, 有客戶(hù)端緩存,所以你不要重復(fù)昂貴的操作(即使是算法或大量的運(yùn)算)。

這是介紹的是一個(gè)不錯(cuò)的javascript的方面的客戶(hù)端解決方案,可選配支持HTML5本地存儲(chǔ)器.

Starting Simple

復(fù)制代碼代碼如下:

 
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中設(shè)置并開(kāi)啟，否則將會(huì)報(bào)錯(cuò)。所以一個(gè)簡(jiǎn)單的if else不能滿(mǎn)足需求。

下面我們將增加對(duì)象本地存儲(chǔ)機(jī)制的支持。這個(gè)技術(shù)是借鑒了Christopher Blizzard的一篇不錯(cuò)的文章 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

復(fù)制代碼代碼如下:

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

現(xiàn)在就到了我們的三個(gè)核心方法了，分別是 get, set, 和clear.

Core class functionality

復(fù)制代碼代碼如下:

 
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]; 
} 

}; 

如何運(yùn)用？
注意在這篇文章的開(kāi)始，就說(shuō)了Cache Provider 是可選支配的本地存儲(chǔ)，首先然讓我們看一個(gè)沒(méi)有本地存儲(chǔ)的例子：

getElementsByClassName

復(fù)制代碼代碼如下:

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

備注：下次你調(diào)用類(lèi)函數(shù)的時(shí)候，將會(huì)用預(yù)先編譯好的正則表達(dá)式替代夠建造一個(gè)表達(dá)式。

再舉一個(gè)例子：比如對(duì)于大的應(yīng)用程序需要i18n，你可以緩存一個(gè)編譯好的html字符串進(jìn)入本地存儲(chǔ)中。

復(fù)制代碼代碼如下:

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

除此之外，你開(kāi)可以做很多外部資源緩存到本地的事情，加油:)

您可能感興趣的文章: