虚拟dom和diff算法–6（手写子节点更新策略）

写在前面，笔记来源于www.bilibili.com/video/BV1iX… 侵删
完全是学习笔记，有问题请指正

我们前面说到，diff算法是按照：

新前新后
旧前旧后
新后旧前
新前旧后
复制代码

的顺序来进行查询命中的

export default function updataChildren(parentElm,oldCh,newCh){

console.log('我是updataChildren',parentElm,oldCh,newCh)

// 旧前

let oldStartIdx = 0;

// 新前

let newStartIdx = 0;

// 旧后

let oldEndIdx = oldCh.length-1;

// 新后

let newEndIdx = newCh.length-1;

\


// 真正的旧前旧后节点

let oldStartVnode = oldCh[0]

let oldEndVnode = oldCh[oldEndIdx]

// 真正的新前新后节点

let newStartVnode = newCh[0]

let newEndVnode = newCh[newEndIdx]

\


}
复制代码

updateChildren.js:

import patchVnode from '../patchVnode.js'

import createElement from '../createElement.js'

// 判断是否是同一个虚拟节点

function checkSameVnode(a, b) {

return a.sel == b.sel && a.key == b.key

}

export default function updataChildren(parentElm, oldCh, newCh) {

// console.log('我是updataChildren',parentElm,oldCh,newCh)

// 旧前

let oldStartIdx = 0;

// 新前

let newStartIdx = 0;

// 旧后

let oldEndIdx = oldCh.length - 1;

// 新后

let newEndIdx = newCh.length - 1;

\


// 真正的旧前旧后节点

let oldStartVnode = oldCh[0]

let oldEndVnode = oldCh[oldEndIdx]

// 真正的新前新后节点

let newStartVnode = newCh[0]

let newEndVnode = newCh[newEndIdx]

let keyMap = null

// 开始大while

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {

// 这里的if是在处理被标识为undefined的虚拟节点

if (oldStartVnode == null || oldCh[oldStartIdx] == undefined) {

oldStartVnode = oldCh[++oldStartIdx]

} else if (oldEndVnode == null || oldCh[oldEndIdx] == undefined) {

oldEndVnode = oldCh[--oldEndIdx]

} else if (newStartVnode == null || newCh[newStartIdx] == undefined) {

newStartVnode = newCh[++newStartIdx]

} else if (newEndVnode == null || newCh[newEndIdx] == undefined) {

newEndVnode = new [--newEndIdx]

}

// 旧前新前

else if (checkSameVnode(oldStartVnode, newStartVnode)) {

console.log('1新前旧前')

// 是同一个节点

patchVnode(oldStartVnode, newStartVnode)

// 注意，这里对比的是节点，oldStartIdx是指针，也就是下标标号

oldStartVnode = oldCh[++oldStartIdx]

newStartVnode = newCh[++newStartIdx]

// 新前旧前匹配成功之后=>指针顺位后移

// 新后旧后

} else if (checkSameVnode(newEndVnode, oldEndVnode)) {

console.log('2新后旧后')

patchVnode(oldEndVnode, newEndVnode)

oldEndVnode = oldCh[--oldEndIdx]

newEndVnode = newCh[--newEndIdx]

// 新后旧后匹配成功之后=>指针顺位前移

// 新后旧前

} else if (checkSameVnode(newEndVnode, oldStartVnode)) {

console.log('3新后旧前')

patchVnode(oldStartVnode, newEndVnode)

\


// 创建真实节点并插入,创建旧前节点

parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling)

oldStartVnode = oldCh[++oldStartIdx]

newEndVnode = newCh[--newEndIdx]

// 新后旧前匹配成功是将旧前匹配到虚拟节点标识undefined，将该节点挪动到真实dom的旧后之后

\


// 如何移动节点？？只要插入一个已经在dom树上的节点，就会被移动

} else if (checkSameVnode(newStartVnode, oldEndVnode)) {

// 新前旧后

console.log('4新前旧后')

\


patchVnode(newStartVnode, oldEndVnode)

parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm)

oldEndVnode = oldCh[--oldEndIdx]

newStartVnode = newCh[++newStartIdx]

\


// 新前旧后是将新前匹配到的虚拟节点标识undefined并且将该节点挪动到真实dom的新前之前

} else {

// 四种命中都没找到的情况，也是当前这个diff算法的最后的一个逻辑啦，也是最复杂的diff算法中最复杂的情况了！！！！

\


// 寻找key的map，制作keyMap的一个映射对象，这样就不用每次都遍历老对象了

if (!keyMap) {

keyMap = {}

// 从oldStartIdx开始，到oldEndIdx结束，去创建keymap映射对象

for (let i = oldStartIdx; i <= oldEndIdx; i++) {

const key = oldCh[i].key

if (key != undefined) {

keyMap[key] = i

}

}

}

console.log(1111,keyMap, newStartVnode)

// 寻找当前newStartIdx这项在keyMap中的映射的位置序号

const idxInOld = keyMap[newStartVnode.key]

console.log(idxInOld)

// 判断，如果idxInOld是undefined，就表示是全新的节点，在旧的里面没有，新的里面有

if (idxInOld == undefined) {

parentElm.insertBefore(createElement(newStartVnode),oldStartVnode.elm)

} else {

// 如果不是全新的节点，就需要移动

// debugger

const elmToMove = oldCh[idxInOld]

console.log(1, elmToMove)

// if(elmToMove.elm.nodeType == 1){

patchVnode(elmToMove, newStartVnode)

// 把这个节点设置为undefined，表示我处理完了这个节点

oldCh[idxInOld] = undefined

// 移动 调用insertBefore()

parentElm.insertBefore(elmToMove.elm, oldStartVnode.elm)

// }

}

// 指针下移，只移动新的头

newStartVnode = newCh[++newStartIdx]

// newStartIdx++

}

}

// old结束之后，要看看new里面是否还有剩余节点，也就是在末尾新增

if (newStartIdx <= newEndIdx) {

// 说明要增加

console.log('new还有剩余节点')

// debugger

// const before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm

// console.log(before)

for (let i = newStartIdx; i <= newEndIdx; i++) {

// newCh[i]此时还只是虚拟节点，还没有称为真正的dom，所以要调用createElement()将虚拟节点变成真实的dom节点

parentElm.insertBefore(createElement(newCh[i]), oldCh[oldStartIdx].elm)

// insertBefore可以自动识别null，如果是null，就会自动排到队尾去，和appendChild()是一致的

}

} else if (oldStartIdx <= oldEndIdx) {

// new循环结束，old还有，将old中剩余节点删除

// 需要注意的是，这里的删除只能删除old中的节点，不能删除结尾的，就是说这个情况只能删除结尾被匹配到的，不能匹配结尾就匹配不到的节点，这个情况会出现死循环，这个在上面的else中进行处理

console.log('old还有剩余节点')

// 批量删除oldStartIdx和oldEndIdx之间的节点们

for (let i = oldStartIdx; i <= oldEndIdx; i++) {

if (oldCh[i]) {

parentElm.removeChild(oldCh[i].elm)

}

}

}

}
复制代码

这节好难。也遇到了好多bug，后面会再整理一下：
1.四判定的具体逻辑
2.剩余项===>增加/删除 的逻辑