我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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: []
              }
          ]
      }
  ]
}

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)

效果

image.png

总结

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

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

这篇文章主要为大家介绍了JS前端开发模拟虚拟dom转真实dom详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-01-10

编程热搜

目录