看到這個(gè)內(nèi)容的時(shí)候,很吃驚,其實(shí)我在以前看到過一個(gè)R開頭的網(wǎng)站時(shí)(記不清了,實(shí)在記不清了),他用JS做了一個(gè)cache函數(shù),對(duì)函數(shù)做了緩存。還用了斐伯拉切函數(shù)做了測(cè)試。后來我根據(jù)他寫的代碼用jQuery寫了一個(gè)類似的插件(它是把方法注冊(cè)到了window對(duì)象里,所以加快了一些速度)。后來感覺這樣的方法也同樣可以用在數(shù)據(jù)上,又根據(jù)這樣的想法寫了一個(gè)存儲(chǔ)數(shù)據(jù)的cache函數(shù)。也分別用在了兩個(gè)不同的項(xiàng)目里。
如今又看到有人寫這樣類似的東西,就把他貼上來進(jìn)行分享。
文章的內(nèi)容來自:
原文如下:http://www./article.asp?id=1295
在jQuery中可以使用data()來給元素存儲(chǔ)臨時(shí)的變量: // jQuery: // Set data: $(elem).data('customProperty', 12345); // Get data: $(elem).data('customProperty');
在mootools中可以使用store()來給元素存儲(chǔ)臨時(shí)的變量: // MooTools: // Set data: elem.store('customProperty', 12345); // Get data: elem.retrieve('customProperty');
下面我們用JavaScript 自己動(dòng)手寫一個(gè): (function(){
var cache = [0], expando = 'data' + +new Date();
function data(elem) {
var cacheIndex = elem[expando], nextCacheIndex = cache.length;
if(!cacheIndex) { cacheIndex = elem[expando] = nextCacheIndex; cache[cacheIndex] = {}; }
return cache[cacheIndex];
}
window.data = data;
})();
使用: var myElem = document.getElementById('id'); // 設(shè)置data: data(myElem).customProperty = 12345; // 獲取 data: data(myElem).customProperty; // returns 12345
// 用其他的變量 data(myElem).info = { a : 123, b : [4,5,6] };
這個(gè)腳本其實(shí)很簡(jiǎn)單,就是往cache 數(shù)組里添加 下標(biāo) 元素。 默認(rèn)cache=[0] ,當(dāng) elem[expando] 沒有獲取到時(shí),則往數(shù)組里 添加一個(gè)下標(biāo),同時(shí)下標(biāo)又與數(shù)組是關(guān)聯(lián)起來的。 如果elem[expando]獲取到時(shí),則直接返回 cache[cacheIndex] 。
這點(diǎn)搞定后,那就簡(jiǎn)單了,就是往一個(gè)空對(duì)象中 配置 屬性了。
進(jìn)一步修改函數(shù): // WITH ENCAPSULATION: (function(){
var cache = [0], expando = 'data' + +new Date();
function data(elem) {
var cacheIndex = elem[expando], nextCacheIndex = cache.length;
if(!cacheIndex) { cacheIndex = elem[expando] = nextCacheIndex; cache[cacheIndex] = {}; }
return { get : function(key) { return cache[cacheIndex][key]; }, set : function(key, val) { cache[cacheIndex][key] = val; return val; } }
}
window.data = data;
})();
用法: var myElem = document.getElementById('id');
// 設(shè)置data: data(myElem).set('customProperty', 12345);
// 獲取data: data(myElem).get('customProperty'); // returns 12345
ok,一個(gè)類似jQuery的data()函數(shù)就完成了。
|