虚拟DOM和diff算法
diff：精细化比对最小量更新
真实DOM和虚拟DOM
虚拟DOM：用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。
- 真实DOM
<div>
<h3>我是一个标题</h3>
<ul>
<li>牛奶</li>
<li>咖啡</li>
<li>可乐</li>
</ul>
</div>
- 虚拟DOM
{
"sel":"div",
"data":{
"class":{"box":true}
},
"children":[
{
"sel":"h3",
"data":{},
"text":"我是一个标题"
}，
{
"sel":"ul",
"data":{},
"children":[
{ "sel":"li","data":{},"text":"牛奶"},
{ "sel":"li","data":{},"text":"咖啡"},
{ "sel":"li","data":{},"text":"可乐"}
]
}
]
}
重点：diff是发生在虚拟DOM上的
新虚拟DOM和老虚拟DOM进行diff（精细化比较），算出应该如何最小量更新，最后反映到真正的DOM上。
snabbdom
snabbdom是著名的虚拟DOM库，是diff算法的鼻祖，Vue源码借鉴了snabbdom
- 在git上的snabbdom源码是用TypeScript写的，git上并不提供编译好的JavaScript版本
- 如果要直接使用build出来的JavaScript版的snabbdom库，可以从npm上下载
snabbdom的测试环境搭建
- snabbdom库是DOM库，当然不能在nodejs环境运行，所以我们需要搭建webpack和webpack-dev-server开发环境，好消息是不需要安装任何loader
- 这里需要注意，必须安装最新版webpack@5，不能安装webpack@4，这是因为webpack4没有读取身份证中exports的能力，建议大家使用这样的版本：
npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3
- webpack.config.js
// 从https://www.webpackjs.com/官网照着配置
const path = require('path');
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
// 虚拟打包路径，就是说文件夹不会真正生成，而是在8080端口虚拟生成
publicPath: 'xuni',
// 打包出来的文件名，不会真正的物理生成
filename: 'bundle.js'
},
devServer: {
// 端口号
port: 8080,
// 静态资源文件夹
contentBase: 'www'
}
};
重点：DOM如何变为虚拟DOM，属于模板编译原理范畴
h函数
- h函数用来产生虚拟节点（vnode）
h('a', { props: { href: 'http://www.atguigu.com' }}, '尚硅谷');
- 将得到这样的虚拟节点
{ "sel": "a", "data": { props: { href: 'http://www.atguigu.com' } }, "text": "尚硅谷" }
- 它表示的真正的DOM节点
<a href="http://www.atguigu.com">尚硅谷</a>
一个虚拟节点有哪些属性
{
children:undefined
data:{}
elm:undefined,//如果是undefined代表这个虚拟节点还没有上树
key:undefined,//节点的唯一标识
sel:"div",
text:"我是一个盒子"
}
h函数可以嵌套使用，从而得到虚拟DOM树（重要）
- 比如这样嵌套使用h函数：
h('ul', {}, [
h('li', {}, '牛奶'),
h('li', {}, '咖啡'),
h('li', {}, '可乐')
]);
- 将得到这样的虚拟DOM树：
{
"sel": "ul",
"data": {},
"children": [
{ "sel": "li", "text": "牛奶" },
{ "sel": "li", "text": "咖啡" },
{ "sel": "li", "text": "可乐" }
]
}
diff算法的心得
- 最小量更新太厉害啦！真的是最小量更新！当然，key很重要。key是这个节点的唯一标识，告诉diff算法，在更改前后它们是同一个DOM节点。
- 只有是同一个虚拟节点，才进行精细化比较，否则就是暴力删除旧的、插入新的。延伸问题：如何定义是同一个虚拟节点？答：选择器相同且key相同。
- 只进行同层比较，不会进行跨层比较。即使是同一片虚拟节点，但是跨层了，对不起，精细化比较不diff你，而是暴力删除旧的、然后插入新的
1.png
-
diff处理新旧节点不是同一个节点时
2.png
function sameVnode(vnode1:VNode,vnode2:VNode):boolean{
return vnode1.key===vnode2.key&&vnode1.sel===vnode2.sel;
}
//旧节点的key要和新节点的key相同而且旧节点的选择器要和新节点的选择器相同
-
创建节点时候，所有子节点需要递归创建
3.png
手写snabbdom的diff算法(很重要)
-
流程图
4.png
diff算法的子节点更新策略
四种命中查找：
- 新前与新后
- 新后与旧后
- 新后与旧前(此种发生了，涉及移动节点，那么新前指向的节点，移动到旧后之后)
- 新前与旧后(此种发生了，涉及移动节点，那么新前指向的节点，移动到旧前之前)
命中一种就不再进行命中判断了，如果没有命中，就需要用循环来寻找了。移动到oldStartIdx之前
新增情况
5.png
6.png
删除情况
7.png
多删除情况
8.png
复杂情况
9.png
10.png
手写源码
- 上面的webpack配置
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按我改变DOM</button>
<div id="container"></div>
<script src="/xuni/bundle.js"></script>
</body>
</html>
- index.js:入口，调用入口
import h from './mysnabbdom/h.js';
import patch from './mysnabbdom/patch.js';
const myVnode1 = h('ul', {}, [
h('li', { key: 'A' }, 'A'),
h('li', { key: 'B' }, 'B'),
h('li', { key: 'C' }, 'C'),
h('li', { key: 'D' }, 'D'),
h('li', { key: 'E' }, 'E')
]);
// const myVnode1=h('div',{},[
// h('p',{},'哈哈'),
// h('p',{},[
// h('span',{},'A'),
// h('span',{},'B')
// ]),
// ])
// console.log(myVnode1);
// 得到盒子和按钮
const container = document.getElementById('container');
const btn = document.getElementById('btn');
// 第一次上树
patch(container, myVnode1);
// 新节点
const myVnode2 = h('ul', {}, [
h('li', { key: 'Q' }, 'Q'),
h('li', { key: 'T' }, 'T'),
h('li', { key: 'A' }, 'A'),
h('li', { key: 'B' }, 'B'),
h('li', { key: 'Z' }, 'Z'),
h('li', { key: 'C' }, 'C'),
h('li', { key: 'D' }, 'D'),
h('li', { key: 'E' }, 'E')
]);
btn.onclick = function () {
patch(myVnode1, myVnode2);
}
- vnode.js
// 函数的功能非常简单，就是把传入的5个参数组合成对象返回
export default function(sel, data, children, text, elm) {
const key = data.key;
return {
sel, data, children, text, elm, key
};
}
- h.js：创建虚拟节点
import vnode from './vnode.js';
// 编写一个低配版本的h函数，这个函数必须接受3个参数，缺一不可
// 相当于它的重载功能较弱。
// 也就是说，调用的时候形态必须是下面的三种之一：
// 形态① h('div', {}, '文字')
// 形态② h('div', {}, [])
// 形态③ h('div', {}, h())
export default function (sel, data, c) {
// 检查参数的个数
if (arguments.length != 3)
throw new Error('对不起，h函数必须传入3个参数，我们是低配版h函数');
// 检查参数c的类型
if (typeof c == 'string' || typeof c == 'number') {
// 说明现在调用h函数是形态①
return vnode(sel, data, undefined, c, undefined);
} else if (Array.isArray(c)) {
// 说明现在调用h函数是形态②
let children = [];
// 遍历c，收集children
for (let i = 0; i < c.length; i++) {
// 检查c[i]必须是一个对象，如果不满足
if (!(typeof c[i] == 'object' && c[i].hasOwnProperty('sel')))
throw new Error('传入的数组参数中有项不是h函数');
//注意此处是重点，其实相当于形成了递归调用c[i]就是h
// 这里不用执行c[i]，因为你的测试语句中已经有了执行,c[i]其实就是h(...)
// 此时只需要收集好就可以了
children.push(c[i]);
}
// 循环结束了，就说明children收集完毕了，此时可以返回虚拟节点了，它有children属性的
return vnode(sel, data, children, undefined, undefined);
} else if (typeof c == 'object' && c.hasOwnProperty('sel')) {
// 说明现在调用h函数是形态③
// 即，传入的c是唯一的children。不用执行c，因为测试语句中已经执行了c。
let children = [c];
return vnode(sel, data, children, undefined, undefined);
} else {
throw new Error('传入的第三个参数类型不对');
}
};
- patch.js:根据新老虚拟dom（或者真实dom），然后产生真实dom
import vnode from './vnode.js';
import createElement from './createElement.js';
import patchVnode from './patchVnode.js'
export default function patch(oldVnode, newVnode) {
// 判断传入的第一个参数，是DOM节点还是虚拟节点？
if (oldVnode.sel == '' || oldVnode.sel == undefined) {
// 传入的第一个参数是DOM节点，此时要包装为虚拟节点
oldVnode = vnode(oldVnode.tagName.toLowerCase(), {}, [], undefined, oldVnode);
}
// 判断oldVnode和newVnode是不是同一个节点
if (oldVnode.key == newVnode.key && oldVnode.sel == newVnode.sel) {
console.log('是同一个节点');
patchVnode(oldVnode, newVnode);
} else {
console.log('不是同一个节点，暴力插入新的，删除旧的');
let newVnodeElm = createElement(newVnode);
// 插入到老节点之前
if (oldVnode.elm.parentNode && newVnodeElm) {
oldVnode.elm.parentNode.insertBefore(newVnodeElm, oldVnode.elm);
}
// 删除老节点
oldVnode.elm.parentNode.removeChild(oldVnode.elm);
}
};
- patchVnode.js
import createElement from "./createElement";
import updateChildren from './updateChildren.js';
// 对比同一个虚拟节点
export default function patchVnode(oldVnode, newVnode) {
// 判断新旧vnode是否是同一个对象
if (oldVnode === newVnode) return;
// 判断新vnode有没有text属性
if (newVnode.text != undefined && (newVnode.children == undefined || newVnode.children.length == 0)) {
// 新vnode有text属性
console.log('新vnode有text属性');
if (newVnode.text != oldVnode.text) {
// 如果新虚拟节点中的text和老的虚拟节点的text不同，那么直接让新的text写入老的elm中即可。如果老的elm中是children，那么也会立即消失掉。
oldVnode.elm.innerText = newVnode.text;
}
} else {
// 新vnode没有text属性，有children
console.log('新vnode没有text属性');
// 判断老的有没有children
if (oldVnode.children != undefined && oldVnode.children.length > 0) {
// 老的有children，新的也有children，此时就是最复杂的情况。
updateChildren(oldVnode.elm, oldVnode.children, newVnode.children);
} else {
// 老的没有children，新的有children
// 清空老的节点的内容
oldVnode.elm.innerHTML = '';
// 遍历新的vnode的子节点，创建DOM，上树
for (let i = 0; i < newVnode.children.length; i++) {
let dom = createElement(newVnode.children[i]);
oldVnode.elm.appendChild(dom);
}
}
}
}
- createElement.js:创建element节点
// 真正创建节点。将vnode创建为DOM，是孤儿节点，不进行插入
export default function createElement(vnode) {
// console.log('目的是把虚拟节点', vnode, '真正变为DOM');
// 创建一个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) {
// 它内部是子节点，就要递归创建节点
for (let i = 0; i < vnode.children.length; i++) {
// 得到当前这个children
let ch = vnode.children[i];
// 创建出它的DOM，一旦调用createElement意味着：创建出DOM了，并且它的elm属性指向了创建出的DOM，但是还没有上树，是一个孤儿节点。
let chDOM = createElement(ch);
// 上树
domNode.appendChild(chDOM);
}
}
// 补充elm属性
vnode.elm = domNode;
// 返回elm，elm属性是一个纯DOM对象
return vnode.elm;
};
- 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 updateChildren(parentElm, oldCh, newCh) {
console.log('我是updateChildren');
console.log(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) {
console.log('★');
// 首先不是判断①②③④命中，而是要略过已经加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 = newCh[--newEndIdx];
} else if (checkSameVnode(oldStartVnode, newStartVnode)) {
// 新前和旧前
console.log('①新前和旧前命中');
patchVnode(oldStartVnode, newStartVnode);
oldStartVnode = oldCh[++oldStartIdx];
newStartVnode = newCh[++newStartIdx];
} else if (checkSameVnode(oldEndVnode, newEndVnode)) {
// 新后和旧后
console.log('②新后和旧后命中');
patchVnode(oldEndVnode, newEndVnode);
oldEndVnode = oldCh[--oldEndIdx];
newEndVnode = newCh[--newEndIdx];
} else if (checkSameVnode(oldStartVnode, newEndVnode)) {
// 新后和旧前
console.log('③新后和旧前命中');
patchVnode(oldStartVnode, newEndVnode);
// 当③新后与旧前命中的时候，此时要移动节点。移动新前指向的这个节点到老节点的旧后的后面
// 如何移动节点？？只要你插入一个已经在DOM树上的节点，它就会被移动
parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling);
oldStartVnode = oldCh[++oldStartIdx];
newEndVnode = newCh[--newEndIdx];
} else if (checkSameVnode(oldEndVnode, newStartVnode)) {
// 新前和旧后
console.log('④新前和旧后命中');
patchVnode(oldEndVnode, newStartVnode);
// 当④新前和旧后命中的时候，此时要移动节点。移动新前指向的这个节点到老节点的旧前的前面
parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm);
// 如何移动节点？？只要你插入一个已经在DOM树上的节点，它就会被移动
oldEndVnode = oldCh[--oldEndIdx];
newStartVnode = newCh[++newStartIdx];
} else {
// 四种命中都没有命中
// 制作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(keyMap);
// 寻找当前这项（newStartIdx）这项在keyMap中的映射的位置序号
const idxInOld = keyMap[newStartVnode.key];
console.log(idxInOld);
if (idxInOld == undefined) {
// 判断，如果idxInOld是undefined表示它是全新的项
// 被加入的项（就是newStartVnode这项)现不是真正的DOM节点
parentElm.insertBefore(createElement(newStartVnode), oldStartVnode.elm);
} else {
// 如果不是undefined，不是全新的项，而是要移动
const elmToMove = oldCh[idxInOld];
patchVnode(elmToMove, newStartVnode);
// 把这项设置为undefined，表示我已经处理完这项了
oldCh[idxInOld] = undefined;
// 移动，调用insertBefore也可以实现移动。
parentElm.insertBefore(elmToMove.elm, oldStartVnode.elm);
}
// 指针下移，只移动新的头
newStartVnode = newCh[++newStartIdx];
}
}
// 继续看看有没有剩余的。循环结束了start还是比old小
if (newStartIdx <= newEndIdx) {
console.log('new还有剩余节点没有处理，要加项。要把所有剩余的节点，都要插入到oldStartIdx之前');
// 遍历新的newCh，添加到老的没有处理的之前
for (let i = newStartIdx; i <= newEndIdx; i++) {
// insertBefore方法可以自动识别null，如果是null就会自动排到队尾去。和appendChild是一致了。
// newCh[i]现在还没有真正的DOM，所以要调用createElement()函数变为DOM
parentElm.insertBefore(createElement(newCh[i]), oldCh[oldStartIdx].elm);
}
} else if (oldStartIdx <= oldEndIdx) {
console.log('old还有剩余节点没有处理，要删除项');
// 批量删除oldStart和oldEnd指针之间的项
for (let i = oldStartIdx; i <= oldEndIdx; i++) {
if (oldCh[i]) {
parentElm.removeChild(oldCh[i].elm);
}
}
}
};
