對 jQuery 中 data 方法的誤解

2022-01-18 03:35:26 字數 1527 閱讀 9852

一直以來都認為新版本中 data 是呼叫 dataset 實現的,對於低版本ie則採用 getattribute

其實一直是我誤解了,也不知道最初這個想法是怎麼來的。難道我被盜夢了?

今天 謝亮 兄弟和我討論乙個東西的時候,談到了效能,他用的是 attr 操作自定義屬性 data-uid,我說用 data 好,因為是 dataset 實現,然後他去翻了下 jquery 原始碼和我說,沒有發現這個東西,我就納悶了。於是我去仔細讀了下 data 方法的原始碼,才發現我一直誤會了,再此,向之前問我 data 方法的群友道歉,我 "騙" 了你們,你們來打我吧。

今天我就重新解釋下 data 方法,先看下 jquery 1.11.0 的手冊裡腫麼說的吧,請移步至

用法這裡說的很清楚了,但是內部是怎麼實現的呢? 戳我看原始碼  (看不懂沒關係,我會簡單分析下他的流程)

其實是這樣的,當我們執行例如這樣的語句時 $("#id").data("test"); (簡化後的過程)

第一步: jquery 會獲取到 $("#id") 元素,對吧、

第二步: 執行到 data方法 的時候,他會通過 attributes 取我們要的對應值。

第三步: 返回結果給我們,然後 jquery 把值快取到內部物件裡

第一次取的時候,我們可以得到的 undefined,字串,數字或者解析後的json。

那有人會說這個和 attr 有什麼區別呢?

當我們第二次執行 $("#id").data("test"); 的時候:

第一步: jquery 會獲取到 $("#id") 元素,和上面一樣。

第二步: 執行到 data方法 的時候,從 jquery 的快取中取值

第三步: 返回結果給我們

發現第二步不同了,對吧,為什麼不是從 attributes 取值,而是從快取中取呢?

快取其實是js的物件,簡單說就類似 var cache = {}; jquery 在第一次取值之後就會儲存到這個快取物件中,這樣我們再次操作的時候就非常快了、

往往效能的損耗都是在 dom 操作上,所以避免重複操作 dom 是非常必要的。

到這,也能看出他和 attr 最大的區別了,比如

$("#id").data("test", "123"); 執行後依然是 data-test="hehe"

$("#id").attr("data-test", "123"); 執行後會是 data-test="123"

那麼我們要給乙個元素賦值值,或者物件的時候他們有什麼區別呢?比如

$("#id").data("test", ); 會把 賦值給 快取,元素節點上依然是 data-test="hehe"

$("#id").attr("data-test", ); 執行後會是 data-test="[object object]"

這個應該也有不少人遇到,至少群裡有不少人問過這個問題。

其實我之前也沒騙你們,自定義屬性沒必要老是 attr 他,data 是 jquery 賦予我們的一把瑞士軍刀,非常鋒利的。

好了,我是懶人,懶的配圖,已經寫了不少字了,如果有什麼說的不對的地方,你們來打我吧、

繁星 jquery的data 方法

今天在看jquery文件的時候偶然看到了data 方法,覺得挺好用的,這裡做個記錄。這個方法用於在元素上存放資料,返回jquery物件。在文件中提到v1.4.3 新增用法new data obj 可傳入key value形式的資料。這個方法的用法如下 1 在乙個div上訪問資料 1 html 2 d...

07 jquery中data 方法的作用

function printvlaue 健 值對。testdiv data ename zhangsan 修改data 通過 data 屬性儲存的值 testdiv data cname 我是張三 console.log 獲取通過data 儲存在testdiv元素上的ename值 testdiv d...

關於Jquery中ajax方法data引數用法

data 傳送到伺服器的資料。將自動轉換為請求字串格式。get 請求中將附加在 url 後。檢視 processdata 選項說明以禁止此自動轉換。必須為 key value 格式。如果為陣列,jquery 將自動為不同值對應同乙個名稱。如 轉換為 foo bar1 foo bar2 示例 ajax...