normalize函数_关于实现一个函数把真实dom转换成虚拟dom原来是这么一回事

实现这个函数之前&＃xff0c;首先要对js的一些官方api要有明确概念。

• document.querySelector()

• HTMLElement

• HTML DOM nodeType 属性

HTML DOM 节点

在 HTML DOM (文档对象模型)中&＃xff0c;每个部分都是节点&＃xff1a;

• 文档本身是文档节点
• 所有 HTML 元素是元素节点
• 所有 HTML 属性是属性节点
• HTML 元素内的文本是文本节点
• 注释是注释节点

Element 对象

在 HTML DOM 中&＃xff0c;Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表&＃xff0c;比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点(参见下一节)。

下面的属性和方法可用于所有 HTML 元素上&＃xff1a;

文档、元素、属性以及 HTML 或 XML 文档的其他方面拥有不同的节点类型。

存在 12 种不同的节点类型&＃xff0c;其中可能会有不同节点类型的子节点&＃xff1a;

节点类型 - 返回值

对于每种节点类型&＃xff0c;nodeName 和 nodeValue 属性的返回值&＃xff1a;

语法

document.querySelector(CSS selectors)

参数值

思路

首先要明确&＃xff0c;虚拟dom树上的一个节点VNode&＃xff0c;需要哪些必要的数据。

• 标签名
• 元素类型
• 元素属性值(id、class、name等&＃xff0c;字典形式)
• 子节点(数组形式)
• 文本

所以&＃xff0c;我们的一个VNode节点&＃xff0c;可以设置成一个这样的数据结构&＃xff0c;这里用es6的class语法来实现。

class VNode {
    constructor(tag, attrs, value, type) {
        this.tag &＃61; tag && tag.toLowerCase(); // 标签名
        this.attrs &＃61; attrs;  // 属性值
        this.value &＃61; value; // 文本
        this.type &＃61; type;  // 元素类型
        this.children &＃61; []  // 子节点
    }

    // 追加子节点
    appendChild(vnode) {
        this.children.push(vnode)
    }

}



然后&＃xff0c;上文中的node type告诉我们&＃xff1a;

文档、元素、属性以及 HTML 或 XML 文档的其他方面拥有不同的节点类型。

存在 12 种不同的节点类型&＃xff0c;其中可能会有不同节点类型的子节点

所以判断一个node是文本节点还是元素结点时&＃xff0c;可以用node.nodeType &＃61;&＃61; 1和node.nodeType &＃61;&＃61; 3

那么接下来就很简单了&＃xff0c;无非就是遍历一棵n叉树&＃xff0c;使用递归就很容易实现&＃xff0c;只是在递归的时候&＃xff0c;加入node.nodeType &＃61;&＃61; 1和node.nodeType &＃61;&＃61; 3这两个判断&＃xff0c;然后遇到文本情况跳出递归栈就可以了。

再细化到每个节点的拷贝&＃xff0c;就是针对上面提到的几个必要属性&＃xff0c;值得注意的是&＃xff0c;属性也是一个节点。从官方api中拿数据填到vnode节点中&＃xff0c;这个就是一个简单的属性深拷贝&＃xff0c;这里就不再赘述了&＃xff0c;直接上代码。

function getVNode(node) {
    let nodeType &＃61; node.nodeType;
    let _vnode &＃61; null;

    // 对节点进行判断
    if (nodeType &＃61;&＃61;&＃61; 1) {
        // 元素节点
        let nodeName &＃61; node.nodeName;

        // 属性&＃xff0c;返回属性组成的数组&＃xff0c;我们就是把这个伪数组转换为对象
        let attrs &＃61; node.attributes

        let _attrObj &＃61; {};

        // 循环attrs
        for (let i &＃61; 0; i             // attrs[i]是一个属性节点&＃xff0c;我们要的是nodeName这个属性
            _attrObj[attrs[i].nodeName] &＃61; attrs[i].nodeValue
        }

        _vnode &＃61; new VNode(nodeName, _attrObj, undefined, nodeType);


        // 考虑node的子元素
        let childNodes &＃61; node.childNodes;
        for (let i &＃61; 0; i             //递归
            _vnode.appendChild(getVNode(childNodes[i]));
        }
    } else if (nodeType &＃61;&＃61;&＃61; 3) {
        // 文本节点
        _vnode &＃61; new VNode(undefined, undefined, node.nodeValue, nodeType);
    }
    return _vnode;
}


注意点&＃xff1a;文本节点的判断和节点文本的获取

由于文本也是一个节点。

**元素本身的nodeValue本来就是null&＃xff0c;nodeValue是针对#text的。而且最重要的是nodeValue属性是用来获取文本节点的值的。**这也就意味着&＃xff0c;nodeValue拿不到非文本节点的值。

一般情况下&＃xff0c;打印文本节点&＃xff0c;会出现#text字样&＃xff0c;这就是在console里辨别出文本节点的其中一个方法。

完整代码

html>


    
    Titletitle>
head>


    hello1div>
    hello2div>
    hello3div>
    

    


        1span>2span>3span>4span>5span>6span>
    p>
    

        
• 1li>
          
• 2li>
          
• 3li>
          
• 4li>
          
• 5li>
    ul>
div>
// 用内存去表述DOM// 将真实DOM转化为虚拟DOM// // 文本节点 &＃61;> {tag:undefined,value:&＃39;文本节点&＃39;}   文本节点转化// // // 用构造函数来 进行以上转换class VNode {constructor(tag, attrs, value, type) {this.tag &＃61; tag && tag.toLowerCase(); // 标签名this.attrs &＃61; attrs;  // 属性值this.value &＃61; value; // 文本this.type &＃61; type;  // 元素类型this.children &＃61; []  // 子节点
        }// 追加子节点
        appendChild(vnode) {this.children.push(vnode)
        }
    }//兼容浏览器获取节点文本的方法function getTextFromNode(e) {let t &＃61; "";//如果传入的是元素&＃xff0c;则继续遍历其子元素//否则假定它是一个数组
        e &＃61; e.childNodes || e;//遍历所有子节点for (let j &＃61; 0; j             //如果不是元素&＃xff0c;追加其文本值//否则&＃xff0c;递归遍历所有元素的子节点
            t &＃43;&＃61; e[j].nodeType !&＃61;&＃61; 1 ?
                e[j].nodeValue : getTextFromNode(e[j].childNodes);
        }//返回区配的文本return t;
    }function getVirtualDom(node) {let nodeType &＃61; node.nodeType;let _vnode &＃61; null;if (nodeType &＃61;&＃61;&＃61; 1) {let nodeName &＃61; node.nodeName;let property &＃61; node.attributes;let _propertyObj &＃61; {};for (let i &＃61; 0; i                 _propertyObj[property[i].nodeName] &＃61; property[i].nodeValue;
            }
            _vnode &＃61; new VNode(nodeName, _propertyObj, undefined, nodeType)let childNodes &＃61; node.childNodes;for (let i &＃61; 0; i                 _vnode.appendChild(getVirtualDom(childNodes[i]))
            }
        } else if (nodeType &＃61;&＃61;&＃61; 3) {// 尤其要注意&＃xff0c;文本也是一个节点// 可以回忆一下&＃xff0c;原生js生成一个节点的步骤&＃xff0c;就理解了let text &＃61; node.nodeValue
            _vnode &＃61; new VNode(undefined, undefined, text, nodeType)
        }return _vnode;
    }let root &＃61; document.querySelector("#root");console.log(root);console.log(root.nodeType);console.log(root.attributes)// let vroot &＃61; getVNode(root);let vRoot &＃61; getVirtualDom(root)// console.log(vroot);console.log(vRoot)script>
body>
html>


  部分输出如下&＃xff1a;