Mereka bentuk DOM Maya daripada Scratch: Panduan Langkah demi Langkah-tutorial js-php.cn

Designing a Virtual DOM from Scratch: A Step-by-Step Guide

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> tag
    }
  ]
}

Salin selepas log masuk

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.
}

Salin selepas log masuk

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> tag
    }
  ]
}

Salin selepas log masuk

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.
}

Salin selepas log masuk

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:

Pokok DOM Maya: Kami mencipta struktur seperti pokok yang mewakili elemen dan hierarkinya pada halaman web.
Render kepada DOM Sebenar: DOM Maya ini ditukar kepada elemen HTML sebenar dan diletakkan pada halaman.
Algoritma Beza: Apabila sesuatu berubah, kami membandingkan DOM Maya lama dengan yang baharu untuk mencari perbezaan.
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!

Atas ialah kandungan terperinci Mereka bentuk DOM Maya daripada Scratch: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：dev.to

Artikel sebelumnya：Bagaimana Mencetak PDF Terus daripada JavaScript dalam Aliran Kerja Berasaskan HTML? Artikel seterusnya：Video perubahan warna latar belakang

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

1626

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

1783

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1518

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...