function 中的第意气风发行代码定义了 “expando” ,即 “jQuery1.6”
加上二个任意数,并将内部非数字的部分去掉;这种格式将要jQuery的别样地点采用,这里不做探求;只必要通晓那是贰个非同一般的称呼,况且能够用来标记区别的页面(比方分裂iframe 中的 “expando” 就能够迥然分歧)。

用另一个指标为目的附加数据

大家可以用下边包车型大巴代码完结肖似的成效:

应用 jQuery.data(卡塔尔 为普通对象附加数据时,其本质是将叁个 “cache”
附加到了指标上,并运用了二个分裂经常的性质名称。

DOM Element 附加数据

末尾公开了 data 方法,先依据传入的 “obj”,获取附加在 “obj” 上的
“cache”; 当传入七个参数时,调用
getData()方法;当传入八个参数时,则调用 setData(State of Qatar 方法。

下边将分四个部分深入分析其落真实情形势:

能够看看,jQuery.data(State of Qatar 实际上为 “obj” 附加了名为“obj.jQuery1600233050178663064” 的指标,也正是 “cache” 上。用
jquery.data(卡塔尔 格局传入的键值对都被复制到了 “cache” 中。

地方的测量试验代码中,大家先将三个暗含五个键值对的 “another”
对象传入,然后分别用 $.data 和 $.data
收获附加的多少;同样,为了深切摸底此中的建制,大家经过遍历 “obj”
的措施抽出了隐形的 “cache” 对象,并得到了 “cache” 对象的 “name1” 属性和
“name2” 属性的值。

到此甘休,jQuery.data(卡塔尔函数的兑现就介绍完了;不过,这里还可能有三个亟需思谋的难点:为什不都统生龙活虎用
“globalCache” 存款和储蓄,而要将 “cache”
直接附加到平凡对象上?笔者以为那应当是后生可畏种属性优化的方法,究竟少贰个援用的档期的顺序,存取速度应该会略快一些。
jQuery
中那特意优化的地点非常多,在无数本来能够统后生可畏管理的对方都进行了特殊管理。但这在早晚水准上,也变成了读书源码的阻力。

$ = function() { var expando = "jQuery" + ("6" + Mathrandomreplace; var globalCache = {}; var uuid = 0; // Other codes function getCache { if  { var id = obj[expando] = obj[expando] || ++uuid; globalCache[id] = globalCache[id] || {}; return globalCache[id]; } else { obj[expando] = obj[expando] || {}; return obj[expando]; } } // Other codes }();

之后是 getCache() , 获取 “obj” 上的 “cache”,即 obj[expando];如果
obj[expando] 为空,则开展开头化。

作者们得以用下边包车型大巴代码来测验 jQuery.data(卡塔尔(قطر‎ 的效果与利益:

由于 DOM Element 也是风姿罗曼蒂克种 Object,因而在此之前的不二法门也得认为 DOM Element
赋值;但考虑到 IE6、IE7 中杂质回笼的难题(无法一蹴而就回笼 DOM Element
上附加的对象引用),jQuery选择了与日常对象有所分裂的办法附加数据。

效果测量试验代码如下:

美好的周天一而再连续过得快捷,每星期二是最疲劳的一天。不久前大家生机勃勃并来打探下jQuery.data
的法力是为平时对象或 DOM Element 附加数据。

这段代码是在以前的代码的根基上海展览中心开改善的。首先扩大了中间函数
setDataWithObject(State of Qatar ,那几个函数的贯彻是遍历 “another” 的性质,并复制到
“cache” 中。

测量试验代码中,首先通过 document.getElementById 方法赢得了八个 DOM Element
,然后在这里个 DOM Element 上附加了一天天性,随后就从 DOM Element
上抽取了附加的属性并出口。

这段代码与事情发生以前的代码相比较,扩展了 globalCache 和 uuid,并纠正了
getCache(卡塔尔 方法。

 obj = {}; $data(obj, {name1: 'value1', name2: 'value2'}); documentwrite("$data = " + $data + '<br />' ); documentwrite("$data = " + $data + '<br />'); for  { documentwrite("obj" + key + 'name1 = ' + obj[key]name1 + '<br />'); documentwrite("obj" + key + 'name2 = ' + obj[key]name2); } 

$.data = value1 $.data = value2 obj.jQuery1600233050178663064.name1 = value1 obj.jQuery1600233050178663064.name2 = value2
 windowonload = function() { div = documentgetElementById; $data(div, 'name', 'value'); documentwrite($data; } 

value
  1. 为 DOM Element 附加数据;DOM Element 也是后生可畏种 Object ,但 IE6、IE7
    对直接附加在 DOM Element
    上的指标的污源回笼存在难题;因而大家将那一个数据贮存在全局缓存中,即
    “globalCache” 包涵了多少个 DOM Element 的 “cache”,并在 DOM Element
    上增添一个性能,寄放 “cache” 对应的 uid 。

能够看出,jQuery.data(卡塔尔国 实际上为 “obj” 附加到了名为“jQuery16018518865841457738” 的目的,也便是 “cache” 上。用 jquery.data(卡塔尔(قطر‎情势为指标附加的性质实际上造成了那个 “cache” 的习性。

1.
用name和value为对象附加数据;即传入八个参数,第1个参数为索要增大数据的靶子,第三个参数为数据的名称,第多个参数为数量的值。当然,只是得到值的话,也得以不扩散第八个参数。

接下去定义了获取数据的函数 getData(卡塔尔, 即从 “cache”
中获取两个性子;实际上约等于回去 cache[name] 。

总结

在此段代码中,大家先是在 “obj” 上附加了贰本性质,然后经过 $.data
来得到所附加的数码。为了浓重摸底当中的贯彻机制,大家有采用了一个巡回来获取
“obj” 的天性,实际上是收取了在 “obj” 上附加的 “cache”对象。

寄放数据的 “cache” 也是多个 object,我们为 “obj” 附加的数量实际上形成了
“cache” 的特性。而 “cache” 又是 “obj” 的壹性子能,在 jQuery
1.6中,那天性子的名称是 “jQuery16”加上一个随机数(如上边提到的
“jQuery16018518865841457738” )。

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

globalCache 对象用于寄存附加到 DOM Element 上的 “cache”,能够视为
“cache” 的“容器”。uuid 代表 “cache”
对应的无出其右标记,是唯朝气蓬勃且自增进的。uuid 或被存放在 DOM Element 的
“expando” 属性中。

笔者们得以用上边包车型客车代码达成相近的机能:

2.
用另多少个对象为对象附加数据;即传入四个参数,第叁个参数为必要增大的多少对象,第2个参数也是八个目的;“another”中包涵的键值对将会被复制到
“obj” 的数据缓存中。

$ = function() { var expando = "jQuery" + ("6" + Mathrandomreplace; function getData { return cache[name]; } function setData { cache[name] = value; } function getCache { obj[expando] = obj[expando] || {}; return obj[expando]; } return { data : function { var cache = getCache; if  { return getData; } else { setData; } } } }();

然后,在门户开放的 data
函数中,先判别传入的第三个参数的名称,假如那一个参数是三个 Object
类型的实例,则调用 setDataWithObject(卡塔尔国 方法。

 obj = {}; $data(obj, 'name', 'value'); documentwrite("$data = " + $data + '<br />'); for  { documentwrite("obj" + key + 'name = ' + obj[key]name); } 

$.data = value obj.jQuery16018518865841457738.name = value

而外以提供 name 和 value
的不二等秘书籍张开赋值,大家仍是可以直接传入另四个指标作为参数。这种景观下,“another”
的质量名称和属性值将被视为七个键值对,从当中提取的 “name” 和 “value”
都会被复制到目的对象的缓存中。

用name和value为对象附加数据

接下来是 setData(卡塔尔国 函数,用于安装 “cache” 的品质;实际上相当于安装
cache[name] 的值。

原先因为构思到 IE6、IE7 对 DOM Element
上的指标引用的垃圾堆回笼藏保存在难点,大家不会一向在 DOM Element
上附加对象;而是采取全局cache,并在 DOM Element 上附加二个 uid。

getCache(卡塔尔国 函数中追加了一个判定,即 “obj” 具备 “nodeType”
属性,就认为那是两个 DOM Element;这种意况下,就先收取附加在 “obj” 上的
id ,即 obj[expando] ;如果 obj[expando] 未定义,则先用 ++uuid
对其举办初叶化;抽出 id 之后,就到 globalCache 中找到相应的 “cache” ,即
globalCache[id], 并返回。

相关文章

网站地图xml地图