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

最新推荐文章于 2024-04-30 16:57:21 发布

格子衫_

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量344

点赞数

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_36864724/article/details/129120931

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

// 将虚拟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)