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

 更新时间:2023年01月10日 10:06:40   作者:前端兰博  
这篇文章主要为大家介绍了JS前端开发模拟虚拟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: []
              }
          ]
      }
  ]
}
/*虚拟dom转换真实dom设计*/
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)

效果

总结

以上是我对虚拟dom的简单总结和虚拟dom转换方法的设计,更多关于JS模拟虚拟dom转真实dom的资料请关注脚本之家其它相关文章!

相关文章

最新评论