jQuery 或者 原生中，緩存數(shù)據(jù)使用
data
全局的data方法
- 一個全新的 Data 構(gòu)造函數(shù)送浊，uid用來標(biāo)識生成的每個 Data 實例
function Data() {
this.expando = jQuery.expando + Data.uid++;
}
Data.uid = 1;
-
jQuery.expando每加載一次jQuery就會生成一次新的標(biāo)記
jQuery.extend({
expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" )
})
- 每個 Data 實例青伤，使用
uid和jQuery.expando生成屬于自己實例的expando督怜。expando屬性值很長，這是為避免元素上屬性名的命名沖突 - 無論jQuery對象還是元素狠角，在其上開辟一個屬性為
expando 屬性值的空間
// 這里 owner 就是 jqueryEle或者對象
owner[ this.expando ] = value;
- 將所有的名稱變成駝峰,在該空間上存取
- 生成的私有屬性号杠，
$._data()，這個是基于dataPriv操作丰歌。
局部data方法
-
jQuery.fn.data方法有自己的邏輯
- 不傳參數(shù)的獲取
jqEle.data()究流，先從dataUser上取 - 設(shè)置多個屬性
jqEle.data({role: "name", password: 1111})，也是在dataUser上設(shè)置 - 普通的獲取
jqEle.data("role")动遭，先從dataUser上取芬探，沒有，再從HTML上取 - 設(shè)置
jqEle.data("role","name")設(shè)置在dataUser上
-
jQuery.fn.removeData和全局的$.removeData邏輯一致
區(qū)別
由于邏輯上有一定的厘惦，導(dǎo)致使用上有一定的區(qū)別
- 取值的不同
<div id="dd" data-role="test">This is div.</div>
var divEle = $('#dd');
// 獲取
console.log($.data(divEle,"role")); // undefined
console.log(divEle.data("role")); // test
- 設(shè)置的不同
- 全局操作的
ele是jqueryElement偷仿，即使原生是同一個哩簿，也可以生成不同的jqueryElement - 局部操作的ele是HTML元素，也就是
jqueryElement[0]
var aa1=$("#aaron");
var aa2=$("#aaron");
// 第一組
aa1.data('a',1111);
aa2.data('a',2222);
aa1.data('a') //結(jié)果222222
aa2.data('a') //結(jié)果222222
// 第二組
$.data(aa1,"b","1111")
$.data(aa2,"b","2222")
$.data(aa1,"b") //結(jié)果111111
$.data(aa2,"b") //結(jié)果222222
- 無法刪除原生上
data相關(guān)屬性
var divEle = $('#dd');
console.log(divEle.data('role')); // test
divEle.removeData('role');
console.log(divEle.data('role')); // test
