السمات المرصودة وattributeChangedCallback
الاستجابة لتغييرات سمات HTML في العناصر المخصصة
السمات المرصودة وattributeChangedCallback درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
الاستجابة لتغييرات السمات
تكشف عناصر HTML عن حالتها عبر السمات. للاستجابة لتحوّل <my-card name="A"> إلى name="B"، صرّح بقائمة السمات التي تتم مراقبتها ونفّذ attributeChangedCallback على الفئة.
observedAttributes الثابتة
صرّح بالسمات التي تهمك عبر getter ثابت: static get observedAttributes() { return ["name", "open"]; }. لا تؤدي إلا السمات الموجودة في هذه القائمة إلى تشغيل callback — ويتم تجاهل السمات الأخرى لتحسين الأداء.
class MyCard extends HTMLElement {
static get observedAttributes() { return ["name", "open"]; }
}توقيع callback
يُستدعى attributeChangedCallback(name, oldValue, newValue) عند كل تغيير في سمة مراقبة. تكون المعاملات الثلاثة جميعًا سلاسل نصية، أو null إذا كانت السمة غائبة. استخدمها لتحديث الحالة الداخلية وإعادة التصيير.
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
if (name === "name") this.render();
if (name === "open") this.toggle(newValue !== null);
}يُستدعى للسمات الأولية
يُستدعى callback مرة واحدة لكل سمة مراقبة موجودة عند ترقية العنصر. وهذا يعني أن التصيير داخل 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; في بداية callback، وتجنّب تغيير السمات المراقبة من داخله.
السمات المنطقية
وفقًا لاتفاقية HTML، تُضبط السمات المنطقية بوجودها (disabled، open) وتُلغى بغيابها. تُتجاهل قيمتها — فحتى disabled="false" يعني أن العنصر معطّل. تحقّق من وجود السمة باستخدام hasAttribute، ولا تقارن السلسلة النصية مطلقًا.
JSON في السمات
السمات سلاسل نصية. لتمرير بيانات مهيكلة، استخدم JSON.stringify في الترميز وحلّلها في attributeChangedCallback: <my-chart data-points='[1,2,3]'>. بالنسبة إلى الحمولات الكبيرة، فضّل تمرير البيانات عبر إسناد خاصية باستخدام JS.
مقارنةً بـ MutationObserver
يمكنك مراقبة تغييرات السمات باستخدام MutationObserver، لكن الجمع بين observedAttributes وattributeChangedCallback أسرع، لأنه لا يحتاج إلى إعداد Observer، وتصريحي لأن قائمة الأسماء المراقبة ظاهرة على الفئة، وهو الأسلوب المتعارف عليه لمكونات الويب.
الأداء: دمج عمليات التصيير
قد يؤدي تغيير عدة سمات بسرعة متتالية إلى تشغيل عدة عمليات callback وعدة عمليات تصيير. ادمجها باستخدام queueMicrotask أو requestAnimationFrame بحيث يُنفَّذ التصيير الفعلي مرة واحدة لكل microtask أو إطار، بغض النظر عن عدد السمات التي تغيّرت.
خطأ شائع
يؤدي نسيان إضافة سمة إلى observedAttributes إلى تعطيل callback لهذه السمة بصمت. إذا لم يتفاعل مكوّنك مع استدعاء setAttribute، فأول ما ينبغي التحقق منه هو قائمة observedAttributes الثابتة.
اختبار المعرفة
ماذا يحدث إذا استدعيت attributeChangedCallback بشكل غير مباشر عبر تعيين سمة مراقبة داخل callback؟
الخلاصة
صرّح بالسمات التي تريد تتبعها عبر getter observedAttributes الثابت؛ ويُستدعى attributeChangedCallback(name, oldValue, newValue) عند كل تغيير، بما في ذلك التحليل الأولي. اعكس الخصائص إلى السمات عند التعامل مع الحالة المنطقية، واحمِ من الحلقات اللانهائية، وادمج عمليات التصيير باستخدام requestAnimationFrame لتحسين الأداء.
الأسئلة الشائعة
هل درس «السمات المرصودة وattributeChangedCallback» مجاني؟
نعم — نص درس «السمات المرصودة وattributeChangedCallback» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «السمات المرصودة وattributeChangedCallback»؟
الاستجابة لتغييرات سمات HTML في العناصر المخصصة تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «السمات المرصودة وattributeChangedCallback»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تعريف العناصر باستخدام customElements.define
- connectedCallback وdisconnectedCallback
- السمات المرصودة وattributeChangedCallback
- توسيع العناصر المضمّنة