本文分析了jQuery數(shù)據(jù)緩存用法。分享給大家供大家參考。具體如下：

在jQuery的API幫助文檔中，jQuery這樣描述數(shù)據(jù)緩存的作用：用于在一個(gè)元素上存取數(shù)據(jù)而避免了循環(huán)引用的風(fēng)險(xiǎn)。

一、定義緩存數(shù)據(jù)

使用$(selector).data(name,value)方法可以為jQuery對(duì)象定義緩存數(shù)據(jù)。這些緩存數(shù)據(jù)被存放在匹配的DOM元素集合中所有DOM元素中。

var $link = $('a');
$link.data('linkType', 'home');

說(shuō)明:$(selector).data(name,value)可以在匹配的DOM元素上存放任何格式的數(shù)據(jù)，而不僅僅是字符串。

二、獲取緩存數(shù)據(jù)

此時(shí)，只需要一個(gè)參數(shù)即可，該參數(shù)指定緩存數(shù)據(jù)的名稱(chēng)。

var linkType = $link.data('linkType'); //'home'

說(shuō)明:如果讀取的緩存數(shù)據(jù)不存在，則返回值為undefined;如果jQuery集合指向多個(gè)元素，則將只返回第一個(gè)元素的對(duì)應(yīng)緩存數(shù)據(jù)。

三、刪除緩存數(shù)據(jù)

removeData()函數(shù)能夠刪除指定名稱(chēng)的緩存數(shù)據(jù)，并返回對(duì)應(yīng)的jQuery對(duì)象。

//刪除緩存數(shù)據(jù)的同時(shí)，返回對(duì)應(yīng)的jQuery對(duì)象。
var $a = $link.removeData('linkType');  

四、jQuery數(shù)據(jù)緩存的使用規(guī)范

隨著調(diào)用data()函數(shù)次數(shù)增多，或者因使用不當(dāng)，會(huì)使得cache對(duì)象急劇膨脹，最終影響程序的性能。
所以在使用jQuery數(shù)據(jù)緩存功能時(shí)，應(yīng)及時(shí)清理緩存對(duì)象。jQuery提供了removeData()函數(shù)手動(dòng)清除緩存數(shù)據(jù)。根據(jù)jQuery框架的運(yùn)行機(jī)制，下面幾種情況不需要手動(dòng)清除數(shù)據(jù)緩存。

* 對(duì)elem執(zhí)行remove()操作，jQuery會(huì)自動(dòng)清除對(duì)象可能存在的緩存。
* 對(duì)elem執(zhí)行empty()操作，如果當(dāng)前elem子元素存在數(shù)據(jù)緩存，jQuery也會(huì)清楚子對(duì)象可能存在的數(shù)據(jù)緩存。
* jQuery復(fù)制節(jié)點(diǎn)的clone()方法不會(huì)復(fù)制data緩存。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

最新評(píng)論