四、虚拟节点
自己动手实践,就会更加深刻的理解
在前面,已经解决了属性的深层次渲染,接下来需要解决虚拟节点的问题——即将DOM转换为vnode。
01、虚拟节点
简单起见,简单起见,对于一个虚拟节点,有这么些属性:
-
tag:表示节点的标签名
-
data:表示节点的属性
-
text:表示文本节点的文本(不为文本节点时,为undefined)
-
type:节点的类型
-
children:子节点
/**
* 虚拟节点
*/
class MyVNode {
/**
* 构造函数
* @param {string} tag 标签名
* @param {object} data 标签拥有的属性
* @param {string} text 文本节点中的文本(非文本节点则为undefined)
* @param {number} type 1代表元素节点,3代表文本节点
*/
constructor(tag, data, text, type) {
this.tag = tag && tag.toLowerCase();
this.data = data;
this.text = text;
this.type = type;
this.children = [];
}
/**
* 添加子节点
*/
appendChild(vnode) {
this.children.push(vnode);
}
}