metode jQuery.data() dan kebocoran memori

Dalam dokumentasi resmi jQuery , pengguna diingatkan bahwa ini adalah metode tingkat rendah dan harus diganti dengan metode .data() . $.data(element, key, value) dapat melampirkan semua jenis data ke elemen DOM, tetapi kebocoran memori yang disebabkan oleh referensi melingkar harus dihindari.

Metode jQuery.data() memungkinkan kita untuk melampirkan data jenis apa pun ke elemen DOM dengan cara yang aman dari referensi melingkar dan oleh karena itu dari kebocoran memori. Kita dapat menetapkan beberapa nilai berbeda untuk satu elemen dan mengambilnya nanti:

Namun masalah dengan metode ini tidak berhenti sampai di situ. Di JQUERY FORUM, masalah ini dibahas secara mendalam, dan robert.katic mengusulkan solusinya. Jika metode $.data() diterapkan pada objek host, operasi akan dioptimalkan, tetapi jika metode ini digunakan pada objek lokal, hasilnya mungkin tidak memuaskan. Dalam keadaan normal, sebuah elemen dapat dihapus menggunakan metode .remove() dan datanya masing-masing akan dihapus. Namun untuk objek lokal, ini tidak dapat dihapus sepenuhnya. Data terkait ini berlanjut hingga objek jendela ditutup. Masalah ini juga ada pada objek event, karena event handler (handler) juga disimpan menggunakan metode ini.

Jadi, cara termudah untuk mengatasi masalah ini adalah dengan menyimpan data dalam atribut baru dari objek lokal. Sekarang:

// ...
if (elem.nodeType) {
cache[id] = objek data;
elemen[expando] = id;
} kalau tidak {
elem[expando] = dataObject;
}
// ...

Namun, metode ini tidak ada gunanya jika menyangkut masalah warisan. Cobalah:

var induk = {};
var childA = Objek.buat( induk );
var childB = Objek.buat( induk );

$.data( induk, "foo", "nilai induk" );

// Ini bahkan mungkin disengaja
$.data( anakA, "foo" )
// => "nilai induk"
$.data( anakB, "foo" )
// => "nilai induk"

// Ini mungkin TIDAK disengaja
$.data( anakA, "foo", "nilai anakA" );
$.data( orang tua, "foo" )
// => "nilai anakA"
$.data( anakB, "foo" )
// => "nilai anakA"

Pada awalnya objek penyimpan data belum ada, sehingga dibuatlah objek untuk menyimpan nilai baru, seperti terlihat pada gambar

Sekarang, kami mencoba memodifikasi data yang sama dari objek childA.

Objek childA tidak memiliki data ini, sehingga ia mencari rantai prototipe. Objek induk kebetulan memiliki data ini, dan nilainya segera ditimpa. Oleh karena itu, jika Anda mendapatkan nilai "foo" dari dua objek induk dan anakB, Anda akan mendapatkan "nilai anakA" dan bukan "nilai induk".