۲۳ شهریور ۱۴۰۴فارسی

نگاهی عمیق به چرخه حیات وب کامپوننت، شامل ایجاد، اتصال، تغییرات اتریبیوت و قطع اتصال عناصر سفارشی. ساخت کامپوننت‌های قوی و قابل استفاده مجدد برای وب‌اپلیکیشن‌های مدرن را بیاموزید.

چرخه حیات وب کامپوننت: تسلط بر ایجاد و مدیریت عناصر سفارشی

وب کامپوننت‌ها ابزاری قدرتمند برای ساخت عناصر رابط کاربری (UI) قابل استفاده مجدد و کپسوله‌شده در توسعه وب مدرن هستند. درک چرخه حیات یک وب کامپوننت برای ایجاد اپلیکیشن‌های قوی، قابل نگهداری و با عملکرد بالا حیاتی است. این راهنمای جامع، مراحل مختلف چرخه حیات وب کامپوننت را بررسی کرده و توضیحات دقیق و مثال‌های عملی برای کمک به شما در تسلط بر ایجاد و مدیریت عناصر سفارشی ارائه می‌دهد.

وب کامپوننت‌ها چه هستند؟

وب کامپوننت‌ها مجموعه‌ای از APIهای پلتفرم وب هستند که به شما امکان می‌دهند عناصر HTML سفارشی قابل استفاده مجدد با استایل‌دهی و رفتار کپسوله‌شده ایجاد کنید. آن‌ها از سه فناوری اصلی تشکیل شده‌اند:

عناصر سفارشی (Custom Elements): به شما امکان می‌دهند تگ‌های HTML خود و منطق جاوا اسکریپت مرتبط با آن‌ها را تعریف کنید.
Shadow DOM: با ایجاد یک درخت DOM جداگانه برای کامپوننت، کپسوله‌سازی را فراهم می‌کند و آن را از استایل‌ها و اسکریپت‌های سند سراسری محافظت می‌کند.
قالب‌های HTML (HTML Templates): به شما امکان می‌دهند قطعات HTML قابل استفاده مجدد را تعریف کنید که می‌توانند به طور کارآمد کلون شده و در DOM درج شوند.

وب کامپوننت‌ها قابلیت استفاده مجدد از کد را ترویج می‌دهند، قابلیت نگهداری را بهبود می‌بخشند و امکان ساخت رابط‌های کاربری پیچیده را به روشی ماژولار و سازمان‌یافته فراهم می‌کنند. آن‌ها توسط تمام مرورگرهای اصلی پشتیبانی می‌شوند و می‌توانند با هر فریمورک یا کتابخانه جاوا اسکریپت، یا حتی بدون هیچ فریمورکی استفاده شوند.

چرخه حیات وب کامپوننت

چرخه حیات وب کامپوننت مراحل مختلفی را که یک عنصر سفارشی از زمان ایجاد تا حذف از DOM طی می‌کند، تعریف می‌کند. درک این مراحل به شما امکان می‌دهد تا اقدامات خاصی را در زمان مناسب انجام دهید و اطمینان حاصل کنید که کامپوننت شما به درستی و با کارایی بالا رفتار می‌کند.

متدهای اصلی چرخه حیات عبارتند از:

constructor(): کانستراکتور زمانی فراخوانی می‌شود که عنصر ایجاد یا ارتقا می‌یابد. اینجاست که شما وضعیت کامپوننت را مقداردهی اولیه کرده و Shadow DOM آن را (در صورت نیاز) ایجاد می‌کنید.
connectedCallback(): هر بار که عنصر سفارشی به DOM سند متصل می‌شود، فراخوانی می‌شود. این مکان مناسبی برای انجام وظایف راه‌اندازی مانند واکشی داده‌ها، افزودن event listenerها یا رندر کردن محتوای اولیه کامپوننت است.
disconnectedCallback(): هر بار که عنصر سفارشی از DOM سند جدا می‌شود، فراخوانی می‌شود. اینجاست که باید منابع را پاکسازی کنید، مانند حذف event listenerها یا لغو تایمرها، تا از نشت حافظه (memory leaks) جلوگیری شود.
attributeChangedCallback(name, oldValue, newValue): هر بار که یکی از اتریبیوت‌های عنصر سفارشی اضافه، حذف، به‌روزرسانی یا جایگزین می‌شود، فراخوانی می‌شود. این به شما امکان می‌دهد به تغییرات در اتریبیوت‌های کامپوننت واکنش نشان داده و رفتار آن را مطابق با آن به‌روز کنید. شما باید مشخص کنید که کدام اتریبیوت‌ها را می‌خواهید با استفاده از getter استاتیک observedAttributes مشاهده کنید.
adoptedCallback(): هر بار که عنصر سفارشی به یک سند جدید منتقل می‌شود، فراخوانی می‌شود. این موضوع هنگام کار با iframeها یا هنگام انتقال عناصر بین بخش‌های مختلف اپلیکیشن مرتبط است.

بررسی عمیق‌تر هر متد چرخه حیات

1. constructor()

کانستراکتور اولین متدی است که هنگام ایجاد یک نمونه جدید از عنصر سفارشی شما فراخوانی می‌شود. این مکان ایده‌آلی برای موارد زیر است:

مقداردهی اولیه وضعیت داخلی کامپوننت.
ایجاد Shadow DOM با استفاده از this.attachShadow({ mode: 'open' }) یا this.attachShadow({ mode: 'closed' }). مقدار mode تعیین می‌کند که آیا Shadow DOM از طریق جاوا اسکریپت خارج از کامپوننت قابل دسترسی است (open) یا خیر (closed). استفاده از open معمولاً برای دیباگ آسان‌تر توصیه می‌شود.
متصل کردن (bind) متدهای کنترل‌کننده رویداد به نمونه کامپوننت (با استفاده از this.methodName = this.methodName.bind(this)) تا اطمینان حاصل شود که this در داخل کنترل‌کننده به نمونه کامپوننت اشاره دارد.

ملاحظات مهم برای کانستراکتور:

شما نباید هیچ‌گونه دستکاری DOM را در کانستراکتور انجام دهید. عنصر هنوز به طور کامل به DOM متصل نشده است و تلاش برای تغییر آن ممکن است منجر به رفتار غیرمنتظره شود. برای دستکاری DOM از connectedCallback استفاده کنید.
از استفاده از اتریبیوت‌ها در کانستراکتور خودداری کنید. ممکن است اتریبیوت‌ها هنوز در دسترس نباشند. به جای آن از 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.
افزودن event listenerها به کامپوننت یا Shadow DOM آن.
رندر کردن محتوای اولیه کامپوننت در Shadow DOM.
مشاهده تغییرات اتریبیوت‌ها اگر مشاهده فوری در کانستراکتور امکان‌پذیر نباشد.

مثال:


class MyCustomElement extends HTMLElement {
  // ... کانستراکتور ...

  connectedCallback() {
    // ایجاد یک عنصر دکمه
    const button = document.createElement('button');
    button.textContent = 'مرا کلیک کن!';
    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(); // فراخوانی یک متد رندر برای به‌روزرسانی UI
      });
  }

  render() {
    // به‌روزرسانی Shadow DOM بر اساس داده‌ها
    const dataElement = document.createElement('p');
    dataElement.textContent = JSON.stringify(this.data);
    this.shadow.appendChild(dataElement);
  }

  handleClick() {
      alert("دکمه کلیک شد!");
  }
}

3. disconnectedCallback()

متد disconnectedCallback زمانی فراخوانی می‌شود که عنصر سفارشی از DOM سند جدا می‌شود. این امر برای موارد زیر حیاتی است:

حذف event listenerها برای جلوگیری از نشت حافظه.
لغو هرگونه تایمر یا اینتروال.
آزادسازی هرگونه منبعی که کامپوننت در اختیار دارد.

مثال:


class MyCustomElement extends HTMLElement {
  // ... کانستراکتور، connectedCallback ...

  disconnectedCallback() {
    // حذف event listener
    this.shadow.querySelector('button').removeEventListener('click', this.handleClick);

    // لغو هرگونه تایمر (مثال)
    if (this.timer) {
      clearInterval(this.timer);
    }

    console.log('کامپوننت از DOM جدا شد.');
  }
}

4. attributeChangedCallback(name, oldValue, newValue)

متد attributeChangedCallback هر زمان که یک اتریبیوت از عنصر سفارشی تغییر کند فراخوانی می‌شود، اما فقط برای اتریبیوت‌هایی که در getter استاتیک observedAttributes لیست شده‌اند. این متد برای موارد زیر ضروری است:

