jQuery.data() 的实现方式

jQuery.data() 的实现方式

    jQuery.data() 的作用是为普通对象或 DOM Element 附加(及获取)数据。      下面将分三个部分分析其实现方式:      1. 用name和value为对象附加数据;即传入三个参数,第一个参数为需要附加数据的对象,第二个参数为数据的名称,第三个参数为数据的值。当然,只是获取值的话,也可以不传入第三个参数。      2. 用另一个对象为对象附加数据;即传入两个参数,第一个参数为需要附加的数据对象(我们称之为“obj”),第二个参数也是一个对象(我们称之为“another”);“another”中包含的键值对将会被复制到 “obj” 的数据缓存(我们称之为“cache”)中。      3. 为 DOM Element 附加数据;DOM Element 也是一种 Object ,但 IE6、IE7 对直接附加在 DOM Element 上的对象的垃圾回收存在问题;因此我们将这些数据存放在全局缓存(我们称之为“globalCache”)中,即 “globalCache” 包含了多个 DOM Element 的 “cache”,并在 DOM Element 上添加一个属性,存放 “cache” 对应的 uid 。 

用name和value为对象附加数据

    使用 jQuery.data() 为普通对象附加数据时,其本质是将一个 “cache” 附加到了对象上,并使用了一个特殊的属性名称。      存放数据的 “cache” 也是一个 object,我们为 “obj” 附加的数据实际上成为了 “cache” 的属性。而 “cache” 又是 “obj” 的一个属性,在 jQuery 1.6中,这个属性的名称是 “jQuery16”加上一个随机数(如下面提到的 “jQuery16018518865841457738” )。  我们可以用下面的代码来测试 jQuery.data() 的功能:  Html代码 

<script type="text/javascript" src="jquery.js"></script>  
<script>  
obj = {};  
$.data(obj, 'name', 'value');  
document.write("$.data(obj, 'name') = " + $.data(obj, 'name') + '<br />');  
 
for (var key in obj) {  
    document.write("obj." + key + '.name = ' + obj[key].name);  
}  
</script>  

显示结果为: 

Html代码 

$.data(obj, 'name') = value  
obj.jQuery16018518865841457738.name = value  

    在这段代码中,我们首先在 “obj” 上附加了一个属性(名称为“name”,值为“value”),然后通过 $.data(obj, 'name') 来获取所附加的数据。为了深入了解其中的实现机制,我们有使用了一个循环来获取 “obj” 的属性,实际上是取出了在 “obj” 上附加的 “cache”对象。      可以看到,jQuery.data() 实际上为 “obj” 附加到了名为 “jQuery16018518865841457738” (这个名称是随机的)的对象,也就是 “cache” 上。用 jquery.data() 方式为对象附加的属性实际上成为了这个 “cache” 的属性。      我们可以用下面的代码实现类似的功能: 

Javascript代码 

$ = function() {  
    var expando = "jQuery" + ("1.6" + Math.random()).replace(/\D/g, '');  
 
    function getData(cache, name) {  
        return cache[name];  
    }  
 
    function setData(cache, name, value) {  
        cache[name] = value;  
    }  
 
    function getCache(obj) {  
        obj[expando] = obj[expando] || {};  
        return obj[expando];  
    }  
 
    return {  
        data : function(obj, name, value) {  
            var cache = getCache(obj);  
 
            if (value === undefined) {  
                return getData(cache, name);  
            } else {  
                setData(cache, name, value);  
            }  
        }  
    }  
}();  

    function 中的第一行代码定义了 “expando” ,即 "jQuery1.6" 加上一个随机数(0.xxxx),并将其中非数字的部分去掉;这种格式将在jQuery的其他地方用到,这里不做探讨;只需要知道这是一个特殊的名称,并且可以用于标识不同的页面(比如不同 iframe 中的 “expando” 就会有所不同)。      接下来定义了获取数据的函数 getData(), 即从 “cache” 中获取一个属性;实际上也就是返回 cache[name] 。      然后是 setData() 函数,用于设置 “cache” 的属性;实际上也就是设置 cache[name] 的值。      之后是 getCache() , 获取 “obj” 上的 “cache”,即 obj[expando];如果 obj[expando] 为空,则进行初始化。      最后公开了 data 方法,先根据传入的 “obj”,获取附加在 “obj” 上的 “cache”; 当传入两个参数时,调用 getData()方法;当传入三个参数时,则调用 setData() 方法。 

