js/views/gallery.js — tinklelis su DocumentFragment

Kodo stulpelyje — js/views/gallery.js. renderGallery(pictures) išvalo tinklelį, sudeda visas korteles į DocumentFragment ir įdeda jį vienu ėjimu. (Kol kas nuotraukas paduodam kaip argumentą; 8 pamokoje jos ateis iš centrinės būsenos.)

Prieš tai index.html viduje reikia tinklelio konteinerio:

<div id="gallery" class="grid"></div>

(class="grid" — CSS tinklelis; stiliai jau pateikti style.css.)

Ir main.js vietoj teksto dabar piešia galeriją:

import { renderGallery } from './views/gallery.js';
// ...load() viduje, pavykus:
renderGallery(pictures);

Visas renderGallery — trys žingsniai: išvalyk (innerHTML = ''), sudėk į fragmentą, įdėk vieną kartą. Paskutinė eilutė — revealOnScroll(...) — įjungia „išnyrantį" pasirodymą (kitą žingsnį).

Patarimas. gallery.innerHTML = '' pradžioje yra svarbus: be jo kiekvienas renderGallery kviesdamas pridėtų korteles prie senų, ir jos dubliuotųsi. Perpiešimo modelis paprastas: išvalyk viską, tada pastatyk iš naujo iš duomenų. Tai neefektyviau nei „taškinis" atnaujinimas, bet daug paprasčiau ir mažiau klaidų — o būtent tai karkasai vėliau optimizuoja už tave (virtualus DOM).

gallery.js SUKURTI

Sukurk šį failą kataloge js/views/

// The gallery grid: an array of pictures → a grid of cards.
// (For now it takes `pictures` as an argument. In lesson 8 it will read them
//  from a central state store instead.)

import { createCard } from '../components/card.js';
import { revealOnScroll } from '../observers.js';

const gallery = document.getElementById('gallery');   // <div id="gallery" class="grid">

export function renderGallery(pictures) {
  gallery.innerHTML = '';                              // clear the old render

  // A DocumentFragment is an off-screen container. We build the whole list of
  // cards inside it, then append ONCE — so the browser reflows the page a single
  // time, not once per card.
  const frag = document.createDocumentFragment();
  pictures.forEach(pic => frag.appendChild(createCard(pic)));
  gallery.appendChild(frag);

  // Fade the cards in as they scroll into view — via IntersectionObserver, not
  // scroll events (see observers.js for why that matters).
  revealOnScroll([...gallery.querySelectorAll('.picture-card')]);
}