题解 | #虚拟DOM#
虚拟DOM
https://www.nowcoder.com/practice/a283d2c284ed49468c3b0f6ec0312b0f
let dom = document[vnode.tag ? 'createElement' : 'createTextNode'](vnode.tag || vnode.text); vnode.props.class && dom.setAttribute("class", vnode.props.class); vnode.tag && vnode.text && dom[vnode.tag ? "innerText" : "textContent"](vnode.text); vnode.children && vnode.children.map(item => { let childDom = createEl(item); dom.appendChild(childDom); }) return dom;
核心代码就是上面这样,需要注意的时候创建dom节点和文本节点的方法是不一样的,赋值的方式也是不同的【当然这个用例的时候 ul,li 的赋值可以不予考虑】,然后就是递归每个节点的children
// ps:其实还应该考虑下props存在多个属性的情况,这里就不再赘述,无非就是对象key的循环,然后插入属性 for(let key in node.props){ dom.setAttribute(key, vnode.props[key]) }