用另一个对象为对象附加数据

     除了以提供 name 和 value 的方式进行赋值,我们还可以直接传入另一个对象( “another” )作为参数。这种情况下,“another” 的属性名称和属性值将被视为多个键值对,从中提取的 “name” 和 “value” 都会被复制到目标对象的缓存中。       功能测试代码如下: 

Html代码 

<script type="text/javascript" src="jquery.js"></script>  
<script>  
obj = {};  
$.data(obj, {name1: 'value1', name2: 'value2'});  
 
document.write("$.data(obj, 'name1') = " + $.data(obj, 'name1')  + '<br />' );  
document.write("$.data(obj, 'name2') = " + $.data(obj, 'name2') + '<br />');  
 
for (var key in obj) {  
    document.write("obj." + key + '.name1 = ' + obj[key].name1 + '<br />');  
    document.write("obj." + key + '.name2 = ' + obj[key].name2);  
}  
</script>  

    显示结果如下: 

Html代码 

$.data(obj, 'name1') = value1  
$.data(obj, 'name2') = value2  
obj.jQuery1600233050178663064.name1 = value1  
obj.jQuery1600233050178663064.name2 = value2  

    上面的测试代码中,我们先将一个带有两个键值对的 “another” 对象传入,然后分别用 $.data(obj, 'name1') 和 $.data(obj, 'name2') 获取附加的数据;同样,为了深入了解其中的机制,我们通过遍历 “obj” 的方式取出了隐藏的 “cache” 对象,并获得了 “cache” 对象的 “name1” 属性和 “name2” 属性的值。      可以看到,jQuery.data() 实际上为 “obj” 附加了名为 “obj.jQuery1600233050178663064” 的对象,也就是 “cache” 上。用 jquery.data() 方式传入的键值对都被复制到了 “cache” 中。      我们可以用下面的代码实现类似的功能: 

Javascript代码 

$ = function() {  
    // Other codes ...  
 
    function setDataWithObject(cache, another) {  
        for (var name in another) {  
            cache[name] = another[name];  
        }  
    }  
 
    // Other codes ...  
 
    return {  
        data : function(obj, name, value) {  
            var cache = getCache(obj);  
 
            if (name instanceof Object) {  
                setDataWithObject(cache, name)  
            } else if (value === undefined) {  
                return getData(cache, name);  
            } else {  
                setData(cache, name, value);  
            }  
        }  
    }  
}();  

    这段代码是在之前的代码的基础上进行修改的。首先增加了内部函数 setDataWithObject() ,这个函数的实现是遍历 “another” 的属性,并复制到 “cache” 中。      然后,在对外开放的 data 函数中,先判断传入的第二个参数的名称,如果这个参数是一个 Object 类型的实例,则调用 setDataWithObject() 方法。 

为 DOM Element 附加数据

    由于 DOM Element 也是一种 Object,因此之前的方式也可以为 DOM Element 赋值;但考虑到 IE6、IE7 中垃圾回收的问题(不能有效回收 DOM Element 上附加的对象引用),jQuery采用了与普通对象有所不同的方式附加数据。      测试代码如下: 

Html代码 

<div id="div_test" />  
 
<script type="text/javascript" src="data.js"></script>  
<script>  
window.onload = function() {  
    div = document.getElementById('div_test');  
    $.data(div, 'name', 'value');  
    document.write($.data(div, 'name'));  
}  
</script>  
 

显示结果如下:

Html代码 

  1. value       测试代码中,首先通过 document.getElementById 方法获取了一个 DOM Element (当然,也可以用 jQuery 的选择器),然后在这个 DOM Element 上附加了一个属性,随后就从 DOM Element 上取出了附加的属性并输出。      因为考虑到 IE6、IE7 对 DOM Element 上的对象引用的垃圾回收存在问题,我们不会直接在 DOM Element 上附加对象;而是使用全局cache,并在 DOM Element 上附加一个 uid。      实现方式如下: 