واکنش به تغییرات در مقادیر اتریبیوت و به‌روزرسانی رفتار یا ظاهر کامپوننت.
اعتبارسنجی مقادیر اتریبیوت.

جنبه‌های کلیدی:

شما باید یک getter استاتیک به نام 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('مقدار اتریبیوت data-count نامعتبر است:', 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 = `تعداد: ${this.count}`;
  }
}

استفاده مؤثر از attributeChangedCallback:

اعتبارسنجی ورودی: از این callback برای اعتبارسنجی مقدار جدید جهت اطمینان از یکپارچگی داده‌ها استفاده کنید.
دیبانس کردن به‌روزرسانی‌ها: برای به‌روزرسانی‌هایی که محاسباتی سنگین دارند، استفاده از دیبانس (debouncing) برای کنترل‌کننده تغییر اتریبیوت را در نظر بگیرید تا از رندر مجدد بیش از حد جلوگیری شود.
جایگزین‌ها را در نظر بگیرید: برای داده‌های پیچیده، به جای اتریبیوت‌ها از پراپرتی‌ها استفاده کنید و تغییرات را مستقیماً در setter پراپرتی مدیریت کنید.

5. adoptedCallback()

متد adoptedCallback زمانی فراخوانی می‌شود که عنصر سفارشی به یک سند جدید منتقل شود (مثلاً از یک iframe به دیگری). این یک متد چرخه حیات کمتر استفاده شده است، اما آگاهی از آن هنگام کار با سناریوهای پیچیده‌تر که شامل زمینه‌های مختلف سند هستند، مهم است.

مثال:


class MyCustomElement extends HTMLElement {
  // ... کانستراکتور، connectedCallback, disconnectedCallback, attributeChangedCallback ...

  adoptedCallback() {
    console.log('کامپوننت به یک سند جدید منتقل شد.');
    // انجام هرگونه تنظیمات لازم هنگام انتقال کامپوننت به یک سند جدید
    // این ممکن است شامل به‌روزرسانی ارجاعات به منابع خارجی یا برقراری مجدد اتصالات باشد.
  }
}

تعریف یک عنصر سفارشی

پس از تعریف کلاس عنصر سفارشی خود، باید آن را با استفاده از customElements.define() در مرورگر ثبت کنید:


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

آرگومان اول، نام تگ برای عنصر سفارشی شماست (مثلاً 'my-custom-element'). نام تگ باید شامل یک خط تیره (-) باشد تا با عناصر استاندارد HTML تداخل نداشته باشد.

آرگومان دوم، کلاسی است که رفتار عنصر سفارشی شما را تعریف می‌کند (مثلاً MyCustomElement).

پس از تعریف عنصر سفارشی، می‌توانید از آن در HTML خود مانند هر عنصر HTML دیگری استفاده کنید:


<my-custom-element message="سلام از طرف اتریبیوت!" data-count="10"></my-custom-element>

بهترین شیوه‌ها برای مدیریت چرخه حیات وب کامپوننت

کانستراکتور را سبک نگه دارید: از انجام دستکاری DOM یا محاسبات پیچیده در کانستراکتور خودداری کنید. برای این کارها از connectedCallback استفاده کنید.
منابع را در disconnectedCallback پاکسازی کنید: همیشه event listenerها را حذف، تایمرها را لغو و منابع را در disconnectedCallback آزاد کنید تا از نشت حافظه جلوگیری شود.
از observedAttributes هوشمندانه استفاده کنید: فقط اتریبیوت‌هایی را که واقعاً نیاز به واکنش به آن‌ها دارید، مشاهده کنید. مشاهده اتریبیوت‌های غیرضروری می‌تواند بر عملکرد تأثیر بگذارد.
استفاده از کتابخانه رندرینگ را در نظر بگیرید: برای به‌روزرسانی‌های پیچیده UI، استفاده از یک کتابخانه رندرینگ مانند LitElement یا uhtml را برای ساده‌سازی فرآیند و بهبود عملکرد در نظر بگیرید.
کامپوننت‌های خود را به طور کامل تست کنید: تست‌های واحد بنویسید تا اطمینان حاصل کنید که کامپوننت‌های شما در طول چرخه حیات خود به درستی رفتار می‌کنند.

