JS前端开发模拟虚拟dom转真实dom详解
作者：前端兰博
这篇文章主要为大家介绍了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的资料请关注脚本之家其它相关文章！