الدخول
تحية للزملاء. هذه المقالة هي المقالة الثالثة والأخيرة في سلسلة من المقالات حول مكونات الويب. تتوفر أول مقالتين على:
مكونات الويب. الجزء 1: العناصر المخصصةمكونات الويب الجزء 2: Shadow DOMستتحدث هذه المقالة عن عنصر <template> وأيضًا عن استيراد HTML.
عنصر قوالب HTML
عنصر <template> هو أداة تسمح لك بتخزين المحتوى على جانب العميل دون عرضه على الصفحة ، ولكن مع إمكانية عرضه أثناء التنفيذ من خلال JavaScript.
عند تحليل الصفحة ، تتم معالجة محتوى العنصر فقط من حيث التحقق من المحتوى ، ولكن دون عرضه (وفقًا للمواصفات ، لا يمثل هذا العنصر أي شيء عند العرض). يمكن استنساخ محتوى العنصر ولصقه في المستند من البرامج النصية ، والتي يتم استخدامها بشكل مستقل للتوحيد القياسي وعند إنشاء مكونات الويب.
المحتوى <قالب>
لا يطبق محتوى <template> ، وكذلك أي عقدة ليس لها سياق مستعرض ، أي متطلبات امتثال ، باستثناء متطلبات صحة بناء جملة HTML و XML. هذا يعني أنه في محتويات القالب ، على سبيل المثال ، يمكنك تحديد عنصر img بدون تحديد قيمة السمتين src و alt ، وبالتالي:
<template> <div> <img src="{{src}}" alt="{{alt}}"> </div> </template>
ومع ذلك ، خارج عنصر <template> ، بناء الجملة هذا غير صالح. في هذه الحالة ، قد يمثل تخطي علامة الإغلاق </div> انتهاكًا لبناء جملة HTML وهو غير صالح لمحتويات <template>.
جميع العناصر المحددة داخل علامة <template> في كود html ليست تابعة لها.
تقوم المستعرضات عند إنشاء عنصر <template> بإنشاء DocumentFragment الذي يسمى مستنده approptiate قالب مالك محتويات القالب ، الذي تحدده هذه الخوارزمية ، المستند الذي يتم فيه تحديد <template> ويشير إلى قيمة خاصية المحتوى التي تم إنشاؤها بواسطة DocumentFragment.
أي أن خاصية .content لعنصر القالب تحتوي على DocumentFragment ، والعناصر التي تم تحديدها في كود html داخل علامات <template> هي عناصر فرعية في DocumentFragment.
في هذه الحالة ، يمكن إضافة عنصر <template> ، مثل أي عنصر آخر ، مع العناصر الفرعية ( appendChild () ) ، ولكن سيتم اعتبار ذلك انتهاكًا لنموذج محتوى القالب.
قالب الاستنساخ
عند استنساخ محتويات القالب ، من المهم أن نتذكر أن الوسيطة الأولى ل. cloneNode ([عميق])
أو الثانية في .importNode (الخارجية ، عميقة) يجب نقلها (وفقًا للمواصفات ، إذا لم يتم تمرير الوسيطة ، فلا يجب أن يتم التنفيذ مرة أخرى).
بالمناسبة ، نعم ، على الرغم من حقيقة أن معظم الأمثلة تستخدم .cloneNode () ، فإن استخدام .importNode () ممكن أيضًا. والفرق الوحيد هو عندما يتم تحديث المستند (ل. cloneNode () - بعد استدعاء appendChild () ؛ ل .importNode () - بعد الاستنساخ).
أرني الكود ©
يعد استخدام القوالب أمرًا بسيطًا حقًا. سأستمر في مثال مكونات علامة التبويب ، التي عملت بها في كود المقالات السابقة.
سأبدأ بإنشاء عنصرين <template> في ترميز html ونقل الترميز الذي كان موجودًا في طريقة .render () لفئتي TabNavigationItem و TabContentItem (قمت أيضًا بتغيير بعض الأنماط ، ولكن هذا لا يؤثر على الوظيفة):
<template id="tab-nav"> <style> :host{ padding: 10px; background-color: rgb(81,180,186); transition: background-color 1s; text-align: center; } :host-context(.active) { background-color: rgb(93, 209, 216); } a{ text-decoration: none; color: rgb(3,32,40); } </style> <a href="#${this._target}"><slot></slot></a> </template>
و:
<template id="tab-content"> <style> :host { display: none; padding: 20px; width: 100%; background-color: rgb(255,212,201); } :host-context(.active){ display: block; } </style> <div><slot></slot></div> </template>
في مُنشئ كل فئة ، سأحفظ خاصية القالب. بالنسبة لـ TabNavigationItem ، سيكون هذا:
this.template = document.getElementById('tab-nav');
a لـ TabContentItem:
this.template = document.getElementById('tab-content');
في طريقة تقديم () لكل من هذه الفئات ، سأضيف الكود التالي ، بعد حذف إدخال .innerHTML:
const content = this.template.content.cloneNode(true); this.shadowRoot.appendChild(content);
يمكن العثور على الرمز الناتج هنا.
في هذا المثال ، تم تحديد كلا القوالب في html ، والذي يبدو مرهقًا وليس صاخبًا. يأخذنا هذا بسلاسة إلى الموضوع:
استيراد HTML
عمليات الاستيراد هي مستندات HTML متصلة كمصادر خارجية بواسطة مستند HTML آخر. يتم وصف نظام العلاقات بين المستندات جيدًا في مسودة المواصفات وليس موضوع هذه المقالة.
المخطط العام مرئي في الصورة:
.
لتنفيذ عمليات الاستيراد ، تمت إضافة نوع جديد إلى أنواع روابط HTML (قيم السمة rel).
تقوم كلمة الاستيراد المحددة في قيمة السمة rel للعنصر <link> نفسه بإنشاء ارتباط بالمورد المستورد (النوع الافتراضي للمورد هو text / html).
قد يحتوي عنصر <link> على سمة غير متزامنة.
يتم تقديم الإضافات التي توفرها مسودة المواصفات في HTMLLinkElement API: تمت إضافة خاصية استيراد للقراءة فقط تحتوي على المستند الذي تم استيراده.
يمكن أن تحتوي الخاصية على قيمة فارغة في حالتين: عندما لا يمثل <link> الاستيراد أو لا يكون <link> في المستند.
تنص المواصفة بشكل منفصل على أنه يجب دائمًا إعادة نفس الكائن.
في سياق عمليات الاستيراد ، هناك ما يسمى بالمستند الرئيسي ، وهو المستند الذي يستورد الموارد في نفس الوقت دون أن يكون موردًا مستوردًا لشخص آخر.
يجب أن تحدد ContentSecurityPolicy أي مستند جميع عمليات الاستيراد. لذلك ، إذا تم تعيين حقل رأس أمان المحتوى للاستيراد ، فيجب على المستعرض فرض سياسة المستند الرئيسي على المستند الذي تم استيراده.
عمليا
لمكون علامة التبويب ، أقوم بإنشاء مجلد قوالب. في ذلك ، سوف أقوم بإنشاء ملفين أقوم بنقل ترميز المكون فيه.
<template id="tab-content"> <style> :host { display: none; padding: 20px; width: 100%; background-color: rgb(255,212,201); } :host-context(.active){ display: block; } </style> <div><slot></slot></div> </template> <template id="tab-nav"> <style> :host{ padding: 10px; background-color: rgb(81,180,186); transition: background-color 1s; text-align: center; } :host-context(.active) { background-color: rgb(93, 209, 216); } a{ text-decoration: none; color: rgb(3,32,40); } </style> <a href="#${this._target}"><slot></slot></a> </template>
في <head> لملف index.html ، أقوم باستيراد القوالب:
<link rel="import" href="templates/tab-nav.html" id="tab-nav"> <link rel="import" href="templates/tab-content.html" id="tab-content">
أقوم بإضافة سمات المعرف إلى عناصر <link> ، حيث سأحتاج إلى الوصول إليها من js.
الآن ، في منشئي فئتي TabNavigationItem و TabContentItem ، للحصول على مستند القالب ، أحتاج فقط إلى العثور على عنصر <link> المقابل والتحول إلى خاصية الاستيراد الخاصة به ، وبعد ذلك سأبحث عن القالب بالفعل في المستند المستورد:
class TabNavigationItem extends HTMLElement { constructor() { super(); this._target = null; this.attachShadow({mode: 'open'}); const templateImport = document.getElementById('tab-nav').import; this.template = templateImport.getElementById('tab-nav'); }
يمكن أخذ النسخة النهائية هنا .
حول الدعم
دعم قوالب HTML: Edge c 16 و Firefox c 59 و Chrome c 49 و Safari c 11.
مع دعم استيراد أكثر حزن: Chrome c 49.
لذلك ، يمكن مشاهدة الأمثلة من هذه المقالة فقط في أحدث إصدار من Chrome.
هناك مواد متعددة:
مكونات الويبمشروع بوليمراقرأ المزيد حول القوالب والواردات:
مواصفات HTMLمواصفات HTML5تستورد HTML مسودة المواصفاتهذا كل شيء ، شكرا للمشاهدة ،
تانيا