在前端我們經(jīng)常會(huì)做的操作就是做數(shù)據(jù)狀態(tài)的判斷和數(shù)據(jù)處理、提交，經(jīng)常會(huì)操作dom，也會(huì)保存一個(gè)全局的數(shù)據(jù)處理。這樣做是可以實(shí)現(xiàn)很多功能，但是缺點(diǎn)就是過多操作dom會(huì)浪費(fèi)性能，全局?jǐn)?shù)據(jù)保存多了有時(shí)候真的會(huì)搞混淆。所以jq提供了一個(gè)data()緩存機(jī)制，有兩種使用方式，一種是綁定在元素上面的data()，一種是存儲(chǔ)在一個(gè)鏈?zhǔn)降膶?duì)象上面。下面我們就來介紹這兩種使用方式。

第一種：綁定在dom上

var dom = document.body; $.data(dom, 'name', '張三');

然后，我們使用它并且打印到瀏覽器的控制臺(tái)

console.log($('body').data('name'))

這里，我們就想，它們存儲(chǔ)在哪里呢？我們用找到body發(fā)現(xiàn)沒有存儲(chǔ)在標(biāo)簽里面，輸出這個(gè)body也找不到。

其實(shí)啊，這個(gè)data綁定在它的一個(gè)緩存里面，我們使用jQuery.cache，發(fā)現(xiàn)輸出了一個(gè)對(duì)象出來，里面就有保存我們剛剛設(shè)置的數(shù)據(jù)，這個(gè)對(duì)象我們可以看作一個(gè)緩存池或者是緩存鏈表。我們還發(fā)現(xiàn)它這個(gè)輸出的對(duì)象都是數(shù)字開頭的，所以我們得想辦法找到他的這個(gè)節(jié)點(diǎn)

從jq的文檔中得知這個(gè)data不會(huì)直接保存在元素上面，而是保存在這個(gè)cache全局對(duì)象上面，先給這個(gè)元素添加一個(gè)jQuery.expando的屬性，這里面有一個(gè)uuid或者是uid（這里是根據(jù)不同的jq版本來的），這個(gè)uuid是一個(gè)連續(xù)的數(shù)字，跟我們開始看到的cache對(duì)象對(duì)應(yīng)的一模一樣。

所以我們這里把jQuery.expando輸出，得到了一個(gè)串"jQuery110200914271316066011"這樣類似的，得到它以后怎么找到cache對(duì)象的對(duì)應(yīng)數(shù)字呢，我們用剛剛定義的dom來操作，可以得到一個(gè)數(shù)字，那么這個(gè)數(shù)字就對(duì)應(yīng)cache里面的，代碼如下：

jQuery.expando; dom[jQuery.expando]

接下來我們?nèi)q里面找到這個(gè)expando

expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),

下面我們嘗試一下用這個(gè)cache獲取一下我們剛剛存儲(chǔ)的數(shù)據(jù)

jQuery.cache[dom[jQuery.expando]].data.name

第二種：不綁定在元素上面，綁定在對(duì)象上面

var obj = {}; jQuery.data(obj, 'name', '王麻子');

這里的obj直接返回的是一個(gè)expando對(duì)象，所以我們調(diào)用的時(shí)候可以：

obj.jQuery110208157397060133658.data.name; obj[jQuery.expando].data.name;

?

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的理解JQuery中的data()使用方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。