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

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

問題描述

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

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

渲染結果如下所示：

 <ul class="list">
     <li>douyin</li>
     <li>toutiao</li>
 </ul>

用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)}</${tag}>`;
    }
  }
  return result;
}

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