-
Notifications
You must be signed in to change notification settings - Fork 0
/
VirtualDOM.html
76 lines (72 loc) · 2.63 KB
/
VirtualDOM.html
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
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Virtual DOM</title>
</head>
<body>
<h3>大家都知道，React、Vue 内部都采用了 Virtual DOM 的技术。简而言之，就是用普通的 JavaScript 对象来表示 DOM 的结构和信息。例如下面的 DOM 结构：</h3>
<pre>
<ul id='list' style='color: red'>
<li class='item'>Item 1</li>
<li class='item'>Item 2</li>
<li class='item'>Item 3</li>
</ul>
</pre>
<p>可以用 JavaScript 的对象表示为：</p>
<pre>
const ul = {
tagName: 'ul', // 节点标签名
props: { // DOM的属性，用一个对象存储键值对
id: 'list',
style: 'color: red'
},
children: [ // 该节点的子节点
{tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
{tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
{tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
]
}
</pre>
<p>每个代表 DOM 节点的对象有三个属性：</p>
<ol>
<li>tagName：代表 DOM 节点的标签名。</li>
<li>props：这个 DOM 节点的属性，用一个对象表示。</li>
<li>children：这个 DOM 节点的子节点，是一个数组；数组的元素可以是 字符串 或者 对象。如果是字符串就表示这个子节点是文本节点，否则就表示是另外一个 DOM 节点。</li>
</ol>
<p>请你完成 h 函数，可以通过 h 函数生成上面的结果，例如：</p>
<pre>
const ul = h('ul', {id: 'list', style: 'color: red'}, [
h('li', {class: 'item'}, ['Item 1']),
h('li', {class: 'item'}, ['Item 2']),
h('li', {class: 'item'}, ['Item 3'])
])
ul.props.id === 'list' // => true
</pre>
<p>h 函数需要返回的实例是属于 VNode 这个类的：</p>
<pre>
ul instanceof VNode // => true
</pre>
<p>请你完成 h 函数和 VNode 的实现。</p>
<script>
class VNode {
constructor(tagName, props, children) {
this.tagName = tagName
this.props = props
this.children = children
}
}
function h(tagName, props, children) {
return new VNode(tagName, props, children)
}
const ul = h('ul', { id: 'list', style: 'color: red' }, [
h('li', { class: 'item' }, ['Item 1']),
h('li', { class: 'item' }, ['Item 2']),
h('li', { class: 'item' }, ['Item 3'])
])
console.log(ul)
</script>
</body>
</html>