1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| let data = {
tag: "div",
children: [
{
tag: "span",
children: [
{
tag: "#text",
content: "hello world",
},
],
},
{
tag: "p",
children: [
{
tag: "#text",
content: "This is a paragraph!",
},
{
tag: "h1",
children: [
{
tag: "#text",
content: "This is a H1 tag",
},
],
},
{
tag: "h6",
children: [
{
tag: "#text",
content: "and I'm h6",
},
],
},
],
},
],
}
class VDOM {
constructor(data) {
this.tag = data.tag
this.children = data.children
this.content = data.content
}
static render(data) {
let _this = new VDOM(data)
if (_this.tag === "#text") {
return document.createTextNode(_this.content)
}
let node = document.createElement(_this.tag)
_this.children.map((child) => node.appendChild(VDOM.render(child)))
return node
}
}
let diff = (root, oldV, newV, current = 0) => {
if (!oldV) root.appendChild(newV)
else if (!newV) root.removeChild(root.childNodes[current])
else if (newV.tag !== oldV.tag || newV.content !== oldV.content)
root.replaceChild(new VDOM(newV).render(), root.childNodes[current])
else
for (let i = 0; i < newV.children.length || i < oldV.children.length; i++)
diff(root.childNodes[i], oldV.children[i], newV.children[i], i)
}
document.querySelector("#root").appendChild(VDOM.render(data))
|