14 سبتمبر 2025العربية

نظرة عميقة في دورة حياة مكونات الويب، تغطي إنشاء العناصر المخصصة، والاتصال، وتغييرات السمات، والانفصال. تعلم بناء مكونات قوية وقابلة لإعادة الاستخدام لتطبيقات الويب الحديثة.

دورة حياة مكونات الويب: إتقان إنشاء وإدارة العناصر المخصصة

مكونات الويب هي أداة قوية لبناء عناصر واجهة مستخدم قابلة لإعادة الاستخدام ومغلفة في تطوير الويب الحديث. إن فهم دورة حياة مكون الويب أمر بالغ الأهمية لإنشاء تطبيقات قوية وقابلة للصيانة وعالية الأداء. يستكشف هذا الدليل الشامل المراحل المختلفة لدورة حياة مكون الويب، ويقدم شروحات مفصلة وأمثلة عملية لمساعدتك على إتقان إنشاء وإدارة العناصر المخصصة.

ما هي مكونات الويب؟

مكونات الويب هي مجموعة من واجهات برمجة تطبيقات منصة الويب التي تسمح لك بإنشاء عناصر HTML مخصصة قابلة لإعادة الاستخدام مع تنسيق وسلوك مغلف. تتكون من ثلاث تقنيات رئيسية:

العناصر المخصصة (Custom Elements): تمكنك من تعريف علامات HTML الخاصة بك ومنطق جافاسكريبت المرتبط بها.
Shadow DOM: يوفر التغليف عن طريق إنشاء شجرة DOM منفصلة للمكون، مما يحميه من تنسيقات ونصوص المستند العامة.
قوالب HTML (HTML Templates): تسمح لك بتعريف مقتطفات HTML قابلة لإعادة الاستخدام يمكن استنساخها وإدراجها بكفاءة في DOM.

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

دورة حياة مكونات الويب

تُعرّف دورة حياة مكون الويب المراحل المختلفة التي يمر بها العنصر المخصص من إنشائه إلى إزالته من DOM. يتيح لك فهم هذه المراحل أداء إجراءات محددة في الوقت المناسب، مما يضمن أن مكونك يتصرف بشكل صحيح وبكفاءة.

طرق دورة الحياة الأساسية هي:

constructor(): يتم استدعاء المُنشئ (constructor) عند إنشاء العنصر أو ترقيته. هذا هو المكان الذي تقوم فيه بتهيئة حالة المكون وإنشاء Shadow DOM الخاص به (إذا لزم الأمر).
connectedCallback(): تُستدعى في كل مرة يتم فيها توصيل العنصر المخصص بـ DOM الخاص بالمستند. هذا مكان جيد لأداء مهام الإعداد، مثل جلب البيانات، أو إضافة مستمعي الأحداث، أو عرض المحتوى الأولي للمكون.
disconnectedCallback(): تُستدعى في كل مرة يتم فيها فصل العنصر المخصص عن DOM الخاص بالمستند. هذا هو المكان الذي يجب عليك فيه تنظيف أي موارد، مثل إزالة مستمعي الأحداث أو إلغاء المؤقتات، لمنع تسرب الذاكرة.
attributeChangedCallback(name, oldValue, newValue): تُستدعى في كل مرة يتم فيها إضافة أو إزالة أو تحديث أو استبدال إحدى سمات العنصر المخصص. يسمح لك هذا بالاستجابة للتغييرات في سمات المكون وتحديث سلوكه وفقًا لذلك. تحتاج إلى تحديد السمات التي تريد مراقبتها باستخدام المُحصّل الثابت observedAttributes.
adoptedCallback(): تُستدعى في كل مرة يتم فيها نقل العنصر المخصص إلى مستند جديد. هذا الأمر ذو صلة عند العمل مع iframes أو عند نقل العناصر بين أجزاء مختلفة من التطبيق.

الغوص أعمق في كل طريقة من طرق دورة الحياة

1. constructor()

المُنشئ هو أول طريقة يتم استدعاؤها عند إنشاء نسخة جديدة من العنصر المخصص الخاص بك. إنه المكان المثالي لـ:

تهيئة الحالة الداخلية للمكون.
إنشاء Shadow DOM باستخدام this.attachShadow({ mode: 'open' }) أو this.attachShadow({ mode: 'closed' }). يحدد mode ما إذا كان Shadow DOM قابلاً للوصول من جافاسكريبت خارج المكون (open) أم لا (closed). يوصى عمومًا باستخدام open لتسهيل التصحيح.
ربط طرق معالج الأحداث بنسخة المكون (باستخدام this.methodName = this.methodName.bind(this)) لضمان أن this يشير إلى نسخة المكون داخل المعالج.

