سلام دوستان! حتما تا حالا اسم کامپوننت رو شنیدید. توی دنیای کامپیوتر، کامپوننتها مثل آجرهایی هستند که میشه باهاشون یه ساختمون بزرگ ساخت. توی دنیای وب هم دقیقا همینه. کامپوننتهای وب یه جورایی آجرهای HTML، CSS و JavaScript هستند که ما میتونیم اون‌ها رو درست کنیم و بعد بارها و بارها توی وب‌سایت‌هامون استفاده کنیم.
فرض کنید میخواید یه دکمه‌ی خاص رو توی چند صفحه از سایت‌تون نشون بدید. به جای اینکه کدهای HTML و CSS و JavaScript رو هر دفعه کپی کنید، میتونید یه کامپوننت برای اون دکمه بسازید و بعد فقط از اون کامپوننت توی هر صفحه استفاده کنید. خیلی راحت تر و منظم تر میشه، نه؟
دلایل زیادی برای استفاده از کامپوننتها وجود داره، اما چندتا از مهم‌ترین‌هاش این‌ها هستند:
یه کامپوننت وب از سه بخش اصلی تشکیل شده:
| بخش | توضیحات | مثال |
|---|---|---|
| Custom Elements (المان‌های سفارشی) | این بخش به ما اجازه میده تا المان‌های HTML جدیدی بسازیم. مثلاً یه المان به اسم <my-button>. | <my-button>کلیک کنید</my-button> |
| Shadow DOM (دام سایه) | این بخش یه جور مخفی‌گاه برای کد HTML، CSS و JavaScript کامپوننت هست. کد بیرون از کامپوننت نمیتونه به کد داخل دام سایه دسترسی داشته باشه (مگر اینکه خودمون اجازه بدیم). اینجوری کامپوننت ما از کدهای دیگه جدا میمونه و مشکلی پیش نمیاد. | (توی کد JavaScript کامپوننت تعریف میشه) |
| HTML Templates (قالب‌های HTML) | این بخش به ما اجازه میده تا تکه‌های HTML رو تعریف کنیم و بعد اون‌ها رو توی کامپوننت‌مون استفاده کنیم. مثل یه الگو میمونه. | <template id="my-template"><p>سلام دنیا!</p></template> |
بیاید یه مثال ساده ببینیم. فرض کنید میخوایم یه کامپوننت بسازیم که یه پیغام ساده رو نشون بده:
<template id="my-message"> <style> p { color: blue; font-weight: bold; } </style> <p>سلام! این یه پیغام از کامپوننت منه.</p> </template> <script> class MyMessage extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); const template = document.getElementById('my-message'); const content = template.content.cloneNode(true); shadow.appendChild(content); } } customElements.define('my-message', MyMessage); </script> <my-message></my-message> توی این مثال، ما اول یه قالب HTML تعریف کردیم (<template>). بعد یه کلاس JavaScript ساختیم (MyMessage) که از HTMLElement ارث میبره. توی این کلاس، دام سایه رو ایجاد کردیم و قالب HTML رو بهش اضافه کردیم. در نهایت، با استفاده از customElements.define کامپوننت خودمون رو تعریف کردیم.
حالا هر جا که بخوایم از این کامپوننت استفاده کنیم، فقط کافیه از تگ <my-message> استفاده کنیم. خیلی ساده! البته این یه مثال خیلی ساده بود. میشه کامپوننتهای خیلی پیچیده‌تری هم ساخت.
-) بذارید. اینجوری مرورگر میفهمه که این یه المان سفارشی هست و با المان‌های HTML معمولی اشتباهش نمیگیره.text به کامپوننت <my-message> اضافه کنید تا بتونید متن پیغام رو تغییر بدید.کامپوننتهای وب یه روش عالی برای ساخت وب‌سایت‌های منظم‌تر، قابل نگهداری‌تر و با قابلیت استفاده‌ی مجدد هستند. با استفاده از اون‌ها میتونید کدهای خودتون رو سازماندهی کنید و کارتون رو آسون‌تر کنید. امیدوارم این مقاله بهتون کمک کرده باشه تا با این مفهوم آشنا بشید. مرسی که خوندید!
کامپوننتهای وب, المنت‌های سفارشی, Shadow DOM, HTML Templates, توسعه وب, JavaScript, HTML, CSS
امتیاز شما به این مطلب
امتیاز: 5 از 5 (مجموع 1 رای)
اولین نفری باشید که در مورد این مقاله نظر می دهید!
techfeed.ir© 2024 All rights reserved