image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="btn">点击</div>
<div id="app"></div>
</body>
<script>
function VNode(sel, data, children, text, elm) {
return {
sel, data, children, text, elm
}
}
function h(sel, data, c) {
if(arguments.length !== 3){
throw new Error('参数必须为3')
}
if(typeof c === 'string') {
return VNode(sel, data, undefined, c, undefined)
} else if(Array.isArray(c)) {
const children = []
c.forEach(item => {
if(!(typeof item === 'object' && item.hasOwnProperty('sel'))) {
throw new Error('您传入的参数有问题')
}
children.push(item)
})
return VNode(sel, data, children, undefined, undefined)
} else if(typeof c === 'object' && c.hasOwnProperty('sel')) {
return VNode(sel, data, [c], undefined, undefined)
}
}
const _Vnode = h('div', {}, [
h('p', {}, '6666'),
h('p', {}, '6666'),
h('p', {}, '6666'),
h('p', {}, h('span', {}, 'A'))
])
function createElement(vNode) {
console.log(`目的是把虚拟节点`, vNode, '真正变为DOM节点，但是不插入');
let domNode = document.createElement(vNode.sel)
// 有子节点还是有文本
if(vNode.text !== '' && (vNode.children == undefined || vNode.children.length == 0)) {
// 它内部是文字
domNode.innerText = vNode.text
} else if(Array.isArray(vNode.children) && vNode.children.length > 0) {
const children = vNode.children
for (let i = 0; i < children.length; i++) {
// 通过递归创建出节点，并把节点放到父节点上
const cDom = createElement(children[i])
domNode.appendChild(cDom)
}
}
// 补充elm
vNode.elm = domNode
return vNode.elm
}
function patch (oldNode, newNode) {
// 判断传入的第一参数，是DOM节点还是虚拟节点？
if(oldNode.sel == '' || oldNode.sel == undefined) {
oldNode = VNode(oldNode.tagName.toLowerCase(), {}, [], undefined, oldNode)
}
// 判断oldVnode和newVnode 是不是同一个节点
if(oldNode.key === newNode.key && oldNode.sel == newNode.sel) {
console.log('同一个节点');
} else {
// 不是同一个节点，暴力插入新的，删除旧的
console.log(newNode)
const newElementDom = createElement(newNode,oldNode.elm)
if(oldNode.elm.parentNode && newElementDom) {
oldNode.elm.parentNode.insertBefore(newElementDom, oldNode.elm)
}
// 删除老节点
oldNode.elm.parentNode.removeChild(oldNode.elm)
}
}
console.log(_Vnode);
const vnode2 = h('ul', {}, [
h('li', {}, 'A'),
h('li', {}, [
h('p', {}, 'p')
]),
h('li', {}, 'C'),
h('li', {}, 'D'),
])
const vnode3 = h('ol', {}, [
h('li', {}, 'A'),
h('li', {}, 'B'),
h('li', {}, 'C'),
h('li', {}, 'D'),
])
const vnode1 = document.getElementById('app')
patch(vnode1, vnode2)
btn.onclick = function() {
patch(vnode2, vnode3)
}
</script>
</html>
未标题-1.png
function patch (oldNode, newNode) {
// 判断传入的第一参数，是DOM节点还是虚拟节点？
if(oldNode.sel == '' || oldNode.sel == undefined) {
oldNode = VNode(oldNode.tagName.toLowerCase(), {}, [], undefined, oldNode)
}
// 判断oldVnode和newVnode 是不是同一个节点
if(oldNode.key === newNode.key && oldNode.sel == newNode.sel) {
console.log('同一个节点');
// 如果新旧节点都一样 就什么都不做
if(newNode === oldNode) return
// 如果新的node有text属性 且没有children
if(newNode.text !== undefined && (newNode.children == undefined || !newNode.children.length) ) {
console.log('新的node有text', newNode)
if(newNode.text !== oldNode.text) {
// 如果新虚拟节点中的text和老的虚拟节点的text不同，那么直接让新的text写入老的elm中即可。如果老的elm中是children，那么也会立即消失掉。
oldNode.elm.innerText = newNode.text
}
} else {
console.log('新的node没有text,说明newNode 有children')
if(oldNode.children !== undefined && oldNode.children.length > 0) {
// 最复杂的情况 要进行最最精细化比较 新老都有children
} else {
// 老是没有 children,新的有children节点
oldNode.elm.innerHTML = ''
newNode.children.forEach(item => {
oldNode.elm.appendChild(createElement(item))
})
console.log(newNode.children)
}
}
} else {
// 不是同一个节点，暴力插入新的，删除旧的
console.log(newNode)
const newElementDom = createElement(newNode,oldNode.elm)
if(oldNode.elm.parentNode && newElementDom) {
oldNode.elm.parentNode.insertBefore(newElementDom, oldNode.elm)
}
// 删除老节点
oldNode.elm.parentNode.removeChild(oldNode.elm)
}
}
五角星（最复杂的情况）
image.png
image.png
image.png
image.png
image.png
image.png
网友评论