對(duì) jQuery 中 data 方法的誤解分析

更新時(shí)間：2014年06月18日 14:02:17 投稿：mdxy-dxy

一直以來(lái)都認(rèn)為新版本中 data 是調(diào)用 dataset 實(shí)現(xiàn)的，對(duì)于低版本IE則采用 getAttribute其實(shí)一直是我誤解了，也不知道最初這個(gè)想法是怎么來(lái)的

今天謝亮兄弟和我討論一個(gè)東西的時(shí)候，談到了性能，他用的是 attr 操作自定義屬性 data-uid，我說(shuō)用 data 好，因?yàn)槭?dataset 實(shí)現(xiàn)，然后他去翻了下 jQuery 源碼和我說(shuō)，沒(méi)有發(fā)現(xiàn)這個(gè)東西，我就納悶了。于是我去仔細(xì)讀了下 data 方法的源碼，才發(fā)現(xiàn)我一直誤會(huì)了，再此，向之前問(wèn)我 data 方法的群友道歉，我 "騙" 了你們，你們來(lái)打我吧。

今天我就重新解釋下 data 方法，先看下 jQuery 1.11.0 的手冊(cè)里腫么說(shuō)的吧，請(qǐng)移步至http://shouce.jb51.net/jquery/data.html、
用法這里說(shuō)的很清楚了，但是內(nèi)部是怎么實(shí)現(xiàn)的呢？戳我看源碼 (看不懂沒(méi)關(guān)系，我會(huì)簡(jiǎn)單分析下他的流程)

其實(shí)是這樣的，當(dāng)我們執(zhí)行例如這樣的語(yǔ)句時(shí) $("#id").data("test"); (簡(jiǎn)化后的過(guò)程) 
第一步: jQuery 會(huì)獲取到 $("#id") 元素，對(duì)吧、 
第二步: 執(zhí)行到 data方法 的時(shí)候，他會(huì)通過(guò) attributes 取我們要的對(duì)應(yīng)值。 
第三步: 返回結(jié)果給我們，然后 jQuery 把值緩存到內(nèi)部對(duì)象里 
第一次取的時(shí)候，我們可以得到的 undefined，字符串，數(shù)字或者解析后的json。 
 
那有人會(huì)說(shuō)這個(gè)和 attr 有什么區(qū)別呢？ 
當(dāng)我們第二次執(zhí)行 $("#id").data("test"); 的時(shí)候： 
第一步: jQuery 會(huì)獲取到 $("#id") 元素，和上面一樣。 
第二步: 執(zhí)行到 data方法 的時(shí)候，從 jQuery 的緩存中取值 
第三步: 返回結(jié)果給我們 
 
發(fā)現(xiàn)第二步不同了，對(duì)吧，為什么不是從 attributes 取值，而是從緩存中取呢？ 
緩存其實(shí)是js的對(duì)象，簡(jiǎn)單說(shuō)就類(lèi)似 var cache = {}; jQuery 在第一次取值之后就會(huì)保存到這個(gè)緩存對(duì)象中，這樣我們?cè)俅尾僮鞯臅r(shí)候就非?？炝恕?
往往性能的損耗都是在 dom 操作上，所以避免重復(fù)操作 dom 是非常必要的。 
 
到這，也能看出他和 attr 最大的區(qū)別了，比如 <div id="id" data-test="hehe"></div> 
$("#id").data("test", "123"); 執(zhí)行后依然是 data-test="hehe"
$("#id").attr("data-test", "123"); 執(zhí)行后會(huì)是 data-test="123"
 
那么我們要給一個(gè)元素賦值值，或者對(duì)象的時(shí)候他們有什么區(qū)別呢？比如 <div id="id" data-test="hehe"></div> 
$("#id").data("test", {str: "hehe"}); 會(huì)把 {str: "hehe"} 賦值給 緩存，元素節(jié)點(diǎn)上依然是 data-test="hehe"
$("#id").attr("data-test", {str: "hehe"}); 執(zhí)行后會(huì)是 data-test="[object Object]"
這個(gè)應(yīng)該也有不少人遇到，至少群里有不少人問(wèn)過(guò)這個(gè)問(wèn)題。

其實(shí)我之前也沒(méi)騙你們，自定義屬性沒(méi)必要老是 attr 他，data 是 jQuery 賦予我們的一把瑞士軍刀，非常鋒利的。

好了，我是懶人，懶的配圖，已經(jīng)寫(xiě)了不少字了，如果有什么說(shuō)的不對(duì)的地方，你們來(lái)打我吧

您可能感興趣的文章: