数据缓存Cache

jQuery 或者 原生中，缓存数据使用data

全局的data方法

1. 一个全新的 Data 构造函数，uid用来标识生成的每个 Data 实例

function Data() {
    this.expando = jQuery.expando + Data.uid++;
}
Data.uid = 1;

2. jQuery.expando每加载一次jQuery就会生成一次新的标记

jQuery.extend({
 expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" )
})

3. 每个 Data 实例，使用 uid 和 jQuery.expando 生成属于自己实例的 expando。expando属性值很长，这是为避免元素上属性名的命名冲突
4. 无论jQuery对象还是元素，在其上开辟一个属性为 expando 属性值的空间

// 这里 owner 就是 jqueryEle或者对象
owner[ this.expando ] = value;

5. 将所有的名称变成驼峰,在该空间上存取
6. 生成的私有属性，$._data()，这个是基于dataPriv操作。

局部data方法

1. jQuery.fn.data方法有自己的逻辑

• 不传参数的获取jqEle.data()，先从 dataUser上取
• 设置多个属性jqEle.data({role: "name", password: 1111})，也是在 dataUser 上设置
• 普通的获取jqEle.data("role")，先从dataUser 上取，没有，再从HTML上取
• 设置jqEle.data("role","name")设置在dataUser上

2. jQuery.fn.removeData和全局的$.removeData逻辑一致

区别

由于逻辑上有一定的，导致使用上有一定的区别

1. 取值的不同

This is div.

var divEle = $('#dd');
// 获取
console.log($.data(divEle,"role")); // undefined
console.log(divEle.data("role")); // test

2. 设置的不同

• 全局操作的ele是jqueryElement，即使原生是同一个，也可以生成不同的jqueryElement
• 局部操作的ele是HTML元素，也就是jqueryElement[0]

var aa1=$("#aaron");
var aa2=$("#aaron");
// 第一组
aa1.data('a',1111);
aa2.data('a',2222);
aa1.data('a')  //结果222222
aa2.data('a')  //结果222222
// 第二组
$.data(aa1,"b","1111")
$.data(aa2,"b","2222")
$.data(aa1,"b")   //结果111111
$.data(aa2,"b")   //结果222222

3. 无法删除原生上data相关属性

var divEle = $('#dd');
console.log(divEle.data('role'));  // test
divEle.removeData('role');
console.log(divEle.data('role')); // test