手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2009年02月24日的文章

学做jQuery中的data()函数

看到这个内容的时候,很吃惊,其实我在以前看到过一个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()函数就完成了。


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

Tags: data, cache, 缓存