مقدمه ای بر اجزای وب

کامپوننت های وب چیست؟استفاده از کدها یکی از اصول توسعه وب سایت می باشد. ما تلاش می کنیم تا یک قطعه کد ایجاد کنیم که عملکرد آن را محصور کند ، به عنوان یک راه حل عالی برای حل مشکلات مورد استفاده قرار می گیرد. در توسعه و برنامه نویسی وب سایت ممکن است بخواهیم یک عنصر سفارشی ایجاد کنید که دارای سبک ، اسکریپت و نشانه گذاری خاص خود می باشد. این عناصر سفارشی باید در سراسر وب قابل استفاده مجدد باشد. یعنی وب سایت ها و برنامه های وباجزای وب سایت به ما کمک می کند تا تمامی موارد را ارائه کند. آنها شامل مجموعه ای از APIهای پلتفرم وب هستند که به ما کمک می‌کنند تگ های HTML سفارشی با سبک و اسکریپت مرتبط ایجاد کنیم. به راحتی در مرورگرها کار کرده و می توانند با هر کتابخانه جاوا اسکریپت یا فریم ورک هایی که با اچ تی ام ال کار می کنند به راحتی استفاده شوند. در این مقاله قصد داریم تا بر روی مقدمه ای بر اجزای وب تمرکز نماییم پس با ما همراه باشید.ساخت بلوک هااجزای وب سایت با سه بلوک اصلی تعریف می شوند:عناصر سفارشی: مجموعه ای از API های جاوا اسکریپت که به ما کمک می کند عناصر DOM سفارشی را با رفتار مرتبط طراحی کنیم.Shadow DOM: مجموعه‌ای از APIهای جاوا اسکریپت برای اتصال درخت DOM “سایه” محصور شده به یک عنصر. این نشانه گذاری به طور جداگانه از سند اصلی DOM ارائه می شود. این به تعریف ویژگی های عناصر خصوصی کمک می کند، بنابراین هیچ شانسی برای برخورد سبک عناصر یا اسکریپت و سبک در سند اصلی وجود ندارد. مقدمه ای بر اجزای وبقالب های HTML: به ما کمک می کند تا نشانه گذاری ها را بنویسیم که در صفحه رندر نمایش داده نشده باشد. از این نشانه گذاری می توان برای تعریف ساختار عنصر سفارشی استفاده کرد. با استفاده از عناصر <template> و <slot> تعریف می شود.مقدمه ای بر اجزای وبعناصر سفارشیعناصر سفارشی دو نوع هستند:عناصر سفارشی مستقل: آنها عناصر مستقلی هستند، یعنی از عناصر استاندارد HTML به ارث نمی برند. آنها از کلاس HTMLElement عمومی به ارث می برند. به عنوان مثال: <word-count> یا document.createElement(‘word-count’).عناصر داخلی سفارشی شده: آنها از عناصر اصلی HTML به ارث می برند. آنها از کلاس عنصر خاصی مانند HTMLUListElement یا HTMLImageElement استفاده می کنند. شما از آنها با تعیین نام عنصر سفارشی به عنوان مقدار ویژگی is استفاده می کنید. به عنوان مثال: <ul is=”styled-list”> یا document.createElement(‘ul’, {is: “styled-list” }).Lifecycle Callbacksچندین تماس برگشتی Lifecycle وجود دارد که در نقاط مختلف چرخه عمر عناصر سفارشی فعال می شوند. ما می توانیم از آنها در هنگام تعریف عنصر سفارشی استفاده کنیم. برخی از تماس های موجود عبارتند از:ConnectCallback: هر بار که عنصر سفارشی به یک عنصر متصل به سند اضافه می شود، فراخوانی می شود. هر بار که گره جابجا می شود این اتفاق می افتد و ممکن است قبل از تجزیه کامل محتویات عنصر اتفاق بیفتد.disconnectedCallback: هر بار که عنصر سفارشی از DOM سند جدا می شود، فراخوانی می شودadoptedCallback: هر بار که عنصر سفارشی به یک سند جدید منتقل می شود، فراخوانی می شود.ChangedCallback: هر بار که یکی از ویژگی های عنصر سفارشی اضافه، حذف یا تغییر می کنند، فراخوانی می شود. در یک متد static get observedAttributes مشخص می‌شود که برای کدام ویژگی‌ها باید تغییر کند.مقدمه ای بر اجزای وبShadow DOMدر واقع این اجازه را می دهد تا DOM trees را به عناصر موجود در dom معمولی متصل شوند. DOM trees با یک ریشه سایه شروع می شود که در زیر آن می توان به هر عنصری که می خواهید متصل شوید ، به همان روشی که DOM معمولی است.مقدمه ای بر اجزای وبقالب اچ تی ام التمپلیت یا قالب های اچ تی ام ال کمک می کنند تا ساختار یک عنصر سفارشی را تعریف نمایید.مثالاجازه دهید یک عنصر سفارشی مستقل <code-snippet> ایجاد کنیم. این عنصر در یک نام زبان، توضیحات تابع و یک قطعه کد برای نمایش آن با یک سبک از پیش تعریف شده استفاده می شود. می توانید از آن در یک صفحه مستندات برای پروژه جدید خود استفاده کنید!برای مشاهده ادامه مقاله بر روی مقدمه ای بر اجزای وب کلیک نمایید.