jQuery.data( )方法與內存泄漏

在jQuery的官方文檔中，提示用戶這是一個低級的方法，應該用.data()方法來代替。$.data( element, key, value )可以對DOM元素附加任何類型的數據，但應避免循環引用而導致的內存泄漏問題，原文如下：

The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can set several distinct values for a single element and retrieve them later:

但對于該方法，存在的問題也不僅于此。在JQUERY FORUM中 ，對該問題作了深入的討論，robert.katic 提出了一條解決方案。$.data()方法應用到宿主對象上,運行會得到優化，但在本地對像上使用該方法，結果未必盡如人意。一個元素在正常情況下可以使用.remove()方法將其刪除，并清除各自的數據。但對于本地對象而言，這是不能徹底刪除的，這些相關的數據一直持續到窗口對象關閉。同樣，這些問題也存在于event 對象中，因為事件處理器(handlers)也是用該方法來存儲的。

那么，要解決該問題最簡單的方法是將數據存儲到本地對象新增的一個屬性之中。即：

// ...
if ( elem.nodeType ) {
cache[ id ] = dataObject;
elem[ expando ] = id;
} else {
elem[ expando ] = dataObject;
}
// ...

但是，一旦涉及到繼承問題，該方法就無能為力。試看：

var parent = {};
var childA = Object.create( parent );
var childB = Object.create( parent );

$.data( parent, "foo", "parent value" );

// This may even be intentional
$.data( childA, "foo" ) // => "parent value"
$.data( childB, "foo" ) // => "parent value"

// This may NOT be intentional
$.data( childA, "foo", "childA value" );
$.data( parent, "foo" ) // => "childA value"
$.data( childB, "foo" ) // => "childA value"

開始時，存儲數據的對象不存在，因此創建一個對象來存儲新的值，如圖

現在，我們嘗試去修改對象childA同樣的數據。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