مثال: یک کامپوننت شمارنده ساده

بیایید یک کامپوننت شمارنده ساده ایجاد کنیم که استفاده از چرخه حیات وب کامپوننت را نشان می‌دهد:


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>تعداد: ${this.count}</p>
      <button>افزایش</button>
    `;
  }
}

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

این کامپوننت یک متغیر داخلی count را نگهداری می‌کند و با کلیک روی دکمه، نمایشگر را به‌روز می‌کند. connectedCallback شنونده رویداد را اضافه می‌کند و disconnectedCallback آن را حذف می‌کند.

تکنیک‌های پیشرفته وب کامپوننت

1. استفاده از پراپرتی‌ها به جای اتریبیوت‌ها

درحالی‌که اتریبیوت‌ها برای داده‌های ساده مفید هستند، پراپرتی‌ها انعطاف‌پذیری و ایمنی نوع (type safety) بیشتری ارائه می‌دهند. می‌توانید پراپرتی‌ها را روی عنصر سفارشی خود تعریف کنید و از getterها و setterها برای کنترل نحوه دسترسی و تغییر آن‌ها استفاده کنید.


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>داده: ${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. استفاده از رویدادها برای ارتباط

رویدادهای سفارشی (Custom events) روشی قدرتمند برای ارتباط وب کامپوننت‌ها با یکدیگر و با دنیای خارج هستند. شما می‌توانید رویدادهای سفارشی را از کامپوننت خود ارسال (dispatch) کرده و در بخش‌های دیگر اپلیکیشن خود به آن‌ها گوش دهید.


class MyCustomElement extends HTMLElement {
  // ... کانستراکتور، connectedCallback ...

  dispatchCustomEvent() {
    const event = new CustomEvent('my-custom-event', {
      detail: { message: 'سلام از طرف کامپوننت!' },
      bubbles: true, // اجازه می‌دهد رویداد در درخت DOM به سمت بالا حرکت کند (bubble up)
      composed: true // اجازه می‌دهد رویداد از مرز shadow DOM عبور کند
    });

    this.dispatchEvent(event);
  }
}

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

// به رویداد سفارشی در سند والد گوش دهید
document.addEventListener('my-custom-event', (event) => {
  console.log('رویداد سفارشی دریافت شد:', event.detail.message);
});

3. استایل‌دهی Shadow DOM

Shadow DOM کپسوله‌سازی استایل را فراهم می‌کند و از نشت استایل‌ها به داخل یا خارج از کامپوننت جلوگیری می‌کند. شما می‌توانید وب کامپوننت‌های خود را با استفاده از CSS در داخل Shadow DOM استایل‌دهی کنید.

استایل‌های درون‌خطی (Inline):


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      <style>
        p {
          color: blue;
        }
      </style>
      <p>این یک پاراگراف استایل‌دهی شده است.</p>
    `;
  }
}

شیوه‌نامه‌های خارجی (External):

شما همچنین می‌توانید شیوه‌نامه‌های خارجی را در 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>این یک پاراگراف استایل‌دهی شده است.</p>';
  }
}

نتیجه‌گیری

تسلط بر چرخه حیات وب کامپوننت برای ساخت کامپوننت‌های قوی و قابل استفاده مجدد برای اپلیکیشن‌های وب مدرن ضروری است. با درک متدهای مختلف چرخه حیات و استفاده از بهترین شیوه‌ها، می‌توانید کامپوننت‌هایی ایجاد کنید که نگهداری آن‌ها آسان، دارای عملکرد بالا و یکپارچگی بی‌نقص با سایر بخش‌های اپلیکیشن شما باشند. این راهنما یک نمای کلی جامع از چرخه حیات وب کامپوننت، شامل توضیحات دقیق، مثال‌های عملی و تکنیک‌های پیشرفته ارائه داد. از قدرت وب کامپوننت‌ها استقبال کنید و اپلیکیشن‌های وب ماژولار، قابل نگهداری و مقیاس‌پذیر بسازید.

برای یادگیری بیشتر:

MDN Web Docs: مستندات گسترده در مورد وب کامپوننت‌ها و عناصر سفارشی.
WebComponents.org: یک منبع جامعه-محور برای توسعه‌دهندگان وب کامپوننت.
LitElement: یک کلاس پایه ساده برای ایجاد وب کامپوننت‌های سریع و سبک.