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的资料请关注脚本之家其它相关文章!
相关文章
js报错 Object doesn''t support this property or method的原因分析
运行js是出现Object doesn't support this property or method 错误的可能原因分析。2011-03-03bootstrap select2插件用ajax来获取和显示数据的实例
今天小编就为大家分享一篇bootstrap select2插件用ajax来获取和显示数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论