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

目录
  • 引言
  • 虚拟dom的介绍
  • 虚拟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的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JS前端面试手写apply和bind实例

    目录 前言 apply && bind apply && bind 作用 相同点 VS 不同点 轻松手写 手写实现 apply 手写实现 bind 总结 前言 面试官问:“聊一聊你理解的 apply 和 bind.” 于是我便开始开始介绍起这两个知识点,最后顺带提了它们的实现代码. 这不提倒还好,一提就出了大事,一下子给面试官找到了面试题目. 面试官紧接着说:“既然你提到了代码,那就手写一下它俩吧.” 我一下子不知所措.虽然我了解过 apply 和 bind 手写代码,但是

  • JS前端操作 Cookie源码示例解析

    目录 引言 源码分析 使用 源码 分析 set get remove withAttributes & withConverter 总结 引言 前端操作Cookie的场景其实并不多见,Cookie也因为各种问题被逐渐淘汰,但是我们不用Cookie也可以学习一下它的思想,或者通过这次的源码来学习其他的一些知识. 今天带来的是:js-cookie 源码分析 使用 根据README,我们可以看到js-cookie的使用方式: // 设置 Cookies.set('name', 'value'); //

  • JS前端性能指标定位FMP使用详解

    目录 什么是FMP? 权重定位 权重计算 节点标记 计算权重值 第一步:简单粗暴,按大小计算 第二步:根据权重值推导主角元素 第三步:根据元素类型取时间 回归验证 什么是FMP? 可能大家对「白屏时间」这个名词并不陌生,他是「刀耕火种」年代,我们收集的页面性能指标之一,随着前端工程的复杂化,白屏时间已经没有什么实质性的意义了,取而代之的就是 FMP. 先来介绍几个与之相关的名词. FP(First Paint):首次绘制,标记浏览器渲染任何在视觉上不同于导航前屏幕内容的时间点 FCP(First

  • JS前端错误监控捕获以及上报方法详解

    目录 前端错误捕获方法 不同场景错误处理方式 错误信息上报 ajax进行上报 image上报 sendBeacon 前端错误捕获方法 前端捕获错误的方法: try..catch:捕获的异常必须是线程执行进入到try...catch且try...catch未执行完的时候抛出来. 语法异常在语法检查阶段就报错了,线程尚未进入try...catch代码块,所以无法捕获到异常. try { a. }catch(e) { console.log('catch error:', e) } 不能捕获setTi

  • JS前端重新部署通知用户刷新网页

    目录 1.目标场景 2.思考解决方案 3.代码实现 4.测试 1.目标场景 有时候上完线,用户还停留在老的页面,用户不知道网页重新部署了,跳转页面的时候有时候js连接hash变了导致报错跳不过去,并且用户体验不到新功能. 2.思考解决方案 如何去解决这个问题 思考中... 如果后端可以配合我们的话我们可以使用webSocket 跟后端进行实时通讯,前端部署完之后,后端给个通知,前端检测到Message进行提示,还可以在优化一下使用EvnentSource 这个跟socket很像只不过他只能后端往

  • 前端必会的nodejs知识工具模块使用示例详解

    目录 Util 常用的判断属性,在util.types对象 常用的方法和属性 DNS OS 常用的方法和属性 Path 常用的方法和属性 总结 Util nodejs中有许多在框架中常用而我们又不知道的工具模块,本文介绍下这几个工具模块,算是自己的一个知识回顾吧. Node.js 的工具模块 常用的判断属性,在util.types对象 isDate:判断是否是日期格式的变量 isAnyArrayBuffer:判断是否是buffer isAsyncFunction:判断函数是否是异步的 let u

  • JS前端攻坚Eventbus实现更新示例详解

    目录 引言 全局注册 注册Ebus事件 触发Ebus事件 引言 最近复盘了一下公司的项目,之前一直没有做过相关的Eventbus的案例实现,这篇文章大概简要的介绍一下各个部分是如何实现的,实现的方法比较简单,主要分为三个步骤,分别是全局挂载,注册,以及注册事件的触发. 全局注册 在newVue的时候需要对我们的eventbus进行挂载,挂载方式如下,newvue中包含了需要用到的方法,eventbus的注册需要在beforeCreate钩子中进行实例化,在这里我们的对eventbus在vue的原

  • JS前端攻坚浅析instanceof实现原理

    目录 正文 instanceof的实现 正文 无论是平时开发还是学习中,对于类型的判断总是非常的重要,常见的类型判断方法有很多,对于每种比较常用的api我们需要对其进行一定的了解,才能更好的判断其中的实现方法,对Js的了解程度才能更深,这篇文章带大家了解一下instanceof的实现 instanceof的实现 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上(来自MDN) 我们先来看下instanceof的用法,有点类似于对于一个父类,生

  • JS前端中的设计模式和使用场景示例详解

    目录 引言 策略模式 1.绩效考核 2.表单验证 策略模式的优缺点: 代理模式 1.图片懒加载: 2.缓存代理 总结 引言 相信大家在日常学习和工作中都多多少少听说/了解/使用过 设计模式,我们都知道,使用恰当的设计模式可以优化我们的代码,那你是否知道对于前端开发哪些 设计模式 是日常工作经常用到或者必须掌握的呢?本文我将带大家一起学习下前端常见的设计模式以及它们的 使用场景!!! 本文主讲: 策略模式 代理模式 适合人群: 前端人员 设计模式小白/想知道如何在项目中使用设计模式 策略模式 策略

  • javascrip高级前端开发常用的几个API示例详解

    目录 MutationObserver API 特点 IntersectionObserver API 举个例子 图片懒加载 无限滚动 getComputedStyle() API 与style的异同 getBoundingClientRect API 应用场景 1.获取 dom 元素相对于网页左上角定位的距离 2.判断元素是否在可视区域内 MutationObserver MutationObserver 是一个可以监听 DOM 结构变化的接口. 当 DOM 对象树发生任何变动时,Mutati

  • JS前端二维数组生成树形结构示例详解

    目录 问题描述 实现步骤 完整代码 问题描述 前端在构建国家的省市区结构时,接口返回的不是树形结构,这个时候就需要我们进行转化.以下数据为例 [ [ { "districtId": 1586533852834, "parentCode": "000", "nodeCode": "000001", "name": "浙江省", "districtType&qu

  • JS前端画布与组件元信息数据流示例详解

    目录 正文 拓展应用状态与静态方法 总结 正文 接下来需要解决两个问题: 可视化搭建的其他业务元素如何与画布交互.比如拓展属性配置面板.图层列表.拖拽添加组件.定位锚点.主题等等. runtimeProps 如何访问到当前组件实例的 props. 这两个问题非常重要,而恰好又可以通过良好的数据流设计一次性解决,接下来让我们分别分析讨论一下. 问题一:可视化搭建的其他业务元素如何与画布交互.比如拓展属性配置面板.图层列表.拖拽添加组件.定位锚点.主题等等 需要设计一个 Hooks API,可以访问

  • JS前端使用canvas动态绘制函数曲线示例详解

    JS前端使用canvas动态绘制函数曲线示例详解

    目录 前言 第一步:绘制坐标系 1.如何确定 x 轴和 y 轴的边界值 2.不是传入多少网格数就是多少网格 3.如何让坐标原点位于画布中心 4.刻度总是会有浮点数 第二步:画函数曲线 第三步:绘制辅助线和交点坐标 第四步:平移 第五步:缩放 第六步:动态绘制曲线 第七步:模糊到高清 前言 不说废话,我们直入主题.先来看看读了这篇文章你将得到什么,就是下面这个东西啦(是不是很清晰很顺滑): 那具体要做什么呢,我们来简单拆解一下步骤: 绘制坐标系 绘制多条函数曲线 绘制辅助线和坐标点 支持平移.缩放

  • JS前端开发判断是否是手机端并跳转操作（小结）

    常用跳转代码 <script type="text/javascript"> // borwserRedirect (function browserRedirect(){ var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad'; var bIsIphone = sUserAgent.match(/iphone os/i) ==

  • Vue虚拟Dom到真实Dom的转换

    Vue虚拟Dom到真实Dom的转换

    再有一颗树形结构的Javascript对象后, 我们需要做的就是讲这棵树跟真实Dom树形成映射关系.我们先回顾之前的mountComponnet 方法: export function mountComponent(vm, el) { vm.$el = el ... callHook(vm, 'beforeMount') ... const updateComponent = function () { vm._update(vm._render()) } ... } 我们已经执行完了vm._r

  • Svelte调试模式js级别差异和细化后的体积差异详解

    目录 js级别的差异 ecma ast差异 细化后的体积差异 调试模式 on:事件名 svelte:options setContext js级别的差异 主要来自两个方面:hook系统(不考虑类)和ecma-ast差异hook系统. 钩子系统的api更多地用于纯函数组件注入状态和生命周期.在这两个方面,Svelte提供的解决方案是不同的. 由于预运行编译,Svelte编译器扫描所有与UI相关的状态并注入黑魔法,使得状态的使用与变量声明和赋值一样简单. 基本上,开发人员不需要太在意所谓的副作用:因

  • JS手写bind之处理new的情况详解

    目录 new 判断函数是否通过 new 被调用 new 和 bind 实现完整的 bind 结尾 大家好,我是前端西瓜哥. 之前写了一篇关于 JS 中 bind 方法的实现的文章,并给出了实现: Function.prototype.myBind = function(thisArg, ...prefixArgs) { const fn = this; return function(...args) { return fn.call(thisArg, ...prefixArgs, ...arg

  • vue+three.js实现炫酷的3D登陆页面示例详解

    vue+three.js实现炫酷的3D登陆页面示例详解

    目录 前言: Three.js的基础知识 关于场景 关于光源 关于相机(重要) 关于渲染器 完善效果 创建一个左上角的地球 使地球自转 创建星星 使星星运动 创建云以及运动轨迹 使云运动 完成three.js有关效果 结语 前言: 大家好,我是xx传媒严导(xx这两个字请自行脑补) . 该篇文章用到的主要技术:vue3.three.js 我们先看看成品效果: 高清大图预览(会有些慢): 座机小图预览: 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什

随机推荐