易栈网-膘叔

看到这个内容的时候，很吃惊，其实我在以前看到过一个R开头的网站时（记不清了，实在记不清了），他用JS做了一个cache函数，对函数做了缓存。还用了斐伯拉切函数做了测试。后来我根据他写的代码用jQuery写了一个类似的插件（它是把方法注册到了window对象里，所以加快了一些速度）。后来感觉这样的方法也同样可以用在数据上，又根据这样的想法写了一个存储数据的cache函数。也分别用在了两个不同的项目里。

如今又看到有人写这样类似的东西，就把他贴上来进行分享。

文章的内容来自：

原文如下：http://www.cssrain.cn/article.asp?id=1295

在jQuery中可以使用data()来给元素存储临时的变量：
// jQuery:
    // Set data:
    $(elem).data('customProperty', 12345);
    // Get data:
    $(elem).data('customProperty');

在mootools中可以使用store()来给元素存储临时的变量：
// MooTools:
    // Set data:
    elem.store('customProperty', 12345);
    // Get data:
    elem.retrieve('customProperty');


下面我们用JavaScript 自己动手写一个：
(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');
// 设置data:
data(myElem).customProperty = 12345;
// 获取 data:
data(myElem).customProperty; // returns 12345

//  用其他的变量
data(myElem).info = {
    a : 123,
    b : [4,5,6]
};


这个脚本其实很简单，就是往cache 数组里添加 下标 元素。
默认cache=[0] ，当 elem[expando] 没有获取到时，则往数组里 添加一个下标，同时下标又与数组是关联起来的。
如果elem[expando]获取到时，则直接返回  cache[cacheIndex] 。


这点搞定后，那就简单了，就是往一个空对象中 配置 属性了。



进一步修改函数：
// 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');

// 设置data:
data(myElem).set('customProperty', 12345);

// 获取data:
data(myElem).get('customProperty'); // returns 12345


ok，一个类似jQuery的data()函数就完成了。

其实我自己还是觉得用对象更好处理一些，一来，对象不象数组，一定要用下标才能读取，而且对于对象的覆盖等，也方便很多。删除的话也容易。