理解JQuery中的data()使用方法

在前端我们经常会做的操作就是做数据状态的判断和数据处理、提交，经常会操作dom，也会保存一个全局的数据处理。这样做是可以实现很多功能，但是缺点就是过多操作dom会浪费性能，全局数据保存多了有时候真的会搞混淆。所以jq提供了一个data()缓存机制，有两种使用方式，一种是绑定在元素上面的data()，一种是存储在一个链式的对象上面。下面我们就来介绍这两种使用方式。

第一种：绑定在dom上

var dom = document.body;
$.data(dom, 'name', '张三');

然后，我们使用它并且打印到浏览器的控制台

console.log($('body').data('name'))

这里，我们就想，它们存储在哪里呢？我们用找到body发现没有存储在标签里面，输出这个body也找不到。

其实啊，这个data绑定在它的一个缓存里面，我们使用jQuery.cache，发现输出了一个对象出来，里面就有保存我们刚刚设置的数据，这个对象我们可以看作一个缓存池或者是缓存链表。我们还发现它这个输出的对象都是数字开头的，所以我们得想办法找到他的这个节点

从jq的文档中得知这个data不会直接保存在元素上面，而是保存在这个cache全局对象上面，先给这个元素添加一个jQuery.expando的属性，这里面有一个uuid或者是uid（这里是根据不同的jq版本来的），这个uuid是一个连续的数字，跟我们开始看到的cache对象对应的一模一样。

所以我们这里把jQuery.expando输出，得到了一个串"jQuery110200914271316066011"这样类似的，得到它以后怎么找到cache对象的对应数字呢，我们用刚刚定义的dom来操作，可以得到一个数字，那么这个数字就对应cache里面的，代码如下：

jQuery.expando;
dom[jQuery.expando]

接下来我们去jq里面找到这个expando

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

下面我们尝试一下用这个cache获取一下我们刚刚存储的数据

jQuery.cache[dom[jQuery.expando]].data.name

第二种：不绑定在元素上面，绑定在对象上面

var obj = {};
jQuery.data(obj, 'name', '王麻子');

这里的obj直接返回的是一个expando对象，所以我们调用的时候可以：

obj.jQuery110208157397060133658.data.name;
obj[jQuery.expando].data.name;