JavaScript Academy · درس

عمليات استدعاء دورة الحياة

اربطوا التعليمات البرمجية بتغييرات الاتصال والانفصال والسمات.

عمليات استدعاء دورة الحياة درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

دورة حياة العنصر

للعناصر المخصصة دورة حياة محددة. يستدعي المتصفح أساليب خاصة في الصنف الخاص بكم في لحظات مهمة:

connectedCallback — عند إضافته إلى DOM
disconnectedCallback — عند إزالته من DOM
attributeChangedCallback — عند تغيّر سمة تتم مراقبتها
adoptedCallback — عند نقله إلى مستند جديد

connectedCallback

يعمل connectedCallback في كل مرة يُدرج فيها العنصر في المستند. وهذا هو المكان المثالي لعرض المحتوى أو جلب البيانات أو إرفاق مستمعي الأحداث العامة.

وقد يُستدعى عدة مرات إذا نُقل العنصر من مكان إلى آخر.

class StatusBadge extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Online';
    console.log('badge added to page');
  }
}
customElements.define('status-badge', StatusBadge);

disconnectedCallback

يعمل disconnectedCallback عند إزالة العنصر من DOM. استخدموه لإجراء التنظيف: أزيلوا مستمعي الأحداث العامة، أو ألغوا المؤقتات، أو أغلقوا الاتصالات لتجنب تسرّب الذاكرة.

class ClockWidget extends HTMLElement {
  connectedCallback() {
    this.timer = setInterval(() => {
      this.textContent = new Date().toLocaleTimeString();
    }, 1000);
  }
  disconnectedCallback() {
    clearInterval(this.timer); // cleanup
  }
}
customElements.define('clock-widget', ClockWidget);

مراقبة السمات

للاستجابة لتغيّرات السمات، يجب التصريح بالسمات التي تريدون مراقبتها باستخدام getter ثابت باسم observedAttributes يُعيد مصفوفة من الأسماء.

السمات المدرجة فقط تؤدي إلى تشغيل attributeChangedCallback.

class AvatarImage extends HTMLElement {
  static get observedAttributes() {
    return ['src', 'alt'];
  }
}
customElements.define('avatar-image', AvatarImage);

attributeChangedCallback

عند إضافة سمة تتم مراقبتها أو إزالتها أو تغييرها، يستدعي المتصفح attributeChangedCallback(name, oldValue, newValue). استخدموه للحفاظ على تزامن المحتوى المعروض مع السمات.

class AvatarImage extends HTMLElement {
  static get observedAttributes() { return ['src']; }
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'src') {
      this.innerHTML = '<img src="' + newValue + '">';
    }
  }
}
customElements.define('avatar-image', AvatarImage);

وسائط الاستدعاء

يتلقى attributeChangedCallback ثلاث وسائط:

name — السمة التي تغيّرت
oldValue — القيمة السابقة (تكون null إذا أُضيفت السمة حديثًا)
newValue — القيمة الجديدة (تكون null إذا أُزيلت السمة)

قارنوا بين القيمتين القديمة والجديدة لتجنب العمل غير الضروري.

attributeChangedCallback(name, oldValue, newValue) {
  if (oldValue === newValue) return; // no real change
  console.log(name + ' changed to ' + newValue);
}

الاستدعاءات الأولية للسمات

إذا كان العنصر يتضمن سمة تتم مراقبتها عند ترقيته، فسيُشغّل attributeChangedCallback مرة لكل سمة منها قبل connectedCallback. ويتيح لكم ذلك التهيئة تلقائيًا انطلاقًا من HTML.

// <avatar-image src="a.png"></avatar-image>
// On upgrade: attributeChangedCallback('src', null, 'a.png')
// runs BEFORE connectedCallback.

عكس الخصائص إلى السمات

من الأنماط الشائعة إتاحة خاصية JavaScript تقرأ السمة وتكتبها. ويحافظ ذلك على سهولة استخدام API مع إبقائها متزامنة.

class AvatarImage extends HTMLElement {
  static get observedAttributes() { return ['src']; }
  get src() { return this.getAttribute('src'); }
  set src(value) { this.setAttribute('src', value); }
}
customElements.define('avatar-image', AvatarImage);

adoptedCallback

يعمل adoptedCallback عند نقل عنصر من مستند إلى آخر (مثلًا إلى iframe عبر document.adoptNode). ونادرًا ما تكون هناك حاجة إليه، لكنه يُكمل دورة الحياة.

class PortableWidget extends HTMLElement {
  adoptedCallback() {
    console.log('moved to a new document');
  }
}
customElements.define('portable-widget', PortableWidget);

ترتيب دورة الحياة

بالنسبة إلى عنصر مكتوب مباشرةً في HTML، يكون الترتيب المعتاد كما يلي:

constructor
attributeChangedCallback (مرة واحدة لكل سمة موجودة تتم مراقبتها)
connectedCallback

ثم لاحقًا، عند الإزالة، يُستدعى disconnectedCallback.

جمع الأجزاء معًا

يوصل العنصر الكامل جميع الأجزاء معًا: يراقب السمات، ويعرض المحتوى عند الاتصال، ويزامن المحتوى عند تغيّر السمة، وينظف الموارد عند الانفصال.

class GreetUser extends HTMLElement {
  static get observedAttributes() { return ['name']; }
  connectedCallback() { this.render(); }
  attributeChangedCallback() { this.render(); }
  render() {
    const name = this.getAttribute('name') || 'Guest';
    this.textContent = 'Hello, ' + name;
  }
}
customElements.define('greet-user', GreetUser);

اختبار سريع

اختبروا معرفتكم باستدعاءات دورة الحياة.

مراجعة

تعلمتم دورة حياة العنصر المخصص:

يعمل connectedCallback عند الإدراج — اعرضوا المحتوى هنا.
يعمل disconnectedCallback عند الإزالة — أجروا التنظيف هنا.
يصرّح observedAttributes بالسمات التي تجب مراقبتها.
يستجيب attributeChangedCallback(name, old, new) للتغيّرات.
يتولى adoptedCallback عمليات النقل بين المستندات.

سنغلّف بعد ذلك الأنماط والترميز باستخدام Shadow DOM.

الأسئلة الشائعة

هل درس «عمليات استدعاء دورة الحياة» مجاني؟

نعم — نص درس «عمليات استدعاء دورة الحياة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «عمليات استدعاء دورة الحياة»؟

اربطوا التعليمات البرمجية بتغييرات الاتصال والانفصال والسمات. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «عمليات استدعاء دورة الحياة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy