แอตทริบิวต์ที่สังเกตการณ์และ attributeChangedCallback
ตอบสนองต่อการเปลี่ยนแปลงแอตทริบิวต์ HTML ในองค์ประกอบกำหนดเอง
แอตทริบิวต์ที่สังเกตการณ์และ attributeChangedCallback เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
การตอบสนองต่อการเปลี่ยนแปลงของแอตทริบิวต์
องค์ประกอบ HTML เปิดเผยสถานะผ่านแอตทริบิวต์ หากต้องการตอบสนองเมื่อ <my-card name="A"> เปลี่ยนเป็น name="B" ให้ประกาศรายการแอตทริบิวต์ที่เฝ้าดูและใช้งาน attributeChangedCallback ในคลาส
observedAttributes แบบคงที่
ประกาศแอตทริบิวต์ที่ต้องการติดตามผ่านเก็ตเตอร์แบบคงที่: static get observedAttributes() { return ["name", "open"]; } เฉพาะแอตทริบิวต์ในรายการนี้เท่านั้นที่จะเรียกฟังก์ชันเรียกกลับ ส่วนแอตทริบิวต์อื่นจะถูกละเว้นเพื่อประสิทธิภาพ
class MyCard extends HTMLElement {
static get observedAttributes() { return ["name", "open"]; }
}รูปแบบพารามิเตอร์ของฟังก์ชันเรียกกลับ
attributeChangedCallback(name, oldValue, newValue) จะทำงานเมื่อแอตทริบิวต์ที่เฝ้าดูเปลี่ยนแปลงทุกครั้ง พารามิเตอร์ทั้งสามเป็นสตริง (หรือไม่มีค่าเมื่อไม่มีแอตทริบิวต์นั้น) ใช้พารามิเตอร์เหล่านี้เพื่ออัปเดตสถานะภายในและแสดงผลใหม่
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
if (name === "name") this.render();
if (name === "open") this.toggle(newValue !== null);
}ทำงานกับแอตทริบิวต์เริ่มต้นด้วย
ฟังก์ชันเรียกกลับจะทำงานหนึ่งครั้งสำหรับแอตทริบิวต์ที่เฝ้าดูแต่ละรายการซึ่งมีอยู่เมื่ออัปเกรดองค์ประกอบ ซึ่งหมายความว่าการแสดงผลใน attributeChangedCallback รองรับทั้งการแสดงผลครั้งแรกและครั้งถัดไป โดยไม่ต้องมีเส้นทางแยกใน connectedCallback
การสะท้อนคุณสมบัติไปยังแอตทริบิวต์
สำหรับแอตทริบิวต์แบบบูลีน ให้สะท้อนคุณสมบัติไปยังแอตทริบิวต์และในทางกลับกัน: การตั้งค่า element.open = true ควรเพิ่มแอตทริบิวต์ open และการนำแอตทริบิวต์ออกควรล้างค่าคุณสมบัติ ลักษณะนี้ตรงกับการทำงานขององค์ประกอบในตัว เช่น <details>
get open() { return this.hasAttribute("open"); }
set open(value) {
if (value) this.setAttribute("open", "");
else this.removeAttribute("open");
}หลีกเลี่ยงการวนซ้ำไม่สิ้นสุด
หาก attributeChangedCallback ตั้งค่าแอตทริบิวต์ที่ฟังก์ชันนี้เฝ้าดูอยู่ อาจทำให้เกิดการวนซ้ำไม่สิ้นสุดได้ ควรป้องกันด้วย if (oldValue === newValue) return; ที่ด้านบนสุดของฟังก์ชันเรียกกลับเสมอ และหลีกเลี่ยงการเปลี่ยนแอตทริบิวต์ที่เฝ้าดูจากภายในฟังก์ชันนี้
แอตทริบิวต์แบบบูลีน
ตามขนบของ HTML แอตทริบิวต์แบบบูลีนจะถือว่า "ตั้งค่าแล้ว" เมื่อมีแอตทริบิวต์อยู่ (disabled, open) และถือว่า "ไม่ได้ตั้งค่า" เมื่อไม่มีแอตทริบิวต์ ค่าของแอตทริบิวต์จะถูกละเว้น — disabled="false" ก็ยังหมายถึงถูกปิดใช้งาน ตรวจสอบการมีอยู่ด้วย hasAttribute อย่าเปรียบเทียบสตริง
JSON ในแอตทริบิวต์
แอตทริบิวต์เป็นสตริง หากต้องการส่งข้อมูลที่มีโครงสร้าง ให้ใช้ JSON.stringify ในมาร์กอัป แล้วแยกวิเคราะห์ใน attributeChangedCallback: <my-chart data-points='[1,2,3]'> สำหรับข้อมูลขนาดใหญ่ ควรส่งข้อมูลผ่านการกำหนดคุณสมบัติด้วย JS แทน
เปรียบเทียบกับ MutationObserver
คุณสามารถเฝ้าดูการเปลี่ยนแปลงของแอตทริบิวต์ด้วย MutationObserver ได้ แต่ observedAttributes + attributeChangedCallback ทำงานเร็วกว่า (ไม่ต้องตั้งค่าตัวเฝ้าดู) เป็นแบบประกาศ (มองเห็นรายการชื่อที่เฝ้าดูได้บนคลาส) และเป็นแนวทางมาตรฐานสำหรับองค์ประกอบเว็บ
ประสิทธิภาพ: รวมการแสดงผล
การเปลี่ยนแอตทริบิวต์หลายรายการอย่างรวดเร็วจะทำให้เกิดฟังก์ชันเรียกกลับและการแสดงผลหลายครั้ง รวมการแสดงผลด้วย queueMicrotask หรือ requestAnimationFrame เพื่อให้การแสดงผลจริงทำงานเพียงครั้งเดียวต่อไมโครทาสก์หรือเฟรม ไม่ว่าจะมีแอตทริบิวต์เปลี่ยนแปลงกี่รายการ
ข้อผิดพลาดที่พบบ่อย
การลืมเพิ่มแอตทริบิวต์ลงใน observedAttributes จะปิดใช้งานฟังก์ชันเรียกกลับสำหรับแอตทริบิวต์นั้นโดยไม่แสดงข้อผิดพลาด หากองค์ประกอบของคุณไม่ตอบสนองต่อการเรียก setAttribute สิ่งแรกที่ควรตรวจสอบคือรายการ observedAttributes แบบคงที่
ตรวจสอบความรู้
จะเกิดอะไรขึ้นหากคุณเรียก attributeChangedCallback ทางอ้อมด้วยการตั้งค่าแอตทริบิวต์ที่เฝ้าดูอยู่ภายในฟังก์ชันเรียกกลับ
สรุป
ประกาศแอตทริบิวต์ที่ต้องการติดตามผ่านเก็ตเตอร์ observedAttributes แบบคงที่ โดย attributeChangedCallback(name, oldValue, newValue) จะทำงานเมื่อเกิดการเปลี่ยนแปลงแต่ละครั้ง รวมถึงตอนแยกวิเคราะห์ครั้งแรก สะท้อนคุณสมบัติไปยังแอตทริบิวต์สำหรับสถานะแบบบูลีน ป้องกันการวนซ้ำไม่สิ้นสุด และรวมการแสดงผลด้วย requestAnimationFrame เพื่อประสิทธิภาพ
คำถามที่พบบ่อย
บทเรียน “แอตทริบิวต์ที่สังเกตการณ์และ attributeChangedCallback” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “แอตทริบิวต์ที่สังเกตการณ์และ attributeChangedCallback” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “แอตทริบิวต์ที่สังเกตการณ์และ attributeChangedCallback”
ตอบสนองต่อการเปลี่ยนแปลงแอตทริบิวต์ HTML ในองค์ประกอบกำหนดเอง คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “แอตทริบิวต์ที่สังเกตการณ์และ attributeChangedCallback” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การกำหนดองค์ประกอบด้วย customElements.define
- connectedCallback และ disconnectedCallback
- แอตทริบิวต์ที่สังเกตการณ์และ attributeChangedCallback
- การขยายองค์ประกอบในตัว