【笔记】将虚拟DOM转换为真实DOM （render）

最新推荐文章于 2024-09-10 10:36:17 发布

原创最新推荐文章于 2024-09-10 10:36:17 发布 · 452 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

js 专栏收录该内容

4 篇文章

订阅专栏

该代码示例展示了如何将一个JavaScript对象表示的虚拟DOM结构转换成实际的DOM元素。函数_render遍历并创建DOM树，处理标签、属性和子节点。它处理数字和字符串类型的VNode，并使用document.createElement和setAttribute来构建DOM结构。

// 将虚拟dom 转换为 真实 dom
let vdom = {
  tag: 'DIV',
  attrs:{
  id:'app'
  },
  children: [
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] }
      ]
    },
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] },
        { tag: 'A', children: [] }
      ]
    }
  ]
}

// 实现

function _render (vnode) {
	//特殊性
	if (typeof vnode == 'number') {
		vnode = String(vnode)
	}
	
	if (typeof vnode == 'string') {
		return document.createTextNode(vnode)
	}
 	
 	// 通用
 	let dom = document.createElement(vnode.tag)
	
	if (vnode.attrs) {
		for (let key in vnode.attrs) {
			dom.setAttribute(key, vnode.attrs[key])
		}
	}
	
	if (vnode.children) {
		vnode.children.forEach(e => {
			dom.appendChild(_render(e))
		})
	}

	return dom
}

_render(vdom)