Javascript代码 

$ = function() {  
    var expando = "jQuery" + ("1.6" + Math.random()).replace(/\D/g, '');  
    var globalCache = {};  
    var uuid = 0;  
 
    // Other codes ...  
 
    function getCache(obj) {  
        if (obj.nodeType) {  
            var id = obj[expando] = obj[expando] || ++uuid;  
            globalCache[id] = globalCache[id] || {};  
            return globalCache[id];  
        } else {  
            obj[expando] = obj[expando] || {};  
            return obj[expando];  
        }  
    }  
 
    // Other codes ...  
}();  

    这段代码与之前的代码相比,增加了 globalCache 和 uuid,并修改了 getCache() 方法。      globalCache 对象用于存放附加到 DOM Element 上的 “cache”,可以视为 “cache” 的“容器”。uuid 表示 “cache” 对应的唯一标识,是唯一且自增长的。uuid 或被存放在 DOM Element 的 “expando” 属性中。      getCache() 函数中增加了一个判断,即 “obj” 具有 “nodeType” 属性,就认为这是一个 DOM Element;这种情况下,就先取出附加在 “obj” 上的 id ,即 obj[expando] ;如果 obj[expando] 未定义,则先用 ++uuid 对其进行初始化;取出 id 之后,就到 globalCache 中找到对应的 “cache” ,即 globalCache[id], 并返回。      到此为止,jQuery.data() 函数的实现就介绍完了;但是,这里还有一个需要思考的问题:为什不都统一用 “globalCache” 存储,而要将 “cache” 直接附加到普通对象上?我认为这应该是一种性能优化的方式,毕竟少一个引用的层次,存取速度应该会略快一些。 jQuery 中这刻意优化的地方非常多,在许多原本可以统一处理的对方都进行了特殊处理。但这在一定程度上,也造成了阅读源码的障碍。当然这是作者(及其他代码贡献者)本身的编程哲学,这里就不加评论了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java成神之路

js学习总结

转自 http://blog.sina.com.cn/s/blog_75cf5f3201011csu.html

50260
来自专栏行者常至

005.golang 控制语句

10930
来自专栏LanceToBigData

Vue.js之Vue计算属性、侦听器、样式绑定

1)el(挂载点) 创建一个Vue这个实例去接管页面中的某个Element(元素)。也就是说el表明和页面上 哪一个节点做绑定! 2)data vue实...

26330
来自专栏xingoo, 一个梦想做发明家的程序员

快速排序

快速排序时间复杂度为O(nlogn),由于是在原数组上面利用替换来实现,因此不需要额外的存储空间。 算法思想:   通过设置一个岗哨,每次跟这个岗哨进行比较,比...

221100
来自专栏mySoul

属性 元素的内容 创建,插入和删除节点 虚拟节点

表示HTML文档元素的HTMLElement对象定义了读/写属性。映射了元素的HTML属性。HTMLElement定义了通用的HTTP属性。以及事件处理程序的属...

16630
来自专栏IT开发技术与工作效率

VBA函数与过程简洁教程

22530
来自专栏彭湖湾的编程世界

谈谈出入React框架踩过的坑

1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div> 报错:warning:Style prop value ...

34560
来自专栏练小习的专栏

CSS计数器 counter

适用场景: 当排序以及序号变动对服务端造成的压力大的情况下,使用css计数。 在早期,只有ol和ul可以对子元素li进行排序,,而CSS2.1规范中加入了co...

24490
来自专栏web前端

JavaScript基础学习--05自定义属性、索引值

一、自定义属性      1、读写操作 <input abc="123" type="button" value="按钮" /> ==============...

21070
来自专栏Young Dreamer

setInterval(code, time)中code传递参数办法

1.使用setInterval的场景 有时我们需要隔一定的时间执行一个方法,这时就会用到setInterval,但是由于这个方法是浏览器模拟出的Timer线程,...

18690

扫码关注云+社区

领取腾讯云代金券