自己实现虚拟 DOM
从 HTML 中提炼数据结构
先来看下我们的 HTML
<div class='root'>
<h1><span>傅雷家书</span></h1>
<span>读家书，想付雷</span>
</div>
从 HTML 中我们可以抽离出它的数据结构：
- 首先页面中只需要一个根节点
root，定义为：nodesDate数组 -
root内有两个子元素h1和span，数组有两项，每项为内容为tag和children - 接下来内部所有元素都是如此定义，直到遇到文本元素，将他定义为
text
nodesDate = {
tag:"div",
children:[{
tag:'h1',
children:[{
tag:'span',
children:[{
tag:'#text',
text:'傅雷家书'
}]
}]
},{
tag:'span',
children:[{
tag:'#text',
text:'读家书，想傅雷'
}]
}]
}
用这种视野在看 HTML 的话，就不是单纯的 HTML 了，而是一堆hash
从上面数据结构中我们可以提炼出3个有用的属性，分别是tag、children、text，那我们是不是可以定义一个方法，传递这三个参数，就能满足我们的需求呢？
构造 HTML 方法
想一下我们拿到这三个参数后，要干什么呢？
当然是在页面中生成 DOM 元素啊！
对，这三个参数是我们各自私有属性，通过这三个属性能生成各自的 DOM，生成 DOM 的方法是不是公用的呢？
所以可以用用构造函数模式创建我们要的方法，（PS：之前讲过new操作符的背后的逻辑，不理解的可移步：使用 new 操作符内部到底在做什么）
function vNode(tag,children,text){
this.tag = tag
this.children = children
this.text = text
}
vNode.prototype.render = function(){
//如 tag 为文本的话，创建一个文本节点
if(this.tag === '#text'){
return document.createTextNode(this.text) // 返回文本
}
//tag 不是文本的话，创建一个 DOM 节点，并且遍历 children，每次遍历都是调用自身的 render 方法
let element = document.createElement(this.tag)
this.children.forEach((vChild)=> {
element.appendChild(vChild.render()) //在遍历 h1 时，没有直接跳出，而是在其内部不断循环。直到 h1 内部的 children 全部循环结束为止，才进入下一个元素 span，当 h1 循环结束时，h1 内部的节点都已经生成好了。
})
return element //返回节点
}
function v(tag,children,text){
//如果 chilren 为字符串，那么就把 children 赋值给 text，并把 children 初始化为 []，不然后面会报错
if(typeof children === 'string'){
text = children
children = []
}
return new vNode(tag,children,text)
}
//格式参见 nodesData，vNode 的实例化
let vNodes = v('div',[
v('h1',[
v('span',[
v('#text','傅雷家书')])
]),
v('span',[
v('#text','——傅敏')])
])
const root = document.querySelector('.root') //获取 root 节点
root.appendChild(vNodes.render()) //这里只运行一次，把最终的 DOM 添加进页面中
实现增删改
如果此时一个数据变动比如，按照以前的逻辑
root.innerText = ''
root.appendChild(vNodes.render())
如果数据非常大，用这种方法根本没啥意义，每一次改动 DOM 树都要重新渲染一遍，造成性能低下，有什么好的方法可以实现呢？
function patchElement(parent, newVNodes, oldVNodes, index = 0) {
//如果没有传递老的 VNodes，默认就是新的
if(!oldVNodes) {
parent.appendChild(newVNodes.render())
} else if(!newVNodes) {
parent.removeChild(parent.childNodes[index])
} else if(newVNodes.tag !== oldVNodes.tag || newVNodes.text !== oldVNodse.text) {
//如果元素不一样或者文本不一样，走这边
//当有走这边时，newVNodes 是和 oldVNodes 不同的那个值，这里的 parent 是当前元素或文本的 parent
//replaceChild(sp1,sp2)，是将 sp2 换成 sp1
parent.replaceChild(newVNodes.render(), parent.childNodes[index])
} else {
for(let i = 0; i < newVNodes.children.length || i < oldVNodes.children.length; i++) {
//取值永远是 newVNodes.length，除非不传 newVNodes
//这里 index 只有当 i 变化时，下一次才是 index 才等于 i 的值
//当 i = 0 时，这次的 parent.childNode[index]，是下一次的 parent，所以这里要用 index
//当循环走完，发现元素或者文本不一样时，才走第三个逻辑
patchElement(parent.childNodes[index], newVNodes.children[i], oldVNodes.children[i], i)
}
}
}
