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.
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!
Bayangkan struktur halaman web sebagai pokok, di mana setiap elemen (seperti
, atau
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
}
]
}
Ini menerangkan
elemen dengan teks "Hello, dunia!".
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.
}
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
}
]
}
), kami menandakannya untuk penggantian.
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.
}
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
