[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.replies",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"replies",[35],"user",{"_20":21,"_13":14,"_22":23,"_24":25,"_26":27,"_28":29,"_30":31,"_32":16,"_33":34},"loginname","lovebc138","page",1,"limit",50,"total","id","44865","avatar_url","http://www.gravatar.com/avatar/b2dd190bd99ff97e056a1fd2a7265737?size=48","githubUsername","","create_at","2024-09-24 09:42:57.727","score",5,"topic_count",0,"reply_count","is_star",false,{"_20":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":34,"_48":34,"_32":16,"_49":50,"_26":51,"_52":53},"48586","author_id","38519","tab","share","content","关注[前端小讴](https://github.com/simon9124/my_demos/blob/master/README.md)，阅读更多原创技术文章\r\n\r\n- `Virtual DOM`是当今主流框架普遍采用的**提高 web 页面性能**的方案，其原理是：\r\n - 1.把真实的 DOM 树转换成 js 对象（虚拟 DOM）\r\n - 2.数据更新时生成新的 js 对象（新的虚拟 DOM）\r\n - 3.二者比对后**仅对发生变化的数据进行更新**\r\n\r\n[完整代码参考 →](https://github.com/simon9124/my_demos/tree/master/javascript/virtualDomVue2)\r\n\r\n## js 对象模拟 DOM 树\r\n\r\n- 假设有如下 html 结构（见`index.html`）\r\n\r\n```html\r\n

\r\n

Virtual DOM

\r\n

Item 1
Item 2
Item 3

\r\n

Hello World

\r\n

\r\n```\r\n\r\n- 用 js 对象表示该结构，标签作为`tagName`属性，`id、class`等作为`props`属性，标签内再嵌套的标签或文本均作为`children`\r\n\r\n```js\r\nconst elNode = {\r\n tagName: \"div\",\r\n props: { id: \"virtual-dom\" },\r\n children: [\r\n { tagName: \"p\", children: [\"Virtual DOM\"] }, // 没有props\r\n {\r\n tagName: \"ul\",\r\n props: { id: \"list\" },\r\n children: [\r\n {\r\n tagName: \"li\",\r\n props: { class: \"item\" },\r\n children: [\"Item 1\"],\r\n },\r\n {\r\n tagName: \"li\",\r\n props: { class: \"item\" },\r\n children: [\"Item 2\"],\r\n },\r\n {\r\n tagName: \"li\",\r\n props: { class: \"item\" },\r\n children: [\"Item 3\"],\r\n },\r\n ],\r\n },\r\n { tagName: \"div\", props: {}, children: [\"Hello World\"] },\r\n ],\r\n};\r\n```\r\n\r\n- 创建`VNode`类，用以将以上 js 结构转换成 VNode 节点对象（见`vnode.js`），并创建调用`Vnode`的方法`createElement`（见`create-element.js`）\r\n\r\n```js\r\nexport default class VNode {\r\n constructor(tagName, props, children) {\r\n if (props instanceof Array) {\r\n // 第二个参数是数组，说明传的是children，即没有传props\r\n children = props; // 把props赋给原本应是子节点的第三个参数\r\n props = {}; // props被赋值为空对象\r\n }\r\n this.tagName = tagName;\r\n this.props = props;\r\n this.children = children;\r\n }\r\n // render 将virdual-dom 对象渲染为实际 DOM 元素\r\n render() {\r\n // console.log(this.tagName, this.props, this.children);\r\n let el = document.createElement(this.tagName);\r\n let props = this.props;\r\n // 设置节点的DOM属性\r\n for (let propName in props) {\r\n let propValue = props[propName];\r\n el.setAttribute(propName, propValue);\r\n }\r\n // 保存子节点\r\n let children = this.children || [];\r\n children.forEach((child) => {\r\n let childEl =\r\n child instanceof VNode\r\n ? child.render() // 如果子节点也是虚拟DOM，递归构建DOM节点\r\n : document.createTextNode(child); // 如果字符串，只构建文本节点\r\n el.appendChild(childEl); // 子节点dom\r\n });\r\n return el;\r\n }\r\n}\r\n```\r\n\r\n```js\r\nexport function createElement(tagName, props, children) {\r\n return new VNode(tagName, props, children);\r\n}\r\n```\r\n\r\n- 注掉页面原本的`html`结构并调用`createElement`方法（见`index.html`），可渲染同样的内容\r\n\r\n```html\r\n\r\n\r\n\r\n```\r\n\r\n## 比较两颗虚拟 DOM 树\r\n\r\n- 假设上文渲染的内容，想要变成如下 html 结构\r\n\r\n```html\r\n

\r\n

New Virtual DOM

\r\n

Item 1
Item 2
Item 3
Item 4

\r\n

Hello World

\r\n

\r\n```\r\n\r\n- 仍旧是先用虚拟 dom 表示该结构（见`index.html`）\r\n\r\n```js\r\nlet elNodeNew = createElement(\"div\", { id: \"virtual-dom2\" }, [\r\n createElement(\"p\", { color: \"red\" }, [\"New Virtual DOM\"]),\r\n createElement(\"ul\", { id: \"list\" }, [\r\n createElement(\"li\", { class: \"item\", style: \"height: 30px\" }, [\"Item 1\"]),\r\n createElement(\"li\", { class: \"item\" }, [\"Item 2\"]),\r\n createElement(\"li\", { class: \"item\" }, [\"Item 3\"]),\r\n createElement(\"li\", { class: \"item\" }, [\"Item 4\"]),\r\n ]),\r\n createElement(\"div\", {}, [\"Hello World\"]),\r\n]);\r\n```\r\n\r\n- `VNode`类追加`count`和`key`，`key`用作遍历时的唯一标识，`count`用作后续比对（见`vnode.js`）\r\n\r\n```js\r\nexport default class VNode {\r\n constructor(tagName, props, children) {\r\n if (props instanceof Array) {\r\n // 第二个参数是数组，说明传的是children，即没有传props\r\n children = props; // 把props赋给原本应是子节点的第三个参数\r\n props = {}; // props被赋值为空对象\r\n }\r\n this.tagName = tagName;\r\n this.props = props;\r\n this.children = children;\r\n\r\n // 保存key键：如果有属性则保存key，否则返回undefined\r\n this.key = props ? props.key : void 0;\r\n\r\n let count = 0;\r\n this.children.forEach((child, i) => {\r\n // 如果是元素的实列的话\r\n if (child instanceof VNode) {\r\n count += child.count;\r\n } else {\r\n // 如果是文本节点的话，直接赋值\r\n children[i] = \"\" + child;\r\n }\r\n count++; // 每遍历children后，count都会+1\r\n });\r\n this.count = count;\r\n }\r\n render() {\r\n // ...\r\n }\r\n}\r\n\r\n/* elNode为例，追加后查看打印：\r\n VNode {\r\n tagName: 'div',\r\n props: { id: 'virtual-dom' },\r\n children: [\r\n VNode { tagName: 'p', props: {}, children: ['Virtual DOM'], count: 1, key: undefined },\r\n VNode {\r\n tagName: 'ul',\r\n props: { id: 'list' },\r\n children: [\r\n VNode { tagName: 'li', props: { class: 'item' }, children: ['Item 1'], count: 1, key: undefined },\r\n VNode { tagName: 'li', props: { class: 'item' }, children: ['Item 2'], count: 1, key: undefined },\r\n VNode { tagName: 'li', props: { class: 'item' }, children: ['Item 3'], count: 1, key: undefined },\r\n ],\r\n count: 6,\r\n key: undefined\r\n },\r\n VNode { tagName: 'div', props: {}, children: ['Hello World'], count: 1, key: undefined }\r\n ],\r\n count: 11,\r\n key: undefined\r\n }\r\n*/\r\n```\r\n\r\n### 比对`elNode`和`elNodeNew`\r\n\r\n- 调用`diff()`方法（见`diff.js`）\r\n\r\n```js\r\nexport function diff(oldTree, newTree) {\r\n let index = 0; // 当前节点的标志\r\n let patches = {}; // 用来记录每个节点差异的对象\r\n deepWalk(oldTree, newTree, index, patches);\r\n return patches;\r\n}\r\n```\r\n\r\n- 核心方法`deepWalk()`，对两棵树进行深度优先遍历（见`diff.js`）：\r\n\r\n - 如果节点被删除，则无需操作\r\n - 如果替换文本（肯定无 children），则记录**更新文字**\r\n - 如果标签相同\r\n - 如果属性不同，则记录**更新属性**\r\n - 比较子节点（如果新节点有`ignore`属性，则不需要比较），调用`diffChildren()`方法，**比较子元素的变化**\r\n - 如果标签不同，则记录**整体重置**\r\n\r\n - 前置 1：在`patch.js`中设置不同的操作类型（`patch.js`）\r\n\r\n ```js\r\n let REPLACE = 0; // 整体重置\r\n let REORDER = 1; // 重新排序\r\n let PROPS = 2; // 更新属性\r\n let TEXT = 3; // 更新文字\r\n\r\n patch.REPLACE = REPLACE;\r\n patch.REORDER = REORDER;\r\n patch.PROPS = PROPS;\r\n patch.TEXT = TEXT;\r\n ```\r\n\r\n - 前置 2：判断新节点是否有`ignore`属性的方法`isIgnoreChildren()`\r\n\r\n ```js\r\n function isIgnoreChildren(node) {\r\n return node.props && node.props.hasOwnProperty(\"ignore\");\r\n }\r\n ```\r\n\r\n```js\r\nimport { patch } from \"./patch.js\";\r\n\r\nfunction deepWalk(oldNode, newNode, index, patches) {\r\n // console.log(oldNode, newNode);\r\n let currentPatch = [];\r\n if (newNode === null) {\r\n // 节点被删除掉（真正的DOM节点时，将删除执行重新排序，所以不需要做任何事）\r\n } else if (typeof oldNode === \"string\" && typeof newNode === \"string\") {\r\n // 替换文本节点\r\n if (newNode !== oldNode) {\r\n currentPatch.push({ type: patch.TEXT, content: newNode }); // type为3，content为新节点文本内容\r\n }\r\n } else if (\r\n oldNode.tagName === newNode.tagName &&\r\n oldNode.key === newNode.key\r\n ) {\r\n // 相同的节点，但是新旧节点的属性不同的情况下比较属性\r\n let propsPatches = diffProps(oldNode, newNode);\r\n if (propsPatches) {\r\n currentPatch.push({ type: patch.PROPS, props: propsPatches }); // type为2\r\n }\r\n // console.log(currentPatch);\r\n // 比较子节点，如果新节点有'ignore'属性，则不需要比较\r\n if (!isIgnoreChildren(newNode)) {\r\n diffChildren(\r\n oldNode.children,\r\n newNode.children,\r\n index,\r\n patches,\r\n currentPatch\r\n );\r\n }\r\n } else {\r\n // 不同的节点，那么新节点替换旧节点\r\n currentPatch.push({ type: patch.REPLACE, node: newNode }); // type为0\r\n }\r\n // console.log(currentPatch);\r\n if (currentPatch.length) {\r\n patches[index] = currentPatch; // 把对应的currentPatch存储到patches对象内中的对应项\r\n }\r\n // console.log(patches);\r\n}\r\n```\r\n\r\n- `deepWalk()`对两颗树进行比对后，如果节点的标签相同，则还需调用`diffChildren()`比较子节点（见`diff.js`）\r\n - 新旧节点，采用`list-diff`算法（见`listDiff.js`），根据`key`做比对，返回如`{ moves: moves, children: children }`的数据结构（有关`list-diff`算法可参见\r\n [这篇详解 →](https://github.com/simon9124/my_demos/blob/master/javascript/%E8%AF%A6%E8%A7%A3virtual-dom%E4%B8%AD%E7%9A%84list-diff%E7%AE%97%E6%B3%95.md)，本文不多做赘述）\r\n - `moves`为需要操作的步骤，遍历后记录为**重新排序**\r\n - **递归，子节点继续调用`deepWalk()`方法**\r\n\r\n```js\r\nfunction diffChildren(oldChildren, newChildren, index, patches, currentPatch) {\r\n // console.log(oldChildren, newChildren, index);\r\n let diffs = listDiff(oldChildren, newChildren, \"key\"); // 新旧节点按照字符串'key'来比较\r\n console.log(diffs);\r\n newChildren = diffs.children; // diffs.children同listDiff方法中的simulateList，即要操作的相似列表\r\n if (diffs.moves.length) {\r\n let recorderPatch = { type: patch.REORDER, moves: diffs.moves };\r\n currentPatch.push(recorderPatch);\r\n }\r\n let leftNode = null;\r\n let currentNodeIndex = index;\r\n oldChildren.forEach((child, i) => {\r\n let newChild = newChildren[i];\r\n currentNodeIndex =\r\n leftNode && leftNode.count\r\n ? currentNodeIndex + leftNode.count + 1 // 非首次遍历时，leftNode为上一次遍历的子节点\r\n : currentNodeIndex + 1; // 首次遍历时，leftNode为null，currentNodeIndex被赋值为1\r\n deepWalk(child, newChild, currentNodeIndex, patches); // 递归遍历，直至最内层\r\n leftNode = child;\r\n });\r\n}\r\n```\r\n\r\n- 在页面中调用`diff()`方法，比对`elNode`和`elNodeNew`（见`index.html`），返回值即为从`elNode`变化到`elNodeNew`需要进行的完整操作\r\n\r\n```html\r\n\r\n```\r\n\r\n## 对发生变化的数据进行更新\r\n\r\n- `patch()`方法，对`elRoot`（变化前的）和`patches`（调用`diff()`返回值）进行操作（见`patch.js`）\r\n\r\n```js\r\nexport function patch(node, patches) {\r\n let walker = { index: 0 }; // 从key为0开始遍历patches\r\n deepWalk(node, walker, patches); // 调用patch.js里的deepWalk方法，不是diff.js里的\r\n}\r\n```\r\n\r\n- 调用`deepWalk()`方法，对`elRoot`的全部子节点进行遍历和递归（见`patch.js`）\r\n - `walker.index`初始为 0，每次遍历加 1\r\n - 如果在`patches`中有对应`walker.index`属性的项，则调用`applyPatches()`针对当前节点进行相应操作\r\n - **重点**：`diff.js`的`index`和`patch.js`的`walker.index`，都是针对`elNode`的每个节点逐一遍历直至最内层，因此回文`patches`里的`key`与`walker.index`相对应，对当前遍历到的`node`执行`applyPatches()`即可\r\n\r\n```js\r\nfunction deepWalk(node, walker, patches) {\r\n // console.log(node, walker, patches);\r\n let currentPatches = patches[walker.index];\r\n let len = node.childNodes ? node.childNodes.length : 0; // node.childNodes返回包含指定节点的子节点的集合，包括HTML节点、所有属性、文本节点\r\n // console.log(node.childNodes, len);\r\n for (let i = 0; i < len; i++) {\r\n let child = node.childNodes[i];\r\n walker.index++;\r\n deepWalk(child, walker, patches); // 递归遍历，直至最内层（node.childNodes.length为0）\r\n }\r\n // console.log(currentPatches);\r\n if (currentPatches) {\r\n applyPatches(node, currentPatches); // 在patches中有对应的操作，则执行\r\n }\r\n}\r\n```\r\n\r\n- `applyPatches()`方法会根据传入的`type`类型，对节点进行相应操作（见`patch.js`）\r\n\r\n```js\r\nfunction applyPatches(node, currentPatches) {\r\n // console.log(node, currentPatches);\r\n currentPatches.forEach((currentPatch) => {\r\n switch (currentPatch.type) {\r\n case REPLACE: // 整体重置\r\n let newNode =\r\n typeof currentPatch.node === \"string\"\r\n ? document.createTextNode(currentPatch.node) // 字符串节点\r\n : currentPatch.node.render(); // dom节点\r\n node.parentNode.replaceChild(newNode, node); // 替换子节点\r\n break;\r\n case REORDER: // 重新排序\r\n reorderChildren(node, currentPatch.moves);\r\n break;\r\n case PROPS: // 更新属性\r\n setProps(node, currentPatch.props);\r\n break;\r\n case TEXT: // 更新文字\r\n if (node.textContent) {\r\n node.textContent = currentPatch.content;\r\n } else {\r\n // ie bug\r\n node.nodeValue = currentPatch.content;\r\n }\r\n break;\r\n default:\r\n throw new Error(\"Unknow patch type\" + currentPatch.type);\r\n }\r\n });\r\n}\r\n```\r\n\r\n- `reorderChildren()`方法对子节点进行排序（见`patch.js`）\r\n\r\n```js\r\nfunction reorderChildren(node, moves) {\r\n // console.log(node, moves);\r\n let staticNodeList = Array.from(node.childNodes);\r\n // console.log(staticNodeList);\r\n let maps = {};\r\n staticNodeList.forEach((node) => {\r\n // 如果是元素节点\r\n if (node.nodeType === 1) {\r\n let key = node.getAttribute(\"key\");\r\n if (key) {\r\n maps[key] = node;\r\n }\r\n }\r\n });\r\n moves.forEach((move) => {\r\n let index = move.index;\r\n if (move.type === 0) {\r\n // 移除项\r\n if (staticNodeList[index] === node.childNodes[index]) {\r\n node.removeChild(node.childNodes[index]); // 移除该子节点\r\n }\r\n staticNodeList.splice(index, 1); // 从staticNodeList数组中移除\r\n } else if (move.type === 1) {\r\n // 插入项\r\n let insertNode = maps[move.item.key]\r\n ? maps[move.item.key].cloneNode(true)\r\n : typeof move.item === \"object\" // 插入节点对象\r\n ? move.item.render() // 直接渲染\r\n : document.createTextNode(move.item); // 插入文本\r\n // console.log(insertNode);\r\n staticNodeList.splice(index, 0, insertNode); // 插入\r\n node.insertBefore(insertNode, node.childNodes[index] || null);\r\n }\r\n });\r\n}\r\n```\r\n\r\n- `setProps()`方法设置属性（见`patch.js`）\r\n\r\n```js\r\nfunction setProps(node, props) {\r\n // console.log(node, props);\r\n for (let key in props) {\r\n if (props[key] === void 0) {\r\n node.removeAttribute(key); // 没有属性->移除属性\r\n } else {\r\n let value = props[key];\r\n utils.setAttr(node, key, value); // 有属性->重新赋值\r\n }\r\n }\r\n}\r\n```\r\n\r\n- 给属性重新赋值时，需区分属性为`style`和`value`两种情况，属性为`value`时还需判断标签是否为文本框或文本域（见`utils.js`）\r\n- `utils.js`为提供公用方法库，为方便阅读简化代码，本文解析时未使用源码中的其他方法，不影响效果\r\n\r\n```js\r\nlet obj = {\r\n setAttr: function (node, key, value) {\r\n switch (key) {\r\n case \"style\":\r\n node.style.cssText = value; // 更新样式\r\n break;\r\n case \"value\":\r\n let tagName = node.tagName || \"\";\r\n tagName = tagName.toLowerCase();\r\n if (tagName === \"input\" || tagName === \"textarea\") {\r\n // 输入框或文本域\r\n node.value = value; // 更新绑定值\r\n } else {\r\n // 其余\r\n node.setAttribute(key, value); // 更新属性\r\n }\r\n break;\r\n default:\r\n node.setAttribute(key, value); // 更新属性\r\n break;\r\n }\r\n },\r\n};\r\n\r\nexport { obj as utils };\r\n```\r\n\r\n## 效果实现\r\n\r\n- 在页面中将`elRoot`和`patches`传给`patch()`并调用即可（见`index.html`）\r\n\r\n```html\r\n\r\n```\r\n\r\n### 核心 dom 方法\r\n\r\n- 虚拟 dom 只是节省了节点更新次数，但万变不离其宗，最终还是要更新真实 dom 的，大体涉及到的方法如下\r\n\r\n```js\r\ndocument.createTextNode(txt); // 创建文本节点\r\nnode.setAttribute(key, value); // 设置节点属性\r\nnode.removeAttribute(key); // 移除节点属性\r\nparentNode.replaceChild(newNode, node); // 替换子节点\r\nparentNode.removeChild(node); // 移除子节点\r\nparentNode.insertBefore(node, existNode); // 追加子节点\r\n```","title","手写一个Virtual DOM及源码解析","last_reply_at","2024-09-24 09:53:38.697","good","top","visit_count",4528,"2024-04-16 03:02:22.12","author",{"_13":54,"_22":55},"simon9124","https://avatars.githubusercontent.com/u/32998077?v=4"]