过剩同班在项目中还欣赏以数据存储于HTMLElement属性上,如

<div data="some data">Test</div>
<script>
    div.getAttribute('data'); // some data
</script>

吃页面中div添加了于定义属性“data”及值“some
data”。后续JS代码中使用getAttribute获取。

 

jQuery从1.2.3初步提供了data/removeData方法用来存储/删除数据。1.6.1代码有

jQuery.extend({
    cache: {},
    // Please use with caution
    uuid: 0,
    ...
});

就于jQuery添加了静态字段/方法,有jQuery.cache/jQuery.uuid/jQuery.expando等。下面分别介绍

jQuery.cache 空对象,用来缓存。它的结构于复杂。

jQuery.uuid 自增唯一的数字。

jQuery.expando
字符串,使用Math.random生成,去丢了非数字字符。它看作HTMLElement或JS对象的属性名。

expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),

jQuery.noData
JS对象,对于指定的HTMLElement禁用data方法。如embed、applet。

jQuery.hasData
用来判定HTMLElement或JS对象是不是具数据。返回true或false。即只要调用了jQuery.data方法上加了性能,则归true。

<div>aa</div>
<script>
    var div = document.getElementsByTagName('div')[0];
    $.hasData(div); // false
    $.data(div, 'name','jack');
    $.hasData(div); // true
</script>

 

jQuery.acceptData
用来判断该因素是否会领多少,返回true或false。在jQuery.data中运用。

 

jQuery.data
这是提供给客户端程序员利用的艺术,它以是setter/getter。

  1. 传一个参数,返回附加以指定元素的备数据,即thisCachejQuery.data(el);
    // thisCache
  2. 传二单参数,返回指定的特性值jQuery.data(el, ‘name’); 
  3. 传三独参数,设置属性与属性值jQuery.data(el, ‘name’,
    ‘jack’);jQuery.data(el, ‘uu’, {});
  4. 传四独参数,第四独参数pvt仅提供被jQuery库自身以。即jQuery._data方法中传true。因为jQuery的波模块严重依赖让jQuery.data,为避人工的不小心又写以是版本中投入的

 

jQuery.removeData 删除数据。

方是jQuery数据缓存模块的完整概述,下面详细说下jQuery.data方法。jQuery.data为寡栽对象提供缓存:JS对象同HTMLElement

// 为JS对象提供缓存
var myObj = {};
$.data(myObj, 'name', 'jack');
$.data(myObj, 'name'); // jack

// 为HTMLElement提供缓存
<div id="xx"></div>
<script>
    var el = document.getElementById('xx');
    $.data(el, 'name', 'jack');
    $.data(el, 'name'); // jack
</script>

 

中间贯彻上为是起分别的,

1,为JS对象提供缓存时,直接将数据保存于JS对象上。cache为JS对象。此时会偷偷的让JS对象上加个属性(类似于jQuery16101803968874529044),属性值也是单JS对象。举例说明

var myObj = {};
$.data(myObj, 'name', 'jack');
console.log(myObj);

 

myObj的构造如下

myObj = {
    jQuery16101803968874529044 : {
        name : 'jack'
    }
}

 

“jQuery16101803968874529044”这个字符串在data内部命名也id(注意不要HTMLElement元素的id),它其实就是是jQuery.expando。上面都干她是以jQuery.js引入到页面后随便变化的。

 

2,为HTMLElement提供缓存时,却非会见一直保存于HTMLElement上。而是保存于jQuery.cache上。cache为jQuery.cache。此时先行被HTMLElement添加属性(类似于jQuery16101803968874529044),属性值为数字(1,2,3递增)。即单独以部分数字保存于了HTMLElement上,不会见一直以数据置入。这是因IE老版本中可能会见在内存泄露高危。而HTMLElement如何和jQuery.cache建立联系呢?
还是id。刚刚提到属性值数字就是id。举例说明

<div id="xx"></div>
<script>
    var el = document.getElementById('xx');
    $.data(el, 'name', 'jack');
    console.log(el[jQuery.expando]); // 1
    console.log(jQuery.cache); // {1 : {name:'jack'}}
</script>

  

el
上补偿加了性能jQuery.expando,值也id,这个id是起1初始递增的。而id又当jQuery.cache的习性(key)。这样就是HTMLElement就和jQuery.cache建立了联系。如图

jQuery 1

不知注意到没有,jQuery.datajQuery还有第四个参数pvt,这个参数就在jQuery._data中使用。

// For internal use only.
_data: function( elem, name, data ) {
    return jQuery.data( elem, name, data, true );
},

  

jQuery._data从命名上便指定它是个体的,使用jQuery的客户端程序员未应该去调动用该办法。jQuery的API文档上也非见面明白她。

jQuery的数据缓存模块于1.2.3届1.6.1几乎每个版本都于更换。jQuery._data的提出就是为着避免客户端程序员覆盖/重写了默写模块。如jQuery事件模块中事件handler等就是采用jQuery.data存储,如果再写了该模块。那么事件模块将瘫痪。因此特别加加了pvt参数和jQuery._data方法。

唯独若你刻意要破坏,那么要得以举行的。如下

<div id="xx">Test</div>
<script>
    $('#xx').click(function(){
        alert('click');
    });
    // 语句1
    $.data($('#xx')[0], 'events', '', true);
    // 语句2
    //$._data($('#xx')[0], 'events', '');
</script>

  

点击div[id=xx]拿无见面触发点击事件。

 

不折不扣jQuery.data设置(set)数据缓存的进程尽管是如此,理解的此。取多少(get)的历程就哼理解了。不重复。

终极,我会见给zChian.js添加zChain.data/removeData方法,因为是“迷你版”,仅被HTMLElement添加数据缓存。请留心。

 

相关:

http://msdn.microsoft.com/en-us/library/Bb250448

http://bugs.jquery.com/ticket/6807

z.js

 

相关文章

网站地图xml地图