【前端芝士樹】模擬虛擬DOM掛載

mist14 發(fā)布于2019-08-23 13:01 / 1065人閱讀

摘要：前端芝士樹虛擬掛載是如何實現(xiàn)的問題描述給出如下虛擬的數(shù)據(jù)結構，如何實現(xiàn)簡單的虛擬，渲染到目標樹樣例數(shù)據(jù)渲染結果如下所示用實現(xiàn)

【前端芝士樹】虛擬DOM掛載是如何實現(xiàn)的 問題描述

給出如下虛擬dom的數(shù)據(jù)結構，如何實現(xiàn)簡單的虛擬dom，渲染到目標dom樹

//樣例數(shù)據(jù)
let demoNode = ({
  tagName: "ul",
  props: {"class": "list"},
  children: [
    ({tagName: "li", children: ["douyin"]}),
    ({tagName: "li", children: ["toutiao"]})
  ]
});

渲染結果如下所示：

 
     douyin
     toutiao

用innerHTML實現(xiàn)RenderNode

/**
 * @param node
 * @return {string}
 * */
function RenderNode(node) {
  let result="";
  if(typeof node === "string"){
    result += node;
  } else if(Array.isArray(node)){
    node.forEach(item => {
      result += RenderNode(item);
    });
  }else{
    let tag = node.tagName || "div";
    let props = "";
    if (node.props) {
      let nodeProps = node.props;
      for (let key in nodeProps) {
        props += (` ${key}="${nodeProps[key]}"`);
      }
    }
    if(node.children && node.children.length){
      result = `<${tag + props}>${RenderNode(node.children)}`;
    }
  }
  return result;
}

let renderHTML = RenderNode(demoNode);
console.log(renderHTML);
let main = document.getElementById("main");
main.innerHTML = renderHTML;

云服務器 GPU云服務器 html生成dom樹前端技能樹芝士芝士存儲

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99156.html

【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

摘要：提供了糟糕的支持，而雖然接近標準，但依舊未能完全正確的支持標準。盡管修復了許多的問題，但是依然延續(xù)實現(xiàn)中的其它故障主要是盒模型問題。因此大部分的聲明將觸發(fā)嚴格模式即依據(jù)標準的規(guī)則渲染網(wǎng)頁。深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點主要參考自第一篇文章，然而筆者在讀的時...

binta 2019-08-29 16:13 評論0 收藏0
vue源碼閱讀之數(shù)據(jù)渲染過程

摘要：圖在中應用三數(shù)據(jù)渲染過程數(shù)據(jù)綁定實現(xiàn)邏輯本節(jié)正式分析從到數(shù)據(jù)渲染到頁面的過程，在中定義了一個的構造函數(shù)。一、概述 vue已是目前國內(nèi)前端web端三分天下之一，也是工作中主要技術棧之一。在日常使用中知其然也好奇著所以然，因此嘗試閱讀vue源碼并進行總結。本文旨在梳理初始化頁面時data中的數(shù)據(jù)是如何渲染到頁面上的。本文將帶著這個疑問一點點追究vue的思路。總體來說vue模版渲染大致流程如圖1所...

AlphaGooo 2019-05-22 16:53 評論0 收藏0
vue常用知識點總結

摘要：這里借鑒了一下的處理方式，我們把單獨模塊的包裝成一個函數(shù)，提供一個全局的回調(diào)方法，加載完成時候再調(diào)用回調(diào)函數(shù)。感謝本文引用鏈接的各位大佬們，小菜鳥我只是個搬運工 1.談一談你理解的vue是什么樣子的？ vue是數(shù)據(jù)、視圖分離的一個框架，讓數(shù)據(jù)與視圖間不會發(fā)生直接聯(lián)系。MVVM 組件化：把整體拆分為各個可以復用的個體數(shù)據(jù)驅(qū)動：通過數(shù)據(jù)變化直接影響bom展示，避免dom操作。可以在...

xiaokai 2019-08-22 17:10 評論0 收藏0