اعتبارات هامة للمُنشئ:

يجب عدم القيام بأي تلاعب في DOM داخل المُنشئ. العنصر لم يتم توصيله بالكامل بـ DOM بعد، ومحاولة تعديله قد تؤدي إلى سلوك غير متوقع. استخدم connectedCallback للتلاعب بـ DOM.
تجنب استخدام السمات في المُنشئ. قد لا تكون السمات متاحة بعد. استخدم connectedCallback أو attributeChangedCallback بدلاً من ذلك.
استدعِ super() أولاً. هذا إلزامي إذا كنت ترث من فئة أخرى (عادةً HTMLElement).

مثال:


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    // إنشاء shadow root
    this.shadow = this.attachShadow({mode: 'open'});
    this.message = "Hello, world!";
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    alert(this.message);
  }
}

2. connectedCallback()

يتم استدعاء connectedCallback عند توصيل العنصر المخصص بـ DOM الخاص بالمستند. هذا هو المكان الأساسي لـ:

جلب البيانات من واجهة برمجة تطبيقات (API).
إضافة مستمعي الأحداث إلى المكون أو Shadow DOM الخاص به.
عرض المحتوى الأولي للمكون في Shadow DOM.
مراقبة تغييرات السمات إذا لم تكن المراقبة الفورية في المُنشئ ممكنة.

مثال:


class MyCustomElement extends HTMLElement {
  // ... المُنشئ ...

  connectedCallback() {
    // إنشاء عنصر زر
    const button = document.createElement('button');
    button.textContent = 'Click me!';
    button.addEventListener('click', this.handleClick);
    this.shadow.appendChild(button);

    // جلب البيانات (مثال)
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.data = data;
        this.render(); // استدعاء طريقة العرض لتحديث واجهة المستخدم
      });
  }

  render() {
    // تحديث Shadow DOM بناءً على البيانات
    const dataElement = document.createElement('p');
    dataElement.textContent = JSON.stringify(this.data);
    this.shadow.appendChild(dataElement);
  }

  handleClick() {
      alert("Button clicked!");
  }
}

3. disconnectedCallback()

يتم استدعاء disconnectedCallback عند فصل العنصر المخصص عن DOM الخاص بالمستند. هذا أمر بالغ الأهمية لـ:

إزالة مستمعي الأحداث لمنع تسرب الذاكرة.
إلغاء أي مؤقتات أو فترات زمنية.
تحرير أي موارد يحتفظ بها المكون.

مثال:


class MyCustomElement extends HTMLElement {
  // ... المُنشئ, connectedCallback ...

  disconnectedCallback() {
    // إزالة مستمع الحدث
    this.shadow.querySelector('button').removeEventListener('click', this.handleClick);

    // إلغاء أي مؤقتات (مثال)
    if (this.timer) {
      clearInterval(this.timer);
    }

    console.log('Component disconnected from the DOM.');
  }
}

4. attributeChangedCallback(name, oldValue, newValue)

يتم استدعاء attributeChangedCallback كلما تغيرت سمة من سمات العنصر المخصص، ولكن فقط للسمات المدرجة في المُحصّل الثابت observedAttributes. هذه الطريقة ضرورية لـ:

التفاعل مع التغييرات في قيم السمات وتحديث سلوك المكون أو مظهره.
التحقق من صحة قيم السمات.

الجوانب الرئيسية:

يجب عليك تعريف مُحصّل ثابت يسمى observedAttributes يعيد مصفوفة من أسماء السمات التي تريد مراقبتها.
سيتم استدعاء attributeChangedCallback فقط للسمات المدرجة في observedAttributes.
تتلقى الطريقة ثلاث وسائط: name للسمة التي تغيرت، و oldValue (القيمة القديمة)، و newValue (القيمة الجديدة).
ستكون oldValue هي null إذا تمت إضافة السمة حديثًا.

مثال:


class MyCustomElement extends HTMLElement {
  // ... المُنشئ, connectedCallback, disconnectedCallback ...

