快捷導(dǎo)航

JS前端開發(fā)模擬虛擬dom轉(zhuǎn)真實dom詳解

更新時間：2023年01月10日 10:06:40 作者：前端蘭博

這篇文章主要為大家介紹了JS前端開發(fā)模擬虛擬dom轉(zhuǎn)真實dom詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

經(jīng)常使用Vue或React的小伙伴肯定對虛擬dom這個詞不陌生，虛擬dom的設(shè)計是推進前端框架發(fā)展的一大變革。今天帶大家簡單模擬下虛擬dom轉(zhuǎn)換真實dom的js設(shè)計。廢話不說了，上車吧。

虛擬dom的介紹

介紹

虛擬dom本質(zhì)是一段js代碼，用來模擬dom樹的結(jié)果。

如下是對一段虛擬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"
        }
      ]
    }
  ]
}

優(yōu)勢

跨平臺
虛擬dom配合diff算法在快速更新dom的同時，可以減少頁面的重拍與重繪
虛擬dom解放了前端程序員的思想，徹底拋棄了早期大量操作dom的工作，而是將工作重點放在了數(shù)據(jù)和邏輯的設(shè)計。從此不再被后端程序員嘲笑為切圖崽

缺點

頁面有大量dom時，性能可能沒有原生dom效率高。（原因：虛擬dom本質(zhì)還是用js描述dom樹,所以當(dāng)頁面dom比較多時，js操作與diff算法需要耗費額外的性能較大）

虛擬dom轉(zhuǎn)換真實dom

終于來到了今天的主角，通過設(shè)計虛擬dom轉(zhuǎn)換真實dom的過程，可以更加清晰其工作原理和設(shè)計過程，同時也能讓各位在面試中如魚得水，碼上拈來。

const vnode = {
  tag: 'DIV',
  attrs: {
      id: 'app'
  },
  children: [{
          tag: 'SPAN',
          children: [{
              tag: 'A',
              children: []
          }]
      },
      {
          tag: 'SPAN',
          children: [{
                  tag: 'A',
                  children: []
              },
              {
                  tag: 'A',
                  children: []
              }
          ]
      }
  ]
}
/*虛擬dom轉(zhuǎn)換真實dom設(shè)計*/
function render(vnode) {
  //核心遞歸函數(shù)
  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)

效果