【前端芝士树】模拟虚拟DOM挂载

CloudCat

发布于 2019-05-26 10:58:41

2350

发布于 2019-05-26 10:58:41

文章被收录于专栏：一只想做全栈的猫一只想做全栈的猫

【前端芝士树】虚拟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;

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

渲染