读jQuery之六 缓存数据功能介绍

很多同学在项目中都喜欢将数据存储在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>

内部实现上也是有区别的，