根據node節點生成VNode以及解析成node節點

• 根據node節點來生成一個VNode（vue中是是用字符串模版進行ast抽象樹在進行VNode生成）

    /** 虛擬 DOM 構造函數 */
class VNode {
    constructor(tag, data, value, type) {
        this.tag = tag && tag.toLowerCase();
        this.data = data;
        this.value = value;
        this.type = type;
        this.children = [];
    }

    appendChild(vnode) {
        this.children.push(vnode);
    }
}
/**根據node生成一個虛擬DOM樹 */
function getVNode(node) {
    let _vnode = null;
    let nodeType = node.nodeType;
    if (nodeType === 3) {
        _vnode = new VNode(undefined, undefined, node.nodeValue, nodeType);
    } else if (nodeType === 1) {
        // 元素
        let nodeName = node.nodeName;
        let attrs = node.attributes; // attrs[ i ] 屬性節點 ( nodeType == 2 )
        let attr_obj = {};
        for (let i = 0; i < attrs.length; i++) {
            attr_obj[attrs[i].nodeName] = attrs[i].nodeValue;
        }
        _vnode = new VNode(nodeName, attr_obj, undefined, nodeType);
        // 考慮 node 的子元素
        let childNodes = node.childNodes;
        for (let i = 0; i < childNodes.length; i++) {
            _vnode.appendChild(getVNode(childNodes[i])); // 遞歸
        }
    }
    return _vnode;
}

• 根據VNode進行生成node

    /**將vnode轉成node */
function parseNode(vnode) {
    let type = vnode.type;
    let _node = null;
    if (type === 3) {
        return document.createTextNode(vnode.value);
    } else if (type === 1) {
        _node = document.createElement(vnode.tag);
        let attrs = vnode.data;
        Object.keys(attrs).forEach(key => {
            _node.setAttribute(key, attrs[key]);
        });

        let childrenVNode = vnode.children
        if (childrenVNode) {
            childrenVNode.forEach(sub => {
                _node.appendChild(parseNode(sub));
            });
        }
        return _node;
    }
}