题解 | #虚拟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])
}

全部评论

相关推荐

不愿透露姓名的神秘牛友
06-30 18:19
点赞 评论 收藏
分享
不要停下啊:大二打开牛客,你有机会开卷了,卷起来,去找课程学习,在牛客上看看大家面试笔试都需要会什么,岗位有什么需求就去学什么,努力的人就一定会有收获,这句话从来都经得起考验,像我现在大三了啥也不会,被迫强行考研,炼狱难度开局,啥也不会,找工作没希望了,考研有丝丝机会
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务