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

 

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

第一种：绑定在dom上

 

 

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

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

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

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