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

mist14 发布于2019-08-23 13:01 / 1036人阅读

摘要：前端芝士树虚拟挂载是如何实现的问题描述给出如下虚拟的数据结构，如何实现简单的虚拟，渲染到目标树样例数据渲染结果如下所示用实现

【前端芝士树】虚拟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树前端技能树芝士芝士存储

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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