前端手写(二十七)——虚拟dom转化为真实dom

最新推荐文章于 2024-03-10 16:50:49 发布
最新推荐文章于 2024-03-10 16:50:49 发布
阅读量1.7k 收藏 5
点赞数 3
分类专栏： js面试题 文章标签： js dom 虚拟dom render
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47450807/article/details/123941659
版权

一、写在前面
在SPA时代，虚拟dom随处可见，虚拟dom的好处之一是为了更好的跨平台，并且虚拟dom占用内存大小，要比真实dom小的多，因为真实dom上的属性太多，虚拟dom可以理解为真实dom的抽象。下面将写一个render函数来将虚拟DOM转化为真实dom。
二、手写

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .title {
   
      background-color: red;
    }

    .h1 {
   
      color: green;
    }
最低0.47元/天 解锁文章
卖菜的小白
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js代码-手写虚拟dom
07-15
js代码-手写虚拟dom
手写-将虚拟 Dom 转化为真实 Dom
weixin_45825917的博客
09-01 83
【代码】手写-将虚拟 Dom 转化为真实 Dom。
从VirtualDom（虚拟Dom）到真实DOM
前端小记
03-30 3029
虚拟Dom实现为真实Dom结构并进行更新的集合说明，包含虚拟Dom和真实Dom的互相转换以及更新时候的比较，在react和Vue以及后续版本应用的逻辑说明。本文展示的代码仅仅是简单初级代码，关于React和Vue中的diff算法和真实dom以及虚拟dom的互相转换请参考react和Vue的官方源码。
手写vue2学习笔记(三) 生成虚拟dom并转换为真实dom
最新发布
tian_liang_jia的博客
03-10 1044
转换时需要区分，1. 是什么类型的子元素，上文中我们将ast语法树分为了元素类型和文本类型，那么我们需要分别对这两种类型进行处理，2. 如果是文本类型，含不含有大括号表达式，对于不含有和含有的分别要做不同的处理。VNode和ast语法树很类似，都是把语法或属性抽象为一个对象，不同的是ast描述的是语法本身而虚拟dom是描述的dom，可以增加一些自定义的属性。_c为元素，_v为文本，_s为变量也就是大括号表达式内得值，里面可以嵌套_c就也是其子元素。这个方法的作用就是，1.生成的函数执行得到虚拟DOM。
虚拟DOM转为真实DOM
W1254667的博客
01-09 104
【代码】虚拟DOM转为真实DOM。
虚拟DOM 和真实DOM的区别
weixin_45677987的博客
04-20 4700
1： 虚拟 dom： 虚拟DOM 和真实DOM 的区别: 虚拟dom 是将真实数据抽取出来， 以对象的形式模拟树形结构， 比如：dom 是这样的。 真实dom <div> <p>123</p> </div> 对应的虚拟dom： (伪代码) var Vnode = { tag: "div", children: { {tag: 'p', text: '123'} } } dom 是很慢的。 如果我们把一个简单的di...
我的纯手写-dom思维导图
11-04
dom思维导图
WPF手写输入+虚拟键盘源码
09-06
手写输入识别，虚拟键盘中\英文输入，两种模式可自行切换，自带记忆功能。可自行二次开发
手写DOM事件模型
04-29
通过原生JavaScript实现一个简单的DOM事件模型，关于该资源的描述请参考：http://blog.csdn.net/gameloft9/article/details/51228191
模拟Dom转换为真实Dom
weixin_44423378的博客
08-01 222
【代码】模拟Dom转换为真实Dom。
【笔记】将虚拟DOM转换为真实DOM （render）
qq_36864724的博客
02-20 350
【代码】【笔记】将虚拟DOM转换为真实DOM （render）
虚拟dom 转真实dom
HQ\(^o^)/的博客
07-25 926
虚拟dom转真实dom
虚拟DOM转换为真实DOM 初始化与更新时的转换原理
我只是个很菜的前端
07-22 282
虚拟DOM转换为真实DOM 初始化与更新时的转换原理
构建一个虚拟DOM并转换为真实DOM
qq_38918017的博客
08-31 2254
关于真实DOM与虚拟DOM 1.在学习虚拟DOM之前，让我们先来了解一下真实的DOM结构，这里不得不提的是关于浏览器渲染方面的知识。 当浏览器拿到一个HTML文件，首先会根据HTML文件构建出一个DOM树来，并行加载CSS文件，图片，JS脚 本，值得注意的是DOM树的渲染和CSSOM渲染是并行执行的，而不是串行进行的。 （JS脚本需要在html尾部加载，或是写入window.onload方法里，让DOM加载完成后再去加载JS脚本，防止 进程阻塞，JS脚本是同步加载的）。 在构建
真实dom转换为虚拟dom的简单实现
zhouybing的博客
05-25 890
标题真实dom转换为虚拟dom的简单实现 首先给出虚拟dom的数据结构。 function vnode(tag, data) { this.tag = tag; this.data = data; this.childern = []; } 一个虚拟节点拥有标签名(tag),属性数据(data),和子节点(childern)。 我们再为这个对象添加一个方法,用来增加子节点。 vnode.prototype.addChild = function (
彻底搞懂Vue把虚拟dom(vnode)转化为真实dom的过程
qq_37947438的博客
03-10 6911
Vue是如何把虚拟dom(vnode)转化为真实dom的？ 相信很多学习过vue的小伙伴们都觉得很容易上手，因为vue不需要太过复杂的配置，也不需要你太关注它背后运行的逻辑，你只要用vue-cli脚手架建一个项目就可以在本地进行开发了，个人认为vue最好的一点就是你只要关注数据的变化就好了，其他的一切都有vue背后来实现。 我们今天就来探究一下vue内部是如何吧虚拟dom变为我们页面上的html代码的，并且手写一个简单的例子来实现。 写之前我们先用一张图来了解一下vue把vnode变为真实dom的一个流程
虚拟dom转真实dom
m0_46430338的博客
12-27 461
初版 // 文本节点 vDom: string // 元素节点 vDom: object {tag:'div', classList: [], value: 'div', children: [{...},{...}]} const virtualDomToDom = vDom => { let parentNode = document.querySelector('body') const toDom = vDom => { const vDomType = typeo
手写vue的vNode转化dom方法
06-02
在 Vue 中，可以通过 `render` 函数或者模板来生成虚拟 DOM，而将虚拟 DOM 转化为真实 DOM 的过程，就是 Vue 中的“渲染”。在 Vue 中，提供了一个 `createElment` 函数，可以将虚拟 DOM 转换成真实 DOM。 下面是一个手写 Vue 的 vNode 转化 dom 的例子： ``` function render() { return h('div', { class: 'container' }, [ h('h1', null, 'Hello, World!'), h('p', null, 'This is a paragraph.') ]) } const container = document.getElementById('app') const vnode = render() const dom = createDOM(vnode) function createDOM(vnode) { if (typeof vnode === 'string') { return document.createTextNode(vnode) } const el = document.createElement(vnode.tag) if (vnode.data && vnode.data.attrs) { Object.keys(vnode.data.attrs).forEach(key => { el.setAttribute(key, vnode.data.attrs[key]) }) } vnode.children.forEach(child => { el.appendChild(createDOM(child)) }) return el } container.appendChild(dom) ``` 在上面的例子中，我们先通过 `render` 函数生成一个虚拟 DOM，然后通过 `createDOM` 函数将虚拟 DOM 转换成真实 DOM，最后将真实 DOM 添加到页面中。 在 `createDOM` 函数中，首先判断当前节点是否是一个文本节点，如果是，则通过 `document.createTextNode` 方法创建一个文本节点并返回；否则，通过 `document.createElement` 方法创建一个元素节点，并将节点的属性和子节点递归创建。 需要注意的是，`vnode` 的属性和子节点都保存在 `data` 对象中，属性保存在 `data.attrs` 中，子节点保存在 `children` 中。在创建元素节点时，需要遍历属性和子节点，并分别设置到元素节点中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值