JS前端开发模拟虚拟dom转真实dom详解

JS模拟虚拟dom转真实dom 虚拟dom转真实dom 2023-01-10 12:01:49 448人浏览安东尼

摘要

目录引言虚拟dom的介绍虚拟dom转换真实dom总结引言经常使用Vue或React的小伙伴肯定对虚拟dom这个词不陌生，虚拟dom的设计是推进前端框架发展的一大变革。今天带大

引言

经常使用Vue或React的小伙伴肯定对虚拟dom这个词不陌生，虚拟dom的设计是推进前端框架发展的一大变革。今天带大家简单模拟下虚拟dom转换真实dom的js设计。废话不说了，上车吧。

虚拟dom的介绍

介绍

虚拟dom本质是一段js代码，用来模拟dom树的结果。

如下是对一段虚拟dom模拟真实dom的例子

真实dom

<div class="box">
    <p name="dog">xiao ming</p>
  </div>

虚拟dom

 let vnode = {
  tag:"div",
  attrs:{
    class:["box"]
  },
  childrens:[
    {
      tag:"p",
      attrs:{
        name:"dog"
      },
      childrens:[
        {
          tag:'text',
          content:"xiao ming"
        }
      ]
    }
  ]
}

优势

跨平台
虚拟dom配合diff算法在快速更新dom的同时，可以减少页面的重拍与重绘
虚拟dom解放了前端程序员的思想，彻底抛弃了早期大量操作dom的工作，而是将工作重点放在了数据和逻辑的设计。从此不再被后端程序员嘲笑为切图崽

缺点

页面有大量dom时，性能可能没有原生dom效率高。（原因：虚拟dom本质还是用js描述dom树,所以当页面dom比较多时，js操作与diff算法需要耗费额外的性能较大）

虚拟dom转换真实dom

终于来到了今天的主角，通过设计虚拟dom转换真实dom的过程，可以更加清晰其工作原理和设计过程，同时也能让各位在面试中如鱼得水，码上拈来。

const vnode = {
  tag: 'DIV',
  attrs: {
      id: 'app'
  },
  children: [{
          tag: 'SPAN',
          children: [{
              tag: 'A',
              children: []
          }]
      },
      {
          tag: 'SPAN',
          children: [{
                  tag: 'A',
                  children: []
              },
              {
                  tag: 'A',
                  children: []
              }
          ]
      }
  ]
}

function render(vnode) {
  //核心递归函数
  const main = (node,parent=null) => {
    let ele
    ele = document.createElement(node.tag.toLowerCase())
    //添加属性
    if(node.attrs) {
      for(let key in node.attrs) {
        ele.setAttribute(key,node.attrs[key])
      }
    }
    //添加孩子，递归
    if(node.children && node.children.length) {
      for(let val of node.children) {
        main(val,ele)
      }
    }
    if(parent) {
      parent.appendChild(ele)     
    }else{
      parent = ele
    }
    return parent
  }
  let dom = main(vnode)
  return dom
}
render(vnode)

效果