jQuery.data()-Methode und Speicherverlust

In der offiziellen Dokumentation von jQuery werden Benutzer daran erinnert, dass es sich hierbei um eine Low-Level-Methode handelt und durch die Methode .data() ersetzt werden sollte. $.data(element, key, value) kann jede Art von Daten an DOM-Elemente anhängen, aber Speicherverluste durch Zirkelverweise sollten vermieden werden. Der Originaltext lautet wie folgt:

Mit der jQuery.data()-Methode können wir Daten beliebiger Art an DOM-Elemente anhängen, ohne dass Zirkelverweise und damit Speicherverluste auftreten. Wir können mehrere unterschiedliche Werte für ein einzelnes Element festlegen und diese später abrufen:

Aber die Probleme mit dieser Methode hören hier nicht auf. Im JQUERY FORUM wurde dieses Problem ausführlich diskutiert und robert.katic schlug eine Lösung vor. Wenn die Methode $.data() auf das Hostobjekt angewendet wird, wird der Vorgang optimiert. Wenn diese Methode jedoch auf das lokale Objekt angewendet wird, ist das Ergebnis möglicherweise nicht zufriedenstellend. Unter normalen Umständen kann ein Element mit der Methode .remove() gelöscht und die entsprechenden Daten gelöscht werden. Bei lokalen Objekten kann dies jedoch nicht vollständig gelöscht werden. Diese zugehörigen Daten bleiben bestehen, bis das Fensterobjekt geschlossen wird. Diese Probleme bestehen auch im Event-Objekt, da auch Event-Handler (Handler) mit dieser Methode gespeichert werden.

Der einfachste Weg, dieses Problem zu lösen, besteht darin, die Daten in einem neuen Attribut des lokalen Objekts zu speichern. Im Augenblick:

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

Diese Methode ist jedoch nutzlos, wenn es um Vererbungsprobleme geht. Probieren Sie es aus:

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

$.data( parent, „foo“, „parent value“ );

// Das kann sogar Absicht sein
$.data( childA, "foo" )
// => "übergeordneter Wert"
$.data( childB, "foo" )
// => "übergeordneter Wert"

// Dies ist möglicherweise NICHT beabsichtigt
$.data( childA, „foo“, „childA value“ );
$.data( parent, „foo“ )
// => „childA-Wert“
$.data( childB, "foo" )
// => „childA-Wert“

Zu Beginn existiert das Objekt, das die Daten speichert, nicht, daher wird ein Objekt zum Speichern des neuen Werts erstellt, wie in der Abbildung dargestellt

Jetzt versuchen wir, dieselben Daten von Objekt childA zu ändern.

Das Objekt childA verfügt nicht über diese Daten, daher sucht es in der Prototypenkette nach. Das übergeordnete Objekt verfügt zufällig über diese Daten und sein Wert wird sofort überschrieben. Wenn Sie also den Wert von „foo“ aus den beiden Objekten parent und childB erhalten, erhalten Sie „childA value“ anstelle von „parent value“.