connectedCallback وdisconnectedCallback
تشغيل التعليمات البرمجية عند إضافة عنصر مخصص إلى DOM أو إزالته منه
connectedCallback وdisconnectedCallback درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
عمليات استدعاء دورة حياة العنصر
تكشف العناصر المخصصة أربعة مفاتيح لدورة الحياة: connectedCallback وdisconnectedCallback وattributeChangedCallback وadoptedCallback. وهي تحاكي نقاط التركيب/إلغاء التركيب/التحديث المعروفة في أي نموذج للمكوّنات.
يُشغّل connectedCallback عند الإدراج
يعمل connectedCallback في كل مرة يُدرج فيها العنصر في شجرة DOM. وهذا هو المكان المناسب لقراءة السمات وعرض المحتوى وإرفاق مستمعي الأحداث وبدء أي مؤقتات أو اشتراكات.
class Timer extends HTMLElement {
connectedCallback() {
this.start = Date.now();
this.interval = setInterval(() => this.render(), 1000);
this.render();
}
render() {
this.textContent = Math.floor((Date.now() - this.start) / 1000) + "s";
}
}قد يُشغّل أكثر من مرة
إذا أزيل العنصر ثم أُدرج مرة أخرى، فسيُستدعى connectedCallback مجددًا عند كل عملية إدراج. تُعد قابلية التنفيذ المتكرر دون آثار إضافية مهمة — احمِ التهيئة التي ينبغي أن تحدث مرة واحدة فقط باستخدام علامة، أو نفّذ الإعداد كاملًا في كل مرة ودَع disconnectedCallback يتولى التنظيف.
يُستدعى disconnectedCallback عند الإزالة
يُستدعى disconnectedCallback عند إزالة العنصر من DOM. هنا توقف الفواصل الزمنية، وألغِ عمليات fetch، وأزل مستمعات مستوى المستند، وحرّر أي مورد قد يتسبب خلاف ذلك في تسرّب.
disconnectedCallback() {
clearInterval(this.interval);
window.removeEventListener("resize", this.onResize);
}جمع البيانات المهملة والمستمعات
لن يخضع العنصر الذي يحتوي على فاصل زمني نشط أو مستمع للمستند أو وعد Promise لم يُحسم بعد لجمع البيانات المهملة حتى بعد فصله. احرص دائمًا على إقران كل اشتراك تنشئه في connectedCallback بالتنظيف داخل disconnectedCallback.
إعادة الاتصال بعد النقل
يؤدي نقل عنصر باستخدام parentB.appendChild(element) إلى إزالته أولًا من parentA، ثم إدراجه في parentB. يستدعي المتصفح disconnectedCallback ثم connectedCallback. خطّط لتنظيف وإعداد مؤقتين أثناء عمليات النقل.
توقيت الاتصال الأولي
بالنسبة إلى عنصر مكتوب مباشرةً في HTML، يُستدعى connectedCallback أثناء التحليل الأولي، بعد constructor. تكون السمات قد حُلِّلت بالفعل في هذه المرحلة، لذا تعيد قراءة this.getAttribute("name") قيمة الترميز.
قد لا تكون العناصر الفرعية قد حُلِّلت بعد
بالنسبة إلى عنصر له عناصر فرعية مُعلنة في HTML، قد لا تكون هذه العناصر موجودة في DOM بعد عند استدعاء connectedCallback، لأن المحلّل لا يزال يعمل. استخدم MutationObserver أو اقرأ العناصر الفرعية داخل requestAnimationFrame إذا كنت تحتاج إلى الوصول إليها.
adoptedCallback
يُستدعى adoptedCallback عند نقل عنصر إلى مستند جديد، عادةً عبر document.adoptNode. لا تستخدم معظم التطبيقات هذه الدالة مطلقًا — وتكمن أهميتها أساسًا في المكونات المنقولة بين إطارات iframe.
الاقتران مع AbortController
نمط نظيف: أنشئ AbortController في connectedCallback، ومرّر { signal: this.controller.signal } إلى كل من addEventListener وfetch، ثم استدعِ this.controller.abort() في disconnectedCallback لإزالتها جميعًا دفعة واحدة.
تجنّب العمليات الثقيلة في constructor
يُنفَّذ constructor حتى عندما يُنشأ العنصر عبر document.createElement ولا يُدرج مطلقًا. اقصر constructor على تعيين قيم الخصائص الأولية، وأجّل التصيير وجلب البيانات وإرفاق المستمعات إلى connectedCallback.
اختبار المعرفة
لماذا ينبغي إعداد الاشتراكات والمؤقتات في connectedCallback بدلًا من constructor الخاص بالعنصر؟
الخلاصة
يشكّل connectedCallback (الإدراج) وdisconnectedCallback (الإزالة) طرفي العمر النشط للعنصر. أعدّ المستمعات والفواصل الزمنية وعمليات fetch في connectedCallback، ونظّفها في disconnectedCallback لمنع التسرّبات. قد يُستدعى كلاهما مرات متعددة — استخدم AbortController لتنظيفها مجمّعةً بطريقة سليمة.
الأسئلة الشائعة
هل درس «connectedCallback وdisconnectedCallback» مجاني؟
نعم — نص درس «connectedCallback وdisconnectedCallback» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «connectedCallback وdisconnectedCallback»؟
تشغيل التعليمات البرمجية عند إضافة عنصر مخصص إلى DOM أو إزالته منه تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «connectedCallback وdisconnectedCallback»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تعريف العناصر باستخدام customElements.define
- connectedCallback وdisconnectedCallback
- السمات المرصودة وattributeChangedCallback
- توسيع العناصر المضمّنة