虚拟Dom
前言
虚拟Dom想必大家并不陌生，这是我学习虚拟Dom的一篇笔记，作为一个记录。
<div id="app"> <div>test</div> <div> <span>123</span> </div> </div>复制代码
这是我们常规的Dom结构，那么想要表示这个Dom结构，用虚拟Dom应该怎么表示呢？
VirtualElement
我们知道Dom节点打印出来是一个对象，所以我们可以用JavaScript中的对象来描述Dom节点。来一个“虚拟节点”的构造函数。
function VirtualElement(tagName, props, children) { this.tagName = tagName this.props = props || {} this.children = children || [] }复制代码
这里只考虑了最简单的情况，就是节点的标签、属性和它子节点。那么我们就可以这样来描述上述的Dom结构。
let vdom = new VirtualElement("div", { id: "app" }, [ new VirtualElement("div", {}, ["test"]), new VirtualElement("div", {}, [new VirtualElement("span", {}, ["123"]) ]);复制代码
在控制台中打印如下
Render
接下来就把他渲染成真正的Dom，我们在他的原型上定义一个方法。
VirtualElement.prototype.render = function () {}复制代码
接着拿到属性
const tagName = this.tagName;
const props = this.props || {};
const children = this.children || [];复制代码 然后用document.createElement()生成一个真实的Dom节点
let tag = document.createElement(tagName)复制代码
处理属性
let propKeys = Object.keys(props) if (propKeys.length > 0) { propKeys.forEach(item => { tag.setAttribute(item, props[item]) }) }复制代码
递归处理子节点
if (children.length > 0) { children.forEach(item => { let childTag if (item instanceof VirtualElement) { childTag = item.render() } else { childTag = document.createTextNode(item) } tag.appendChild(childTag) }) } return tag复制代码
来试一下挂载
``` <div id="container"></div>``` <script> let container = document.getElementById("container"); let vdom = new VirtualElement("div", { id: "app" }, [ new VirtualElement("div", {}, ["test"]), new VirtualElement("div", {}, [new VirtualElement("span",{}, ["123"]) ]) ]); setTimeout(()=>{ container.appendChild(vdom.render()) },2000) </script>复制代码
diff算法我写不出来。。。留下没有技术的泪水。好了下班了溜了
查看32道真题和解析
拼多多集团-PDD公司氛围 512人发布
