مقدمه ای بر اجزای وب
مقدمه ای بر اجزای وب
کامپوننت های وب چیست؟
استفاده از کدها یکی از اصول توسعه وب سایت می باشد. ما تلاش می کنیم تا یک قطعه کد ایجاد کنیم که عملکرد آن را محصور کند ، به عنوان یک راه حل عالی برای حل مشکلات مورد استفاده قرار می گیرد. در توسعه و برنامه نویسی وب سایت ممکن است بخواهیم یک عنصر سفارشی ایجاد کنید که دارای سبک ، اسکریپت و نشانه گذاری خاص خود می باشد. این عناصر سفارشی باید در سراسر وب قابل استفاده مجدد باشد. یعنی وب سایت ها و برنامه های وب
اجزای وب سایت به ما کمک می کند تا تمامی موارد را ارائه کند. آنها شامل مجموعه ای از 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> ایجاد کنیم. این عنصر در یک نام زبان، توضیحات تابع و یک قطعه کد برای نمایش آن با یک سبک از پیش تعریف شده استفاده می شود. می توانید از آن در یک صفحه مستندات برای پروژه جدید خود استفاده کنید!
در اینجا از عناصر <slot> استفاده خواهد شد. <slot> به ما کمک می کند تا متغیرهایی را در داخل <template> تعریف کنیم. ما می‌توانیم هر نشانه‌گذاری را بعداً هنگامی که عنصر در سند برای جایگزینی <slot> با نشانه‌گذاری واقعی استفاده می‌شود، ارسال کنیم. باید به ویژگی slot نشانه گذاری خود نام شکافی را که می خواهیم در قالب جایگزین کنیم، بدهیم.
<template id=”code-snippet”>
<style>
div {
border: 1px dotted #867f7f;
background-color: #efefef;
padding: 5px;
text-align: center;
margin-top: 10px;
}
p {
margin: 0;
padding: 0;
}
strong {
font-weight: bold;
color: blue;
}
</style>
<div>
<p>
<strong><slot name=”language”>language</slot></strong>
</p>
<p>
<em><slot name=”description”>function description</slot></em>
</p>
<p>
<code><slot name=”code”>code snippet</slot></code>
</p>
</div>
</template>
این قالب را در یک تعریف عنصر سفارشی ارجاع دهید.
/* code-snippet.js */class CodeSnippet extends HTMLElement {
constructor() {
super();
var template = document.getElementById(‘code-snippet’);
const shadowRoot = this.attachShadow({ mode: ‘open’ });
var templateContent = template.content;
shadowRoot.appendChild(templateContent.cloneNode(true));
}
}/* register your element with the CustomElementRegistry using the define method.
Pass the name to be used as tag (here code-snippet)
and the class name(here CodeSnippet)*/customElements.define(‘code-snippet’, CodeSnippet);
مقدمه ای بر اجزای وب
اکنون می توانید عنصر سفارشی را در سند HTML مصرف کنید.
توجه: اسکریپتی که عنصر سفارشی را ثبت می کند باید پس از تجزیه DOM بارگیری شود. بنابراین یا از defer برای بارگذاری اسکریپت استفاده کنید یا تگ اسکریپت را در پایین تگ <body> در داخل سند html اضافه کنید.
/* index.html */
<head>
<script src=”code-snippet.js” defer></script>
</head>
<body>
<h2>Web Component – Code Snippet</h2>
<code-snippet>
<span slot=”language”>JavaScript</span>
<span slot=”description”>Date function</span>
<span slot=”code”>new Date()</span>
</code-snippet>
<code-snippet>
<span slot=”language”>PHP</span>
<span slot=”description”>Date function</span>
<span slot=”code”>date(“Y/m/d”)</span>
</code-snippet>
<template id=”code-snippet”>
…
</template>
</body>
خودشه! ما یک کامپوننت وب بسیار ساده ایجاد کرده ایم.
مقدمه ای بر اجزای وب
مقدمه ای بر اجزای وب
فواید
از آنجایی که کامپوننت های وب بر اساس استانداردهای وبسایت ساخته شده اند، دارای مزایای بزرگی هستند.
قابلیت همکاری: آنها می توانند با پروژه های متعددی کار کنند که همه آنها دارای پشته های فناوری مختلف هستند. از آنجایی که آنها به هیچ فریم ورک یا کتابخانه ای متکی نیستند، می توانند با انواع پشته های فناوری کار کنند.
طول عمر: از آنجایی که آنها بر اساس استانداردهای وب هستند، حداقل بازنویسی یا هیچ بازنویسی برای جا دادن آنها با فناوری های جدیدتر وجود نخواهد داشت. از این رو طول عمر بیشتری دارند.
بهره وری: تکرار بر روی اجزای از قبل نوشته شده به ما کمک می کند در زمان و تلاش صرفه جویی کنیم. شما می توانید ویژگی های بیشتری را در بالای آن بسیار سریعتر توسعه دهید.
ثبات نام تجاری: تنظیم اجزا بر اساس نیاز شما و استفاده از آنها در تیم ها بدون توجه به پشته فناوری به شما کمک می کند ظاهر و احساسی ثابت در برنامه داشته باشید.
به اشتراک گذاری کد: شما می توانید یک منطق و نگاه یکسان را بین تیم ها و در پروژه های مختلف به اشتراک بگذارید.
به طور خلاصه، Web Components – WORA – Write Once Run Anywhere. مقدمه ای بر اجزای وب
مقدمه ای بر اجزای وب
در این مقاله قصد کرده ایم مقدمه ای بر اجزای وب داشته باشیم و همانطور که می دانید این مبحث در ساخت یک سایت از اهمیت زیادی برخوردار است و شما باید بر روی تمامی اجزای مهم یک سایت تمرکز ویژه بکنید.