  static get observedAttributes() {
    return ['message', 'data-count']; // مراقبة السمتين 'message' و 'data-count'
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'message') {
      this.message = newValue; // تحديث الحالة الداخلية
      this.renderMessage(); // إعادة عرض الرسالة
    } else if (name === 'data-count') {
      const count = parseInt(newValue, 10);
      if (!isNaN(count)) {
        this.count = count; // تحديث العدد الداخلي
        this.renderCount(); // إعادة عرض العدد
      } else {
        console.error('Invalid data-count attribute value:', newValue);
      }
    }
  }

  renderMessage() {
    // تحديث عرض الرسالة في Shadow DOM
    let messageElement = this.shadow.querySelector('.message');

    if (!messageElement) {
      messageElement = document.createElement('p');
      messageElement.classList.add('message');
      this.shadow.appendChild(messageElement);
    }

    messageElement.textContent = this.message;
  }

  renderCount(){
    let countElement = this.shadow.querySelector('.count');

    if(!countElement){
        countElement = document.createElement('p');
        countElement.classList.add('count');
        this.shadow.appendChild(countElement);
    }

    countElement.textContent = `Count: ${this.count}`;
  }
}

استخدام attributeChangedCallback بفعالية:

التحقق من الإدخال: استخدم رد النداء للتحقق من صحة القيمة الجديدة لضمان سلامة البيانات.
تأخير التحديثات (Debounce): للتحديثات المكلفة حسابيًا، فكر في تأخير معالج تغيير السمة لتجنب إعادة العرض المفرطة.
النظر في البدائل: للبيانات المعقدة، فكر في استخدام الخصائص بدلاً من السمات والتعامل مع التغييرات مباشرة داخل مُعيّن الخاصية (property setter).

5. adoptedCallback()

يتم استدعاء adoptedCallback عند نقل العنصر المخصص إلى مستند جديد (على سبيل المثال، عند نقله من iframe إلى آخر). هذه طريقة دورة حياة أقل استخدامًا، ولكن من المهم أن تكون على دراية بها عند العمل مع سيناريوهات أكثر تعقيدًا تتضمن سياقات المستندات.

مثال:


class MyCustomElement extends HTMLElement {
  // ... المُنشئ, connectedCallback, disconnectedCallback, attributeChangedCallback ...

  adoptedCallback() {
    console.log('Component adopted into a new document.');
    // قم بإجراء أي تعديلات ضرورية عند نقل المكون إلى مستند جديد
    // قد يشمل ذلك تحديث المراجع إلى الموارد الخارجية أو إعادة تأسيس الاتصالات.
  }
}

تعريف عنصر مخصص

بمجرد تعريف فئة العنصر المخصص الخاصة بك، تحتاج إلى تسجيلها لدى المتصفح باستخدام customElements.define():


customElements.define('my-custom-element', MyCustomElement);

الوسيط الأول هو اسم العلامة لعنصرك المخصص (على سبيل المثال، 'my-custom-element'). يجب أن يحتوي اسم العلامة على واصلة (-) لتجنب التعارض مع عناصر HTML القياسية.

الوسيط الثاني هو الفئة التي تحدد سلوك عنصرك المخصص (على سبيل المثال، MyCustomElement).

بعد تعريف العنصر المخصص، يمكنك استخدامه في HTML الخاص بك مثل أي عنصر HTML آخر:


<my-custom-element message="Hello from attribute!" data-count="10"></my-custom-element>

أفضل الممارسات لإدارة دورة حياة مكونات الويب

اجعل المُنشئ خفيفًا: تجنب إجراء تلاعب في DOM أو حسابات معقدة في المُنشئ. استخدم connectedCallback لهذه المهام.
نظف الموارد في disconnectedCallback: قم دائمًا بإزالة مستمعي الأحداث، وإلغاء المؤقتات، وتحرير الموارد في disconnectedCallback لمنع تسرب الذاكرة.
استخدم observedAttributes بحكمة: راقب فقط السمات التي تحتاج بالفعل إلى التفاعل معها. مراقبة السمات غير الضرورية يمكن أن تؤثر على الأداء.
فكر في استخدام مكتبة للعرض (rendering library): لتحديثات واجهة المستخدم المعقدة، فكر في استخدام مكتبة عرض مثل LitElement أو uhtml لتبسيط العملية وتحسين الأداء.
اختبر مكوناتك جيدًا: اكتب اختبارات وحدة (unit tests) لضمان أن مكوناتك تتصرف بشكل صحيح طوال دورة حياتها.

مثال: مكون عداد بسيط

لنقم بإنشاء مكون عداد بسيط يوضح استخدام دورة حياة مكون الويب:


class CounterComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.count = 0;
    this.increment = this.increment.bind(this);
  }

  connectedCallback() {
    this.render();
    this.shadow.querySelector('button').addEventListener('click', this.increment);
  }

  disconnectedCallback() {
    this.shadow.querySelector('button').removeEventListener('click', this.increment);
  }

  increment() {
    this.count++;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      <p>Count: ${this.count}</p>
      <button>Increment</button>
    `;
  }
}

customElements.define('counter-component', CounterComponent);

يحافظ هذا المكون على متغير count داخلي ويقوم بتحديث العرض عند النقر على الزر. يضيف connectedCallback مستمع الحدث، ويزيله disconnectedCallback.

تقنيات متقدمة لمكونات الويب

1. استخدام الخصائص بدلاً من السمات

بينما تكون السمات مفيدة للبيانات البسيطة، توفر الخصائص مزيدًا من المرونة والأمان من حيث النوع. يمكنك تعريف خصائص على عنصرك المخصص واستخدام المُحصّلات (getters) والمُعيّنات (setters) للتحكم في كيفية الوصول إليها وتعديلها.


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._data = null; // استخدام خاصية خاصة لتخزين البيانات
  }

  get data() {
    return this._data;
  }

  set data(value) {
    this._data = value;
    this.renderData(); // إعادة عرض المكون عند تغيير البيانات
  }

  connectedCallback() {
    // العرض الأولي
    this.renderData();
  }

  renderData() {
    // تحديث Shadow DOM بناءً على البيانات
    this.shadow.innerHTML = `<p>Data: ${JSON.stringify(this._data)}</p>`;
  }
}

customElements.define('my-data-element', MyCustomElement);

يمكنك بعد ذلك تعيين خاصية data مباشرة في جافاسكريبت:


const element = document.querySelector('my-data-element');
element.data = { name: 'John Doe', age: 30 };

2. استخدام الأحداث للتواصل

الأحداث المخصصة هي طريقة قوية لمكونات الويب للتواصل مع بعضها البعض ومع العالم الخارجي. يمكنك إرسال أحداث مخصصة من مكونك والاستماع إليها في أجزاء أخرى من تطبيقك.


class MyCustomElement extends HTMLElement {
  // ... المُنشئ, connectedCallback ...

  dispatchCustomEvent() {
    const event = new CustomEvent('my-custom-event', {
      detail: { message: 'Hello from the component!' },
      bubbles: true, // السماح للحدث بالتصاعد عبر شجرة DOM
      composed: true // السماح للحدث بعبور حدود Shadow DOM
    });

    this.dispatchEvent(event);
  }
}

customElements.define('my-event-element', MyCustomElement);

// الاستماع للحدث المخصص في المستند الأصلي
document.addEventListener('my-custom-event', (event) => {
  console.log('Custom event received:', event.detail.message);
});

3. تنسيق Shadow DOM

يوفر Shadow DOM تغليفًا للتنسيقات، مما يمنع تسرب التنسيقات إلى داخل المكون أو خارجه. يمكنك تنسيق مكونات الويب الخاصة بك باستخدام CSS داخل Shadow DOM.

التنسيقات المضمنة (Inline Styles):


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      <style>
        p {
          color: blue;
        }
      </style>
      <p>This is a styled paragraph.</p>
    `;
  }
}

أوراق الأنماط الخارجية (External Stylesheets):

يمكنك أيضًا تحميل أوراق الأنماط الخارجية في Shadow DOM:


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });

    const linkElem = document.createElement('link');
    linkElem.setAttribute('rel', 'stylesheet');
    linkElem.setAttribute('href', 'my-component.css');

    this.shadow.appendChild(linkElem);
    this.shadow.innerHTML += '<p>This is a styled paragraph.</p>';
  }
}

الخاتمة

إتقان دورة حياة مكون الويب أمر ضروري لبناء مكونات قوية وقابلة لإعادة الاستخدام لتطبيقات الويب الحديثة. من خلال فهم طرق دورة الحياة المختلفة واستخدام أفضل الممارسات، يمكنك إنشاء مكونات سهلة الصيانة وعالية الأداء وتتكامل بسلاسة مع أجزاء أخرى من تطبيقك. قدم هذا الدليل نظرة شاملة على دورة حياة مكون الويب، بما في ذلك شروحات مفصلة وأمثلة عملية وتقنيات متقدمة. احتضن قوة مكونات الويب وقم ببناء تطبيقات ويب نمطية وقابلة للصيانة والتطوير.

لمزيد من التعلم:

MDN Web Docs: وثائق شاملة حول مكونات الويب والعناصر المخصصة.
WebComponents.org: مورد مدفوع من المجتمع لمطوري مكونات الويب.
LitElement: فئة أساسية بسيطة لإنشاء مكونات ويب سريعة وخفيفة الوزن.