手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

学做jQuery中的data()函数

首页 > Javascript >

看到这个内容的时候,很吃惊,其实我在以前看到过一个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, 缓存

« 上一篇 | 下一篇 »

只显示10条记录相关文章

PHP中的Cache (浏览: 26841, 评论: 7)
php优化:apc缓存 (浏览: 23659, 评论: 1)
Cache测试策略 (浏览: 21224, 评论: 0)
用.htaccess缓存图片 提高博客运行效率 (浏览: 20514, 评论: 0)
Windows Cache Extension for PHP Beta 发布 (浏览: 19370, 评论: 2)
phpchina活动-echo谈xhprof,cache and long-polling (浏览: 18730, 评论: 0)
PHPChina活动涉及PPT在线观看 (浏览: 17092, 评论: 0)
例行维护后引起的故障和桔子的缓存故障 (浏览: 16061, 评论: 1)

发表评论

评论内容 (必填):