虚拟Dom虚拟Dom想必大家并不陌生，这是我学习虚拟Dom的一篇笔记，作为一个记录。我们知道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算法我写不出来。。。留下没有技术的泪水。好了下班了溜了