23
تشکر

نحوه ایجاد عناصر سفارشی در HTML

Web Components

Web Components

همانطور که میدانید در HTML تگ هایی به صورت پیشفرض وجود دارند که مخصوص عملیات خاصی در مرورگر هستند مانند تگ های p و a یا هر تگ دیگری که از آن استفاده میکنیم. در HTML5 ویژگی جدیدی به نام Custom Elements اضافه شده است که بخشی از Web Component است که با استفاده از آن میتوانید خودتان عناصر جدید با نام های جدید بسازید.

این ویژگی برای استفاده از Componentها که به صورت متعدد در یک اپلیکیشن استفاده می‌شوند مناسب است.

در ادامه مطلب همراه ما باشید…

ایجاد عناصر سفارشی

برای ایجاد یک Custom Element از متد document.registerElement استفاده میکنیم. این متد یک پارامتر به عنوان نام عنصر و یک object برای تعریف API (اختیاری) میگیرد.

در کد زیر ما یک عنصر جدید با نام x-app ایجاد کردیم. در خط دوم مشاهده میکنید که یک تگ جدید از این عنصر ساخته و آن را به صفحه متصل کردیم.

var xAppElement = document.registerElement('x-app');
document.body.appendChild(new xAppElement());

توجه داشته باشید که در نام انتخابی برای عنصر باید حتماً از حرف  یا Dash استفاده کنید. مرورگر بوسیله این حرف بین عناصر استاندارد و عناصر جدید تفاوت قائل میشود.

متصل کردن API به عنصر

یکی از مزیت‌های Custom Element امکان اضافه کردن متدها و خصوصیات از پیش تعریف شده به عنصر است که کار برنامه نویس را بسیار راحت میکند.

برای اینکار ابتدا باید یک prototype جدید ایجاد بکنیم و متدها و خصوصیات خودمان را به آن اضافه کنیم، سپس در زمان ایجاد عنصر، آن را در پارامتر دوم به متد registerElement بفرستیم.

برای مثال در کد زیر ما یک متد و یک خصوصیت جدید به prototype اضافه کردیم و به عنوان پارامتر دوم آن را نوشتیم.

var xAppProto = Object.create(HTMLElement.prototype);

xAppProto.log = function() {
  console.log('Custom Element is great!');
};
xAppProto.foo = "bar";

var xAppElement = document.registerElement('x-app', {
  prototype: xAppProto
});

مانند متدهای معمولی، برای استفاده از متدهای از پیش تعریف شده باید ابتدا عنصر را از DOM انتخاب کنید سپس متدها را فراخوانی کنید.

var xApp = document.querySelector('x-app');

xApp.log();
xApp.foo;

خاصیت extends

اگر خواسته باشیم عنصری که میسازیم خصوصیاتش را از عنصر دیگری به ارث گرفته باشد باید از خصوصیت extends در پارامتر دوم متد registerElement استفاده کنیم. اما با اینکار در‌ واقع ما همان عنصر قبلی را ایجاد کرده‌ایم حتی نام آن نیز نام اصلی عنصر استاندارد است.

در کد زیر به متد registerElement نوشته شده در کد بالا عنصر extends را اضافه میکنیم. در اینجا میگوییم که عنصر جدید خصوصیاتش را از عنصر div به ارث بگیرد.

var xAppElement = document.registerElement('x-app', {
  prototype: xAppProto,
  extends: 'div'
});

عنصر ایجاد شده به صورت زیر است:

<div is="x-app"></div>

مشاهده میکنید که فقط یک خاصیت به عنصر div اضافه شده است و عنصر جدید ایجاد نشده است. پس چرا ما از extends استفاده کنیم؟ اینکار برای زمانی است که شما میخواهید متدها و خصوصیات از پیش تعریف شده خودتان را به عنصر اضافه بکنید که باید از این راه استفاده کنید.

توجه کنید که عناصر را باید با استفاده از JavaScript به صفحه اضافه کنید.

Callbackها

مجموعه‌ای از Callbackها نیز در Custom Elements وجود دارند که با توجه به نامشان واضح هستند که چه زمانی فراخوانی میشوند.

xAppProto.createdCallback = function () {…};
xAppProto.attachedCallback = function () {…};
xAppProto.detachedCallback = function () {…};
xAppProto.attributeChangedCallback = function () {…};

پشتیبانی مرورگرها

آخرین نسخه های کروم و اپرا این متد را پیاده‌سازی کرده‌اند و همچنین در نسخه شبانه Firefox نیز پیاده شده است و هنوز نمیتوان به صورت رسمی از آن استفاده کرد.

  • نظراتی که راجب منابع جدید و لینک های دانلود نمونه برنامه ها یا کتاب میزارم تایید کنید لطفا تا بقیه هم استفاده کنند.
    ممنون از سایت خوبتون.
    پیروز و سربلند باشید.

  • دانلود اخرین انتشارات کتاب های کامپیوتری و IT که امازون برای فروش گذاشته اما به صورت رایگان به این سایت برید http://it-ebooks.info
    هر کتابی بخواید راجب مطالب برنامه نویسی و کامپیوتر داره. موفق باشید.

  • aav69 می‌گه:

    کسی اینجا نیست جواب بده :-)

  • aav69 می‌گه:

    سلام.با تشکر از زحمت های شما می خواستم به پرسم آیا امکان داره مطلبی هم درباره کلاس های کاذب در CSS به طور کامل قرار بدید.مثلا من میخوام بدونم فرق : و:: چی هست و کجا میشه ازش استفاده کرد و یا این که در منوی طراحی شده اگر بخواهیم در هر صفحه که کاربر وارد میشه لینک آن صفحه دارای Padding باشد و با مابقی لینک ها تفاوت کند آیا راهی هست یا نه؟

    • محسن شفیعی می‌گه:

      در مورد سوال دومتون شما باید یک کلاس برای اینکار در نظر بگیرید برای مثال کلاس active و هر زمانی که عنصری از منو از کلاس رو داشت به اون Padding بدید. این کلاس رو باید در سمت سرور بر اساس صفحه ای که نشون داده میشه، لینک آن در منو دارای کلاس active شود.

  • مهدی می‌گه:

    درود بر محسن جان
    میشه لطف کنی آموزش استفاده از api هارو در php توضیح بدی ؟

  • چه خوب بود اگه لینک منبع زبان اصلی رو که این مطلب رو ازش گرفتید رو هم میزاشتید.


  • نظرات این مطلب بسته است.