5.1 <template> Teqi
HTML-də <template> teqi inkişaf etdiricilərə səhifə yüklənərkən görünməyəcək, lakin daha sonra JavaScript vasitəsilə istifadə edilə biləcək HTML kod fraqmentlərini müəyyən etməyə imkan verir. Bu, xüsusilə siyahı elementləri, məhsul kartları və digər təkrarlanan strukturlar kimi dinamik məzmun yaratmaq və daxil etmək üçün faydalıdır.
<template> elementi səhifədə dərhal göstərilməyəcək HTML kodunu saxlamaq üçün istifadə olunur. <template> içərisindəki məzmun səhifə yüklənərkən brauzer tərəfindən render edilmir, lakin DOM (Document Object Model) vasitəsilə əlçatandır və JavaScript ilə klonlanaraq sənədə yerləşdirilə bilər.
Syntax:
<template>
<!-- Şablon məzmunu -->
</template>
<template> teqinin əsas xüsusiyyətləri
- Məzmunun gizlənməsi:
<template>teqinin məzmunu səhifə yüklənərkən göstərilmir. - JavaScript istifadə edərək:
<template>teqinin məzmunu JavaScript vasitəsilə klonlanıb DOM-a əlavə edilə bilər. - Gecikmiş yükləmə: məzmunu yalnız lazım olduqda yükləməyə və göstərməyə imkan verir ki, bu da səhifənin performansını artıra bilər.
<template> teqindən istifadə nümunəsi
Bu nümunədə "Add Item" düyməsinə kliklənildikdə yeni siyahı elementi yaradılır və <ul> siyahısına əlavə edilir. Yeni siyahı elementi üçün şablon <template> teqi daxilində müəyyən edilir.
<button id="addButton">Add Item</button>
<ul id="itemList"></ul>
<template id="itemTemplate">
<li class="item">Bu yeni elementdir</li>
</template>
// DOM-da istifadə edəcəyimiz elementlərə linklər alırıq
const addButton = document.getElementById('addButton'); // "Əlavə et" düyməsi
const itemList = document.getElementById('itemList'); // Elementləri əlavə edəcəyimiz siyahı
const itemTemplate = document.getElementById('itemTemplate'); // Siyahı elementi üçün şablon
// "Əlavə et" düyməsinə event handler əlavə edirik
addButton.addEventListener('click', () => {
// Siyahı elementinin şablonunu klonlayırıq
const newItem = itemTemplate.content.cloneNode(true); // true dərin klonlama deməkdir (bütün uşaqları da daxil olmaqla)
// Yeni elementi siyahıya əlavə edirik
itemList.appendChild(newItem);
});
5.2 Misal: məhsul kartlarının yaradılması
<template> və JavaScript ilə, məsələn, elementlər siyahısını — məhsul kartlarını yaratmaq olar.
<template> etiketindən istifadə misalı:
<h1>Məhsulların siyahısı</h1>
<div id="productList"></div>
<template id="productTemplate">
<div class="item">
<h2 class="title"></h2>
<p class="description"></p>
<span class="price"></span>
</div>
</template>
// DOM tam yükləndikdən sonra skriptin icrasını gözləyirik
document.addEventListener('DOMContentLoaded', () => {
// Məhsullar haqqında məlumatlar massiv
const products = [
{ title: 'Məhsul 1', description: 'Məhsul 1 haqqında təsvir', price: '100 dollar' },
{ title: 'Məhsul 2', description: 'Məhsul 2 haqqında təsvir', price: '200 dollar' },
{ title: 'Məhsul 3', description: 'Məhsul 3 haqqında təsvir', price: '300 dollar' },
];
// DOM-dakı elementlərə referans alırıq
const productList = document.getElementById('productList'); // Məhsul siyahısının konteyneri
const template = document.getElementById('productTemplate').content; // Məhsul elementinin şablonu
// Məhsullar massivini iterasiya edirik və hər biri üçün siyahıda element yaradırıq
products.forEach(product => {
// Məhsul şablonunu klonlayırıq
const clone = document.importNode(template, true); // true - dərin klonlama
// Klonlanmış şablona məlumatları əlavə edirik
clone.querySelector('.title').textContent = product.title;
clone.querySelector('.description').textContent = product.description;
clone.querySelector('.price').textContent = product.price;
// Doldurulmuş şablonu məhsul siyahısına əlavə edirik
productList.appendChild(clone);
});
});
İzah
<template>etiketi: HTML kodunu saxlayır, amma səhifə yükləndikdə göstərilmir.document.importNode(template, true)metodu: şablon məzmununu klonlayır.querySelectorvətextContentmetodları: klonlanmış şablonun məzmununu dəyişdirmək və sənədə əlavə etmədən əvvəl istifadə olunur.
5.3 <template> teqinin üstünlükləri
Performansı artırma
Şablonlardan istifadə HTML kodunu əvvəlcədən yükləməyə imkan verir, hansı ki sonra istifadə olunacaq. Bu, səhifənin performansını yaxşılaşdıra bilər, çünki şablonların məzmunu render olunmur və səhifənin ilkin yüklənməsinə təsir etmir.
Dinamik məzmunu sadələşdirir
Şablonlar dinamik məzmunun yaradılmasını asanlaşdırır. JavaScript-dən istifadə edərək proqramlı şəkildə HTML kodu yaratmaq əvəzinə, sadəcə əvvəlcədən hazırlanmış şablonları klonlayıb modifikasiya edə bilərsiniz.
Rahatlıq və oxunaqlıq
Şablonlar kodu daha oxunaqlı və strukturlaşdırılmış edir, çünki təkrarlanan elementlər üçün HTML kodu ayrıca saxlanıla bilər və onu JavaScript-ə daxil etmək lazım deyil.
Şərtli məzmun göstərmə nümunəsi:
<h1>Əməliyyatın nəticələri</h1>
<div id="messageContainer"></div>
<template id="messageTemplate">
<div class="message">
<p class="content"></p>
</div>
</template>
document.addEventListener('DOMContentLoaded', () => {
// DOM-dakı elementlərə linklər alırıq
const messageContainer = document.getElementById('messageContainer'); // Mesajlar üçün konteyner
const template = document.getElementById('messageTemplate').content; // Mesaj şablonu
// Mesaj göstərmək üçün funksiya
function showMessage(type, text) {
// Mesaj şablonunu klonlayırıq
const clone = document.importNode(template, true); // true - dərin klonlama
// Klonun daxilindəki mesaj elementinə link alırıq
const messageDiv = clone.querySelector('.message');
// Mesaj tipinə uyğun class əlavə edirik (success və ya error)
messageDiv.classList.add(type);
// Mesaj mətnini qururuq
messageDiv.querySelector('.content').textContent = text;
// Mesajı konteynerə əlavə edirik
messageContainer.appendChild(clone);
}
// Mesajları göstərmək üçün funksiya çağırırıq
showMessage('success', 'Əməliyyat uğurla tamamlandı!');
showMessage('error', 'Əməliyyat zamanı xəta baş verdi.');
});
İzah:
showMessage()funksiyası: mesaj tipini (uğur və ya xəta) və mesaj mətnini qəbul edir, şablonu klonlayır və onu mesaj konteynerinə əlavə edir..successvə.errorclass-ları: mesaj tipinə uyğun olaraq klonlanmış şablona tətbiq olunur və stil verir.
GO TO FULL VERSION