Mereka bentuk DOM Maya daripada Scratch: Panduan Langkah demi Langkah

Jika anda pernah mendengar tentang perpustakaan hadapan seperti React atau Vue, anda mungkin terjumpa istilah Virtual DOM. DOM Maya ialah konsep pintar yang membantu mempercepatkan pembangunan web dengan menjadikan kemas kini DOM lebih cekap.

Dalam panduan ini, kami akan membahagikan cara anda boleh melaksanakan DOM Maya mudah dari awal menggunakan langkah seperti kod generik.

Apakah DOM Maya?

DOM Maya hanyalah perwakilan dalam ingatan yang ringan bagi DOM sebenar (struktur halaman web). Daripada mengemas kini secara terus DOM sebenar (yang lambat), kami mula-mula membuat perubahan pada DOM Maya, mengetahui perkara yang telah berubah, dan kemudian mengemas kini hanya bahagian DOM sebenar yang perlu dikemas kini. Ini menjimatkan masa dan menjadikan apl anda lebih pantas!

---

Langkah 1: Mewakili DOM Maya sebagai Pokok

Bayangkan struktur halaman web sebagai pokok, di mana setiap elemen (seperti

,

, atau

) ialah "nod" dalam pokok itu. Nod DOM Maya ialah objek kecil yang mewakili salah satu elemen ini.

Ini contohnya:

Virtual DOM Node:
{
  type: 'div',
  props: { id: 'container' },  // attributes like id, class, etc.
  children: [                 // children inside this element
    {
      type: 'p',              // a <p> tag (paragraph)
      props: {},
      children: ['Hello, world!']  // text inside the </p><p> tag
    }
  ]
}
</p>

Ini menerangkan

elemen dengan id="bekas", yang mengandungi

elemen dengan teks "Hello, dunia!".

Perkara Utama:

• Setiap nod mempunyai jenis (cth., div, p).
• Ia boleh mempunyai prop (seperti id, kelas, dll.).
• Ia juga mempunyai kanak-kanak yang mungkin unsur atau teks lain.

---

Langkah 2: Memaparkan DOM Maya kepada DOM Sebenar

Sekarang kami mempunyai DOM Maya, kami memerlukan cara untuk mengubahnya menjadi HTML sebenar pada halaman.

Mari kita tulis fungsi yang dipanggil pemaparan yang mengambil nod DOM Maya dan menukarnya kepada elemen HTML sebenar.

function render(vNode) {
  // 1. Create a real element based on the Virtual DOM type (e.g., div, p).
  const element = document.createElement(vNode.type);

  // 2. Apply any attributes (props) like id, class, etc.
  for (const [key, value] of Object.entries(vNode.props)) {
    element.setAttribute(key, value);
  }

  // 3. Process the children of this Virtual DOM node.
  vNode.children.forEach(child => {
    if (typeof child === 'string') {
      // If the child is just text, create a text node.
      element.appendChild(document.createTextNode(child));
    } else {
      // If the child is another Virtual DOM node, recursively render it.
      element.appendChild(render(child));
    }
  });

  return element;  // Return the real DOM element.
}

Apa yang Berlaku Di Sini?

• Kami mencipta elemen (document.createElement(vNode.type)).
• Kami menambah sebarang atribut (seperti id, kelas, dll.).
• Kami mengendalikan kanak-kanak (teks atau elemen lain) dengan sama ada menambah teks atau pemaparan panggilan semula pada setiap elemen kanak-kanak.

---

Langkah 3: Membandingkan (Beza) DOM Maya Lama dan Baharu

Apabila sesuatu berubah dalam apl web kami (seperti teks atau gaya elemen), kami mencipta DOM Maya baharu. Tetapi sebelum kita mengemas kini DOM sebenar, kita perlu membandingkan DOM Maya lama dan DOM Maya baharu untuk mengetahui perkara yang telah berubah. Ini dipanggil "berbeza".

Mari buat fungsi yang membandingkan dua DOM Maya:

Virtual DOM Node:
{
  type: 'div',
  props: { id: 'container' },  // attributes like id, class, etc.
  children: [                 // children inside this element
    {
      type: 'p',              // a <p> tag (paragraph)
      props: {},
      children: ['Hello, world!']  // text inside the </p><p> tag
    }
  ]
}
</p>

Bagaimana Perbezaan Berfungsi:

• Perubahan Jenis Nod: Jika jenis elemen berubah (seperti menukar
  kepada

  ), kami menandakannya untuk penggantian.

• Perubahan Teks: Jika teks di dalam berubah, kami mengemas kini teks.
• Atribut & Kanak-kanak: Kami menyemak sama ada mana-mana atribut (props) atau anak unsur telah berubah.

---

Langkah 4: Menampal DOM Sebenar

Setelah kami mengetahui perkara yang telah berubah, kami perlu menerapkan perubahan tersebut pada DOM sebenar. Kami memanggil proses ini menampal.

Begini rupa fungsi menampal:


function render(vNode) {
  // 1. Create a real element based on the Virtual DOM type (e.g., div, p).
  const element = document.createElement(vNode.type);

  // 2. Apply any attributes (props) like id, class, etc.
  for (const [key, value] of Object.entries(vNode.props)) {
    element.setAttribute(key, value);
  }

  // 3. Process the children of this Virtual DOM node.
  vNode.children.forEach(child => {
    if (typeof child === 'string') {
      // If the child is just text, create a text node.
      element.appendChild(document.createTextNode(child));
    } else {
      // If the child is another Virtual DOM node, recursively render it.
      element.appendChild(render(child));
    }
  });

  return element;  // Return the real DOM element.
}

Operasi Utama:

• GANTI: Gantikan sepenuhnya satu elemen dengan elemen yang lain.
• TEKS: Kemas kini teks di dalam elemen.
• KEMASKINI: Kemas kini atribut dan anak berdasarkan perubahan.

---

Ringkasan Proses DOM Maya:

1. Pokok DOM Maya: Kami mencipta struktur seperti pokok yang mewakili elemen dan hierarkinya pada halaman web.
2. Render kepada DOM Sebenar: DOM Maya ini ditukar kepada elemen HTML sebenar dan diletakkan pada halaman.
3. Algoritma Beza: Apabila sesuatu berubah, kami membandingkan DOM Maya lama dengan yang baharu untuk mencari perbezaan.
4. Tampal DOM Sebenar: Gunakan perubahan tersebut pada DOM sebenar dengan cara yang paling cekap yang mungkin.

---

Fikiran Akhir

DOM Maya ialah alat berkuasa yang menjadikan pengemaskinian antara muka pengguna lebih pantas dengan mengurangkan perubahan yang tidak perlu kepada DOM sebenar. Dengan melaksanakan DOM Maya, kami boleh mengoptimumkan cara apl web mengemas kini dan memaparkan elemen, yang membawa kepada pengalaman pengguna yang lebih pantas dan lancar.

Ini ialah pelaksanaan asas konsep DOM Maya, tetapi anda kini mempunyai asas untuk memahami cara rangka kerja seperti React menggunakannya!