虛擬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算法我寫不出來。。。留下沒有技術的淚水。好了下班了溜了