วิธีการ jQuery.data() และหน่วยความจำรั่ว

ในเอกสารอย่างเป็นทางการของ jQuery ผู้ใช้จะได้รับการเตือนว่านี่เป็นวิธีการระดับต่ำและควรแทนที่ด้วยวิธีการ .data() $.data(element, key, value) สามารถแนบข้อมูลประเภทใดก็ได้เข้ากับองค์ประกอบ DOM แต่ควรหลีกเลี่ยงการรั่วไหลของหน่วยความจำที่เกิดจากการอ้างอิงแบบวงกลม ข้อความต้นฉบับมีดังนี้:

เมธอด jQuery.data() ช่วยให้เราสามารถแนบข้อมูลประเภทใดก็ได้กับองค์ประกอบ DOM ในลักษณะที่ปลอดภัยจากการอ้างอิงแบบวงกลมและจากการรั่วไหลของหน่วยความจำ เราสามารถตั้งค่าที่แตกต่างกันหลายประการสำหรับองค์ประกอบเดียวและดึงข้อมูลเหล่านั้นในภายหลัง:

แต่ปัญหาของวิธีนี้ไม่ได้หยุดอยู่แค่นั้น ใน JQUERY FORUM มีการพูดคุยถึงปัญหานี้ในเชิงลึก และ robert.katic ได้เสนอวิธีแก้ปัญหา หากใช้เมธอด $.data() กับออบเจ็กต์โฮสต์ การดำเนินการจะถูกปรับให้เหมาะสม แต่หากใช้เมธอดนี้กับออบเจ็กต์ภายในเครื่อง ผลลัพธ์อาจไม่เป็นที่น่าพอใจ ภายใต้สถานการณ์ปกติ องค์ประกอบสามารถลบได้โดยใช้เมธอด .remove() และล้างข้อมูลตามลำดับ แต่สำหรับออบเจ็กต์ในเครื่อง ไม่สามารถลบข้อมูลที่เกี่ยวข้องเหล่านี้ได้จนกว่าจะปิดออบเจ็กต์หน้าต่าง ปัญหาเหล่านี้ยังมีอยู่ในวัตถุเหตุการณ์ เนื่องจากตัวจัดการเหตุการณ์ (ตัวจัดการ) จะถูกเก็บไว้โดยใช้วิธีนี้เช่นกัน

ดังนั้น วิธีที่ง่ายที่สุดในการแก้ปัญหานี้คือการจัดเก็บข้อมูลไว้ในแอตทริบิวต์ใหม่ของอ็อบเจ็กต์ในเครื่อง ตอนนี้:

-
ถ้า (elem.nodeType) {
แคช [id] = dataObject;
องค์ประกอบ[ขยาย] = id;
} อื่น {
องค์ประกอบ [ขยาย] = dataObject;
-
-

อย่างไรก็ตาม วิธีนี้ไม่มีประโยชน์เมื่อมีปัญหาเรื่องการสืบทอด ลองมัน:

var parent = {};
var childA = Object.create( พาเรนต์ );
var childB = Object.create( พาเรนต์ );

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

//นี่อาจจะเป็นการจงใจก็ได้
$.data( childA, "foo" )
// => "ค่าหลัก"
$.data( childB, "foo" )
// => "ค่าหลัก"

//นี่อาจไม่ได้ตั้งใจ
$.data( childA, "foo", "ค่า childA" );
$.data( ผู้ปกครอง "foo" )
// => "ค่า childA"
$.data( childB, "foo" )
// => "ค่า childA"

ในตอนแรกวัตถุที่เก็บข้อมูลไม่มีอยู่จึงสร้างวัตถุขึ้นมาเพื่อเก็บค่าใหม่ดังแสดงในรูป

ตอนนี้เราพยายามแก้ไขข้อมูลเดียวกันของวัตถุ childA

อ็อบเจ็กต์ childA ไม่มีข้อมูลนี้ ดังนั้นจึงค้นหาเชนต้นแบบซึ่งมีข้อมูลนี้อยู่ และค่าของมันก็จะถูกเขียนทับทันที ดังนั้น หากคุณได้รับค่า "foo" จากวัตถุทั้งสองรายการ parent และ childB คุณจะได้รับ "ค่า childA" แทนที่จะเป็น "ค่า parent"