jQuery.data() 即($.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 。
使用 jQuery.data() 为普通对象附加数据时,其本质是将一个 “cache” 附加到了对象上,并使用了一个特殊的属性名称。
存放数据的 “cache” 也是一个 object,我们为 “obj” 附加的数据实际上成为了 “cache” 的属性。而 “cache” 又是 “obj” 的一个属性,在 jQuery 1.6中,这个属性的名称是 “jQuery16”加上一个随机数(如下面提到的 “jQuery16018518865841457738” )。
我们可以用下面的代码来测试 jQuery.data() 的功能:
- <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>
显示结果为:
- $.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” 的属性。
我们可以用下面的代码实现类似的功能:
- $ = 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” 都会被复制到目标对象的缓存中。
功能测试代码如下:
- <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>
显示结果如下:
- $.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” 中。
我们可以用下面的代码实现类似的功能:
- $ = 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 也是一种 Object,因此之前的方式也可以为 DOM Element 赋值;但考虑到 IE6、IE7 中垃圾回收的问题(不能有效回收 DOM Element 上附加的对象引用),jQuery采用了与普通对象有所不同的方式附加数据。
测试代码如下:
- <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>
显示结果如下:
- value
测试代码中,首先通过 document.getElementById 方法获取了一个 DOM Element (当然,也可以用 jQuery 的选择器),然后在这个 DOM Element 上附加了一个属性,随后就从 DOM Element 上取出了附加的属性并输出。
因为考虑到 IE6、IE7 对 DOM Element 上的对象引用的垃圾回收存在问题,我们不会直接在 DOM Element 上附加对象;而是使用全局cache,并在 DOM Element 上附加一个 uid。
实现方式如下:
- $ = 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 中这刻意优化的地方非常多,在许多原本可以统一处理的对方都进行了特殊处理。但这在一定程度上,也造成了阅读源码的障碍。当然这是作者(及其他代码贡献者)本身的编程哲学,这里就不加评论了。
jQuery.data() 即($.data())的实现方式的更多相关文章
- jquery easyui ajax data属性传值方式
$.ajax({ url:url, type:'post', data:data, dataType:'json', contentType: "application/ ...
- JQuery.Ajax()的data参数类型
假如现在有这样一个表单,是添加元素用的. <form id='addForm' action='UserAdd.action' type='post'> <label for='un ...
- jquery ajax中data属性详解
$.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , ...
- 元素的数据存储-jQuery.data()与.data()
jQuery提供的存储接口 jQuery.data( element, key, value ) //静态接口,存数据 jQuery.data( element, key ) //静态接口,取数据 . ...
- jquery 操作HTML data全局属性缓存的坑
data-* 全局属性 是一类被称为自定义数据属性的属性,它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力,并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换 ...
- jQuery attr() prop() data()用法及区别
.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...
- 深入jQuery中的data()
引入 data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此. data有什么 ...
- jquery send(data) 对data的处理
// Convert data if not already a string if ( s.data && s.processData && typeof s.dat ...
- jQuery源代码学习之六——jQuery数据缓存Data
一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所 ...
- jQuery事件--change([[data],fn])、on(events,[selector],[data],fn)和hover([over,]out)
change([[data],fn]) 概述 当元素的值发生改变时,会发生 change 事件. 该事件仅适用于文本域(text field),以及 textarea 和 select 元素.当用于 ...
随机推荐
- 将字符串s='ab34aa243dd78eww89' 处理为 '**34**243**78***89',然后对数字求和,结果为'**7**9**15***17'
s='ab34aa243dd78eww89'#s='ab34aa000dd78eww89' #方法1: result='' for i in s: if i.isalpha(): result+='* ...
- CSRF(cross-site request forgery )跨站请求攻击
CSRF(cross-site request forgery )跨站请求伪造,攻击者盗用了你的身份,以你的名义发送恶意请求,对服务器来说这个请求是完全合法的,但是却完成了攻击者所期望的一个操作,通过 ...
- 记录一下关于DQN的想法
下载了几份代码,就两份没有报错通过了 DQN玩FlappyBird https://github.com/yenchenlin/DeepLearningFlappyBird DQN玩Cartpole ...
- Java锁--ReentrantLock
转载请注明出处:http://www.cnblogs.com/skywang12345/p/3496101.html ReentrantLock介绍 ReentrantLock是一个可重入的互斥锁,又 ...
- 5、组件注册-@Scope-设置组件作用域
5.组件注册-@Scope-设置组件作用域 IOC容器默认都是单实例的 /** * * {@link ConfigurableBeanFactory#SCOPE_SINGLETON SCOPE_SIN ...
- JS BOM基础 全局对象 window location history screen navigator
全局变量声明的两种方式:1,window.变量名=值;2,var 变量名=值; 全局函数声明的两种方式:1,window.函数名=function(){}2,function 函数名=function ...
- P4310 绝世好题 按位DP
这名字可海星\(OvO\) 思路:\(DP\) 提交:2次(\(zz\)我竟然把三目运算符写错了\(QwQ\)) 题解: 按位进行\(DP\):\(f[i]\)表示结尾的数字包括\(1<< ...
- border-width
border-width 语法: border-width:<line-width>{1,4} <line-width> = <length> | thin | m ...
- Chrome浏览器设置自动启用Flash插件
Chrome浏览器设置自动启用Flash插件 1.打开Chrome浏览器,输入chrome://flags/#run-all-flash-in-allow-mode,打开,找到Enable Eph ...
- 请问如何上传带图片的word
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...