写在前面，笔记来源于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.剩余项===>增加/删除 的逻辑
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！