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

mist14 發布于2019-08-23 13:01 / 1075人閱讀

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

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

給出如下虛擬dom的數據結構，如何實現簡單的虛擬dom，渲染到目標dom樹

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

渲染結果如下所示：

 
     douyin
     toutiao

用innerHTML實現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樹前端技能樹芝士芝士存儲

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99156.html

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

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

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

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

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

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

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