القوالب والفتحات
ركّبوا المكوّنات باستخدام template وslot.
القوالب والفتحات درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
عنصر template
يحتوي عنصر <template> على HTML غير نشط تتم تحليته، لكنه لا يُعرض. ويظل محتواه خارج الصفحة إلى أن تستنسخوه وتدرجوه، مما يجعله مثاليًا للترميز القابل لإعادة الاستخدام.
الوصول إلى محتوى القالب
توجد العناصر الفرعية للقالب في الخاصية .content، وهي DocumentFragment. ولا تُنفّذ البرامج النصية ولا تُحمّل الصور والأنماط الموجودة داخله حتى يتم إدراجه.
// <template id="card"><p>Hi</p></template>
const tpl = document.getElementById('card');
const fragment = tpl.content; // DocumentFragmentاستنساخ قالب
استخدموا importNode أو cloneNode(true) لنسخ محتوى القالب، ثم أدرجوا النسخة المستنسخة. ويتيح الاستنساخ إنشاء نسخ كثيرة بتكلفة منخفضة.
const tpl = document.getElementById('card');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);القوالب داخل المكونات
تعرّف العناصر المخصصة غالبًا قالبًا مرة واحدة، ثم تستنسخه داخل جذر الظل لكل مثيل. وهذا أسرع من إعادة تحليل سلسلة HTML في كل مرة.
const tpl = document.createElement('template');
tpl.innerHTML = '<p>Reusable content</p>';
class MyCard extends HTMLElement {
constructor() {
super();
const root = this.attachShadow({ mode: 'open' });
root.appendChild(tpl.content.cloneNode(true));
}
}
customElements.define('my-card', MyCard);ما هو slot؟
إن <slot> هو عنصر نائب داخل شجرة ظل تُسقط فيه محتويات أبناء العنصر نفسه (أي light DOM). ويتيح ذلك للمستخدمين تمرير محتوى مخصص إلى المكون الخاص بكم.
// Shadow root markup:
// <div class="box"><slot></slot></div>
// Usage:
// <my-card>This text fills the slot</my-card>محتوى slot الافتراضي
يعمل المحتوى الموضوع بين علامتي <slot> كخيار احتياطي. ولا يظهر إلا عندما لا يوفر المستخدم محتوى مطابقًا.
// <slot>No content provided</slot>
// If the user supplies children, they replace the fallback.المنافذ المسماة
يمكن أن تتعايش عدة منافذ باستخدام السمة name. وتستهدف العناصر الفرعية في light DOM منفذًا باستخدام السمة slot.
// Shadow root:
// <header><slot name="title"></slot></header>
// <section><slot name="body"></slot></section>
// Usage:
// <my-card>
// <h2 slot="title">Hello</h2>
// <p slot="body">World</p>
// </my-card>المنفذ الافتراضي (غير المسمى)
المنفذ الذي لا يتضمن name هو المنفذ الافتراضي. ويُسقط فيه أي ابن لا يتضمن سمة slot. ويمكنكم الجمع بين منفذ افتراضي واحد وعدة منافذ مسماة.
// <slot name="header"></slot>
// <slot></slot> <!-- default: catches everything else -->تنسيق المحتوى المسقط
استخدموا العنصر الزائف ::slotted() لتنسيق العناصر الفرعية المسقطة من داخل أنماط الظل. وهو يطابق العقد المسقطة في المستوى الأعلى فقط.
// Inside shadow <style>:
// ::slotted(p) { margin: 0; color: gray; }
// ::slotted(h2) { font-size: 1.5rem; }حدث slotchange
يطلق المنفذ حدث slotchange عند تغيّر العقد المسندة إليه. استمعوا إليه للاستجابة عند إضافة المستخدمين محتوى مسقطًا أو إزالته.
const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
const nodes = slot.assignedNodes();
console.log('slot now has', nodes.length, 'nodes');
});القوالب والمنافذ معًا
تعرّف القوالب البنية مرة واحدة، بينما تجعل المنافذ هذه البنية مرنة من خلال السماح للمستهلكين بحقن محتواهم الخاص. وتوفر معًا أساسًا قويًا لـ Web Components النظيفة والقابلة لإعادة الاستخدام والتخصيص.
اختبار سريع
اختبروا مدى فهمكم للقوالب والمنافذ.
مراجعة
تعلمتم القوالب والمنافذ:
- يحتوي
<template>على ترميز غير نشط وقابل لإعادة الاستخدام في.content. - استنسخوا القالب باستخدام
cloneNode(true)قبل إدراجه. - يسقط
<slot>محتوى light DOM داخل شجرة الظل. - تستخدم المنافذ المسماة
nameمع سمةslotالخاصة بالعنصر الابن. - ينسّق
::slotted()العقد المسقطة، بينما يستجيبslotchangeللتحديثات.
لقد أكملتم Web Components. سننتقل بعد ذلك إلى Intersection Observer API.
الأسئلة الشائعة
هل درس «القوالب والفتحات» مجاني؟
نعم — نص درس «القوالب والفتحات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
ماذا ستتعلم في «القوالب والفتحات»؟
ركّبوا المكوّنات باستخدام template وslot. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟
لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «القوالب والفتحات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟
نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.