JavaScript Academy · Ders

Şablonlar ve Yuvalar

Bileşenleri template ve slot ile birleştirin.

Şablonlar ve Yuvalar, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Şablon Öğesi

<template> öğesi, ayrıştırılan ancak oluşturulmayan etkin olmayan HTML'yi barındırır. İçeriği klonlanıp eklenene kadar sayfadan ayrı kalır; bu da onu yeniden kullanılabilir işaretleme için ideal kılar.

Şablon İçeriğine Erişme

Bir şablonun alt öğeleri, bir DocumentFragment olan .content özelliğinde bulunur. İçindeki betikler, görseller ve stiller eklenene kadar çalıştırılmaz veya yüklenmez.

// <template id="card"><p>Hi</p></template>
const tpl = document.getElementById('card');
const fragment = tpl.content; // DocumentFragment

Şablon Klonlama

Şablon içeriğini kopyalamak için importNode veya cloneNode(true) kullanın, ardından klonu ekleyin. Klonlama, çok sayıda kopyayı düşük maliyetle oluşturmanızı sağlar.

const tpl = document.getElementById('card');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);

Bileşenlerin İçindeki Şablonlar

Özel öğeler genellikle bir şablonu bir kez tanımlar ve her örnekte bu şablonu gölge root'larına klonlar. Bu, her seferinde bir HTML dizesini yeniden ayrıştırmaktan daha hızlıdır.

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);

Yuva Nedir

Bir <slot>, öğenin kendi alt içeriğinin (gölge dışı DOM) yansıtıldığı gölge ağacındaki yer tutucudur. Bu, kullanıcıların bileşeninize özel içerik aktarmasını sağlar.

// Shadow root markup:
// <div class="box"><slot></slot></div>

// Usage:
// <my-card>This text fills the slot</my-card>

Varsayılan Yuva İçeriği

<slot> etiketleri arasına yerleştirilen içerik yedek içerik görevi görür. Yalnızca kullanıcı eşleşen bir içerik sağlamadığında gösterilir.

// <slot>No content provided</slot>
// If the user supplies children, they replace the fallback.

Adlandırılmış Yuvalar

Birden fazla yuva, name özniteliği kullanılarak birlikte bulunabilir. Gölge dışı DOM alt öğeleri, slot özniteliğiyle bir yuvayı hedefler.

// 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>

Varsayılan (Adsız) Yuva

name özniteliği olmayan bir yuva varsayılan yuvadır. slot özniteliği olmayan her alt öğe oraya yansıtılır. Bir varsayılan yuvayı birkaç adlandırılmış yuvayla birlikte kullanabilirsiniz.

// <slot name="header"></slot>
// <slot></slot>  <!-- default: catches everything else -->

Yuvaya Yansıtılan İçeriği Biçimlendirme

Yansıtılan alt öğeleri gölge stillerinin içinden biçimlendirmek için ::slotted() sözde öğesini kullanın. Bu öğe yalnızca üst düzeydeki yuvaya atanmış düğümlerle eşleşir.

// Inside shadow <style>:
// ::slotted(p) { margin: 0; color: gray; }
// ::slotted(h2) { font-size: 1.5rem; }

slotchange Olayı

Bir yuva, atanmış düğümleri değiştiğinde slotchange olayını tetikler. Kullanıcılar yansıtılan içeriği eklediğinde veya kaldırdığında tepki vermek için bu olayı dinleyin.

const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
  const nodes = slot.assignedNodes();
  console.log('slot now has', nodes.length, 'nodes');
});

Şablonlar ve Yuvalar Birlikte

Şablonlar yapıyı bir kez tanımlar; yuvalar, kullanıcıların kendi içeriklerini eklemesine izin vererek bu yapıyı esnek kılar. Birlikte temiz, yeniden kullanılabilir ve özelleştirilebilir Web Bileşenlerine güç verirler.

Hızlı Kontrol

Şablonlar ve yuvalar konusundaki anlayışınızı sınayın.

Özet

Şablonları ve yuvaları öğrendiniz:

<template>, .content içinde etkin olmayan ve yeniden kullanılabilir işaretlemeyi barındırır.
Eklemeden önce cloneNode(true) ile klonlayın.
<slot>, gölge dışı DOM'u gölge ağacına yansıtır.
Adlandırılmış yuvalar, name ile çocuğun slot özniteliğini kullanır.
::slotted() yansıtılan düğümleri biçimlendirir; slotchange güncellemelere tepki verir.

Web Bileşenleri bölümünü tamamladınız. Sırada Intersection Observer API'si var.

Sıkça Sorulan Sorular

“Şablonlar ve Yuvalar” dersi ücretsiz mi?

Evet — “Şablonlar ve Yuvalar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Şablonlar ve Yuvalar” dersinde ne öğreneceğim?

Bileşenleri template ve slot ile birleştirin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Şablonlar ve Yuvalar” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön