<div id="demo" class="test">
<p>你好javascript</p>
<ul>
<li>{{name}}</li>
</ul>
</div>
<script type="text/javascript">
let demoNode = document.querySelector("#demo");
class Vnode{
constructor(tage,data,value,type) {
this.tage = tage;
this.data = data;
this.value = value;
this.type = type;
this.childen = [];
}
appendChilden(vnode){
this.childen.push(vnode)
}
}
//生成vnode的方法
var createVnode = (node)=>{
node = typeof node=="string"?document.querySelector(node):node;
let type = node.nodeType;//1表示标签 3表示文本
let tagName = node.nodeName;
tagName = tagName.toLowerCase();
let val = node.nodeValue;
let vnode;
if(type===1){//标签节点处理
let attrs = node.attributes;
let childen = node.childNodes;//包含了文本加标签
let attrsObj = {};
for(let i = 0;i<attrs.length;i++){
attrsObj[attrs[i].nodeName] = attrs[i].nodeValue;
}
vnode = new Vnode(tagName,attrsObj,val,type);
for(let k = 0;k<childen.length;k++){
vnode.appendChilden(createVnode(childen[k]))
}
}else if(type===3){//文本节点处理
vnode = new Vnode(null,null,val,type);
}
return vnode;
}
let VNODE = createVnode(demoNode)
let createRealNode = (vnode)=>{
if(vnode.type===3){//文本节点
return document.createTextNode(vnode.value)
}else if(vnode.type===1){//标签节点
//创建标签
let node = document.createElement(vnode.tage);
//设置属性
Object.keys(vnode.data).forEach(keys=>{
node.setAttribute(keys,vnode.data[keys])
})
vnode.childen.length&&vnode.childen.forEach(item=>{
node.appendChild(createRealNode(item))//递归子节点
})
return node
}
}
let REALNODE = createRealNode(VNODE)
console.log(REALNODE)
将真实dom保存到内存中,将内存中的vnode变成真实dom
最新推荐文章于 2023-08-18 15:22:57 发布