الشرح الشامل لعنصر <template> في HTML
مقدمة عن عنصر <template>
عنصر <template> هو عنصر HTML5 مصمم لتخزين محتوى HTML يمكن استخدامه لاحقًا عبر JavaScript. هذا العنصر لا يُعرض عند تحميل الصفحة، بل يظل مخفيًا حتى يتم استدعاؤه واستخدامه بواسطة كود JavaScript.
البنية الأساسية
<template id="myTemplate">
<div class="content">
<h5>عنوان</h5>
<p>محتوى هنا</p>
</div>
</template>خصائص عنصر <template>
- لا يُعرض: المحتوى داخل
<template>لا يظهر في الصفحة - لا يؤثر على DOM: العناصر داخل القالب لا تظهر في شجرة DOM
- غير فعال: الصور والوسائط لا يتم تحميلها حتى يتم استخدام القالب
- يمكن الوصول إليه: يمكن الوصول للمحتوى عبر JavaScript
استخدامات <template>
إنشاء عناصر متكررة ديناميكيًا
<template id="userCard">
<div class="card">
<img src="" class="avatar">
<h6 class="name"></h6>
<p class="email"></p>
</div>
</template>
<script>
function createUserCard(user) {
const template = document.getElementById('userCard');
const clone = template.content.cloneNode(true);
clone.querySelector('.avatar').src = user.avatar;
clone.querySelector('.name').textContent = user.name;
clone.querySelector('.email').textContent = user.email;
document.body.appendChild(clone);
}
</script>إنشاء مكونات ويب معقدة
<template id="modalTemplate">
<div class="modal">
<div class="modal-content">
<span class="close">×</span>
<div class="modal-body"></div>
</div>
</div>
</template>
<script>
function showModal(content) {
const template = document.getElementById('modalTemplate');
const clone = template.content.cloneNode(true);
clone.querySelector('.modal-body').innerHTML = content;
document.body.appendChild(clone);
clone.querySelector('.close').addEventListener('click', () => {
document.querySelector('.modal').remove();
});
}
</script>الفوائد الرئيسية
- تحسين الأداء: تخزين القوالب بدلاً من إنشائها ديناميكيًا
- تنظيم الكود: فصل هيكل HTML عن منطق JavaScript
- إعادة الاستخدام: استخدام نفس القالب في أماكن متعددة
- سهولة الصيانة: تعديل القالب في مكان واحد فقط
التوافق مع المتصفحات
يدعم جميع المتصفحات الحديثة عنصر <template> بما في ذلك:
Chrome
مدعوم بالكامل
Firefox
مدعوم بالكامل
Safari
مدعوم بالكامل
Edge
مدعوم بالكامل
Internet Explorer
منذ الإصدارات القديمة
Opera
مدعوم بالكامل
الفرق بين <template> وطرق أخرى
| الطريقة | الميزات |
|---|---|
<template> |
مخفي، غير فعال، لا يؤثر على DOM، سهل الاستخدام مع JavaScript |
display: none |
مخفي ولكن موجود في DOM، يتم تحميل الموارد |
| إنشاء عناصر ديناميكيًا | غير مخزن مسبقًا، قد يكون إنشاؤه مكلفًا للأجزاء المعقدة |
أفضل الممارسات
- استخدم معرّفات واضحة: أعطِ قوالبك أسماء واضحة
- قم بتجميع القوالب: ضعها معًا في مكان واحد في الصفحة
- استخدم مع Web Components: مثالي للاستخدام مع Shadow DOM
- قلل من التعقيد: لا تجعل القوالب معقدة جدًا
مثال متكامل
<!DOCTYPE html>
<html>
<head>
<title>مثال Template</title>
<style>
.product-card {
border: 1px solid #ddd;
padding: 15px;
margin: 10px;
width: 200px;
display: inline-block;
}
.product-image {
width: 100%;
height: 150px;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<template id="productTemplate">
<div class="product-card">
<div class="product-image"></div>
<h6 class="product-name"></h6>
<p class="product-price"></p>
<button class="add-to-cart">إضافة إلى السلة</button>
</div>
</template>
<div id="productsContainer"></div>
<script>
const products = [
{ name: 'حاسوب محمول', price: '$800', image: 'laptop.jpg' },
{ name: 'هاتف ذكي', price: '$500', image: 'phone.jpg' },
{ name: 'سماعات', price: '$100', image: 'headphones.jpg' }
];
function renderProducts() {
const container = document.getElementById('productsContainer');
const template = document.getElementById('productTemplate');
products.forEach(product => {
const clone = template.content.cloneNode(true);
clone.querySelector('.product-name').textContent = product.name;
clone.querySelector('.product-price').textContent = product.price;
clone.querySelector('.product-image').style.backgroundImage = `url(${product.image})`;
clone.querySelector('.add-to-cart').addEventListener('click', () => {
alert(`تمت إضافة ${product.name} إلى السلة`);
});
container.appendChild(clone);
});
}
renderProducts();
</script>
</body>
</html>الاستخدام مع تقنيات أخرى
مع Web Components
<template id="custom-element-template">
<style>
.custom-element {
color: blue;
padding: 10px;
border: 1px solid currentColor;
}
</style>
<div class="custom-element">
<slot name="content"></slot>
</div>
</template>
<script>
class CustomElement extends HTMLElement {
constructor() {
super();
const template = document.getElementById('custom-element-template');
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('custom-element', CustomElement);
</script>
<custom-element>
<span slot="content">محتوى مخصص هنا</span>
</custom-element>مع مكتبات JavaScript
<template id="todoItemTemplate">
<li class="todo-item">
<input type="checkbox" class="complete-checkbox">
<span class="todo-text"></span>
<button class="delete-btn">حذف</button>
</li>
</template>
<script>
// مثال مع jQuery
function addTodoItem(text) {
const template = $('#todoItemTemplate').html();
const $item = $(template);
$item.find('.todo-text').text(text);
$item.find('.delete-btn').click(function() {
$(this).parent().remove();
});
$('#todoList').append($item);
}
</script>الخلاصة
عنصر <template> هو أداة قوية في HTML5 تمكنك من:
- تخزين أجزاء HTML للاستخدام لاحقًا
- تحسين أداء التطبيقات
- تنظيم الكود بشكل أفضل
- إنشاء واجهات مستخدم ديناميكية بكفاءة
باستخدام <template> مع JavaScript، يمكنك بناء تطبيقات ويب أكثر كفاءة وسهولة في الصيانة.
